Dark Mode does not work in Google Colab
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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