Georgios Varnavides•3mo ago

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•3mo 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 VarnavidesOP•3mo ago

oh I see - it does affect markdown output, but not ui elements (perhaps cz they're inside a shadow DOM?)

Georgios VarnavidesOP•3mo ago

Georgios VarnavidesOP•3mo ago

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•3mo 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 VarnavidesOP•3mo ago

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•3mo ago

Ok thanks for looking into this. I can try to fix this this week

Georgios VarnavidesOP•3mo ago

thanks! for now, I'll probably style the UI elements directly in the notebook (using e.g. mo.ui.slider().style())