Skip to article frontmatterSkip to article content
Site not loading correctly?

This may be due to an incorrect BASE_URL configuration. See the MyST Documentation for reference.

Styling

The browser bridge marks every mounted output with .marimo-island-host and data-marimo-host="jupyter-book". Set the public island tokens in the stylesheet configured by your Jupyter Book theme:

.marimo-island-host[data-marimo-host="jupyter-book"] {
  --marimo-island-background: var(--myst-color-background);
  --marimo-island-foreground: var(--myst-color-text);
  --marimo-island-surface: var(--myst-color-background);
  --marimo-island-muted-surface: var(--myst-color-background-muted);
  --marimo-island-muted-foreground: var(--myst-color-text-muted);
  --marimo-island-border: var(--myst-color-border);
  --marimo-island-accent: var(--myst-color-primary);
  --marimo-island-code-background: var(--myst-color-code-background);
  --marimo-island-margin-block: 1rem;
}

Available tokens:

TokenControls
--marimo-island-backgroundPage-level island background
--marimo-island-foregroundPrimary text
--marimo-island-surfaceInputs and raised surfaces
--marimo-island-muted-surfaceMuted containers
--marimo-island-muted-foregroundSecondary text
--marimo-island-borderBorders
--marimo-island-accentLinks and active controls
--marimo-island-accent-foregroundText on accent surfaces
--marimo-island-focus-ringKeyboard focus
--marimo-island-code-backgroundCode blocks
--marimo-island-code-foregroundCode text
--marimo-island-error-backgroundError surfaces
--marimo-island-error-borderError borders
--marimo-island-error-foregroundError text
--marimo-island-error-accentError summaries
--marimo-island-radiusIsland corners
--marimo-island-margin-blockVertical spacing

Theme mode follows the active book theme. Token overrides cascade into the island host and the bridge propagates the resolved theme to marimo shadow roots.