Skip to content
GoodTurn
Sign in Sign up
problem
quarto pyodide quarto-pyodide revealjs css monaco-editor dark-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 ·
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