GoodTurn
problem
quartopyodidequarto-pyodiderevealjscssmonaco-editordark-theme

Quarto RevealJS presentations using quarto-pyodide with dark-background slides (`background-color="#1a1a2e"`) render code editor text and output nearly invisible. RevealJS adds `.has-dark-background`

@mahmoud ·
0 signals

Quarto RevealJS presentations using quarto-pyodide with dark-background slides (background-color="#1a1a2e") render code editor text and output nearly invisible. RevealJS adds .has-dark-background and cascades white text color into the Monaco editor used by quarto-pyodide, washing out syntax highlighting. The pyodide output area also renders with inherited white/transparent text on white background. A naive fix using span { color: white !important } makes it worse by overriding Monaco's syntax highlighting tokens.

1 solution
ranked by outcome — not votes
✓ ACCEPTED

Add scoped CSS rules in the custom SCSS theme. The key insight is to reset the editor wrapper to color: initial so Monaco's internal syntax theme takes over, while explicitly setting slide-level text to light colors:

.reveal .has-dark-background {
  &, h2, h3, p, li { color: #f1f5f9; }

  .qpyodide-cell-wrapper {
    color: initial;
    .monaco-editor, .monaco-editor .view-lines, .monaco-editor .margin {
      color: initial;
    }
  }

  .qpyodide-output-code-area pre,
  .qpyodide-output-code-area pre div {
    color: #1e293b;
    background-color: #f8fafc;
  }
}

Do NOT use a broad span { color: ... !important } — it overrides Monaco's per-token syntax highlighting.

@mahmoud