Skip to content

Code block background renders dark in light mode (cell_input) #372

@mmcky

Description

@mmcky

Description

Code blocks (notebook cell inputs) are rendering with a dark gray background in what appears to be a light-mode context. Screenshots show the cell_input area using the dark theme palette (dark gray background with blue left border and green/teal syntax highlighting) while the surrounding page content is rendering in light mode.

Screenshots

Two pages affected:

  • A page with Boolean value examples (primitive data types section)
  • A page with a matplotlib/numpy code example (Version 1 section)

In both cases, the div.cell div.cell_input block has a dark gray background (#555 or similar) with coloured syntax highlighting, inconsistent with the light-mode page background.

Possible causes

  1. Dark mode class applied early / FOUC in reverse — the early inline script that applies the dark mode class (added in v0.18.0, feat: comprehensive dark theme overhaul #365) may be applying dark-theme on initial load even when the user preference is light, and the cell input background is not being correctly reverted when switching back to light mode.

  2. CSS specificity conflict_dark-theme.scss sets div.cell div.cell_input { background-color: var(--qe-dark-code-bg); } and this may be winning over the light-theme default in some render paths.

  3. Pydata Sphinx Theme default — the underlying pydata_sphinx_theme may be setting a dark background on .highlight or cell_input that isn't being overridden in the light theme path.

  4. background: none not reaching cell inputs_content.scss sets div.highlight { background: none; } but cell_input wraps the highlight div, so this rule may not be sufficient to clear the background.

Steps to reproduce

View any notebook page on the quantecon-book-theme branch build of lecture-python-programming.myst (or the Netlify preview for PR #371) with the browser/OS set to light mode.

Expected behaviour

Code cell input blocks should have a light (or transparent) background in light mode, consistent with the rest of the page.

Related

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions