Skip to content

Fix code highlighting in system-dark theme mode - #29

Merged
pufit merged 1 commit into
mainfrom
pufit/fix-theme-system-mode
Apr 6, 2026
Merged

pufit merged 1 commit into
mainfrom
pufit/fix-theme-system-mode

Conversation

@pufit

@pufit pufit commented Apr 6, 2026 •

Copy link
Copy Markdown
Member

Summary

  • Fix hljs light override leaking into system-dark mode — the :root:not([data-theme="dark"]) selector matched unconditionally when no data-theme attribute was set, forcing near-black text on dark backgrounds
  • Add color-scheme CSS property to all three theme blocks so native UI elements (scrollbars, form controls, selection) render correctly
  • Introduce --theme-link variable (#818cf8 dark / #4f46e5 light) so markdown link color adapts to the active theme

Test plan

  • Set theme to "System", OS to dark → verify code blocks have light text on dark background
  • Set theme to "System", OS to light → verify code blocks have dark text on light background
  • Set theme to explicit "Light" / "Dark" → verify code highlighting matches
  • Check scrollbar and form control appearance adapts to theme
  • Check markdown link color contrast in both themes

Generated by Nerve

The hljs light override selector `:root:not([data-theme="dark"])` matched
unconditionally in system mode (no data-theme attribute), forcing dark text
on dark backgrounds. Remove the ungated selector — the media-query-gated
copy already handles system-light correctly.

Also: add `color-scheme` CSS property for native UI elements, and introduce
`--theme-link` variable so markdown link color adapts to the active theme.
@pufit
pufit merged commit 6872ad4 into main Apr 6, 2026
@pufit
pufit deleted the pufit/fix-theme-system-mode branch April 6, 2026 21:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant