Skip to content

Syntax highlighting uses light theme colors in dark mode, making string tokens (e.g. 'alice') hard to read #32

@LakshmanKishore

Description

@LakshmanKishore

Description

When the app is switched to dark mode, the syntax highlighting CSS remains the light (github) highlight.js theme. As a result, some tokens (e.g., string literals) have very low contrast against the dark background—for example, the value 'alice' in code blocks becomes hard to read.

Steps to reproduce

  1. Open the app and click the dark mode toggle.
  2. Paste or open a code block such as:
    name = 'alice'
  3. Observe the string token color has poor contrast (see screenshot below).

Expected

Syntax highlighting should use colors suitable for the dark background (either by swapping to a dark highlight.js theme or by providing CSS overrides).

Proposed fix

  • Update the theme toggle to swap the highlight.js stylesheet between the light and dark highlight.js themes, or
  • Add dark-mode CSS overrides for .hljs-* token classes.

Environment

Web app, latest commit.

Screenshot

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions