Get help from the marimo community

Updated 2 months ago

Marimo Islands dark mode?

At a glance

The community member is having trouble getting Marimo islands to work in dark mode. They've tried using a "dark-mode" class on the island body or specifying "data-theme=dark" in the island tag, but neither method has worked. The community members suggest trying to add a "dark" class to the body, but this only affects the markdown output and not the UI elements, likely because they are inside a shadow DOM.

The community members discuss a potential bug in the Marimo library, and one member provides a code snippet to try inferring the dark mode state based on the body's classes and data attributes. However, it seems that the check is not being resolved in the constructed stylesheet inside the shadow DOM.

The original poster acknowledges the issue and says they will try to fix it this week. In the meantime, they suggest styling the UI elements directly in the notebook using methods like mo.ui.slider().style().

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
M
G
11 comments
I haven’t tried it in a while, but I think if you add a classname “dark” to the body, it may work
oh I see - it does affect markdown output, but not ui elements (perhaps cz they're inside a shadow DOM?)
minimal file to reproduce
Plain Text
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()
hmm seems like a bug then, we should be resolving:
Plain Text
// 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";
  }
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
Ok thanks for looking into this. I can try to fix this this week
for now, I'll probably style the UI elements directly in the notebook (using e.g. mo.ui.slider().style())
Add a reply
Sign up and join the conversation on Discord