Marimo Islands dark mode?

Having trouble getting marimo islands to work in dark mode. The src code in useTheme.ts suggests the way to achieve this is using a "dark-mode" class in the island body, or specifying data-theme=dark in the island tag, but I haven't had any luck with either of those methods.. Any other alternatives? styling with global css seems futile too, since it's inside a shadow DOM
8 Replies
Myles Scolnick
Myles Scolnick4mo ago
I haven’t tried it in a while, but I think if you add a classname “dark” to the body, it may work
Georgios Varnavides
oh I see - it does affect markdown output, but not ui elements (perhaps cz they're inside a shadow DOM?)
Georgios Varnavides
minimal file to reproduce
import marimo

__generated_with = "0.7.21-dev18"
app = marimo.App()


@app.cell
def __():
import marimo as mo
return mo,


@app.cell
def __(mo):
mo.md("Hello")
return


@app.cell
def __(mo):
mo.ui.slider(start=0,stop=10,label="slider",show_value=True)
return


@app.cell
def __():
return


if __name__ == "__main__":
app.run()
import marimo

__generated_with = "0.7.21-dev18"
app = marimo.App()


@app.cell
def __():
import marimo as mo
return mo,


@app.cell
def __(mo):
mo.md("Hello")
return


@app.cell
def __(mo):
mo.ui.slider(start=0,stop=10,label="slider",show_value=True)
return


@app.cell
def __():
return


if __name__ == "__main__":
app.run()
Myles Scolnick
Myles Scolnick4mo ago
hmm seems like a bug then, we should be resolving:
// If it is islands, try a few ways to infer if it is dark mode.
if (isIslands()) {
// If it has a dark mode class on the body, use dark mode.
if (
document.body.classList.contains("dark-mode") ||
document.body.classList.contains("dark")
) {
return "dark";
}
// If it has data-theme=dark or data-mode=dark on the body, use dark mode.
if (
document.body.dataset.theme === "dark" ||
document.body.dataset.mode === "dark" ||
document.body.dataset.vscodeThemeKind === "vscode-dark" ||
document.body.dataset.vscodeThemeKind === "vscode-high-contrast"
) {
return "dark";
}
// We don't want to infer from the system theme,
// since the island consumer may not support dark mode.
return "light";
}
// If it is islands, try a few ways to infer if it is dark mode.
if (isIslands()) {
// If it has a dark mode class on the body, use dark mode.
if (
document.body.classList.contains("dark-mode") ||
document.body.classList.contains("dark")
) {
return "dark";
}
// If it has data-theme=dark or data-mode=dark on the body, use dark mode.
if (
document.body.dataset.theme === "dark" ||
document.body.dataset.mode === "dark" ||
document.body.dataset.vscodeThemeKind === "vscode-dark" ||
document.body.dataset.vscodeThemeKind === "vscode-high-contrast"
) {
return "dark";
}
// We don't want to infer from the system theme,
// since the island consumer may not support dark mode.
return "light";
}
Georgios Varnavides
inspecting the elements, suggests that right before the #shadow-root the properties are set by the external stylesheet but inside the #shadow-root those get overwritten by a constructed stylesheet (presumably you're using something like CSSStyleSheet to inherit styles into the shadow DOM?) seems like that check isn't being resolved in the second constructed stylesheet
Myles Scolnick
Myles Scolnick4mo ago
Ok thanks for looking into this. I can try to fix this this week
Georgios Varnavides
thanks! for now, I'll probably style the UI elements directly in the notebook (using e.g. mo.ui.slider().style())