widgetti / widgetti/solara

Dark Mode does not work in Google Colab

Open
#1,024 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Python
Stars
2.2k
Forks
202
Avg merge
4h 36m
Merged PRs (30d)
3

Description

Expected Behavior

If I use solara.lab.theme.dark to set the theme it does nothing. If I use ipyvuetify, v.theme.dark = True, it works on the first cell run, but any subsequent runs renders in light mode

Current Behavior

always runs in light mode except first cell run

Steps to Reproduce the Problem

import solara

import solara.lab # Let's EXCLUDE solara.lab theme for this test

import ipyvuetify as v
from IPython.display import display, Javascript
from google.colab import output
import time # Keep import for potential (optional) delay test

--- Configuration ---

use_dark_mode = True
print(f"[--- CELL START ---]")
print(f"Initial v.theme.dark (before setting): {v.theme.dark}") # Check default

--- DO NOT set theme early in the cell ---

We want to set it as close to the display call as possible.

@solara.component
def MinimalThemeApp():
solara.lab.theme.dark
"""A minimal app that should inherit the global theme."""
# This component just renders; it relies entirely on the global theme state
print(f"[COMPONENT RENDER] Reading v.theme.dark: {v.theme.dark}")
with solara.Div(style="padding: 20px; border: 1px solid orange;") as main:
solara.Info(f"Render Check. Target Dark={use_dark_mode}. Actual v.theme.dark at render: {v.theme.dark}")
solara.Button("Test Button")
# Display the theme state visually if possible
solara.Switch(label=f"v.theme.dark={v.theme.dark}", value=v.theme.dark)
return main

--- Set Theme JUST Before Display ---

This is the critical point. Set the theme state immediately before rendering.

print(f"[ACTION] Setting ONLY v.theme.dark = {use_dark_mode} (Immediately before display)")
v.theme.dark = use_dark_mode

--- Optional Delay ---

If the above still fails, uncommenting this might help, but isn't ideal.

delay = 0.1

print(f"[DEBUG] Sleeping for {delay}s after setting theme, before display...")

time.sleep(delay)

print(f"[DEBUG] Awake. v.theme.dark={v.theme.dark}")

--- End Optional Delay ---

print(f"[DEBUG] Calling display(). v.theme.dark is now: {v.theme.dark}")
display(MinimalThemeApp(), Javascript('''google.colab.output.setIframeHeight(0, true, {maxHeight: 5000})'''))

print(f"[DEBUG] After display call completed.")
print(f"[--- CELL END ---]")

Specifications

  • Solara Version: Latest
  • Platform: Google Colab
  • Affected Python Versions:

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the provided Google Colab reproduction and compare solara.lab.theme.dark with ipyvuetify's v.theme.dark across repeated cell runs. Trace the theme state used when display(MinimalThemeApp(), ...) renders. Done means dark mode remains active on initial and subsequent runs, with the reported theme state and rendered components staying consistent.

Written by the indexing model from the issue text.

Assessment

Tech stack
jupyter, python
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.