feat(dash): dark mode for the web dashboard - #888
Merged
Conversation
Collaborator
Author
|
@iamtoruk ready for your look whenever suits: implemented exactly the shape you signed off in #854 (token block reusing the Electron palette, |
iamtoruk
approved these changes
Aug 3, 2026
iamtoruk
left a comment
Member
There was a problem hiding this comment.
Reviewed on the merged tree; implements exactly the shape signed off on #854.
- Light mode is byte-identical: the change is purely additive, no :root token removed or renamed. Token parity confirmed (every :root color token has a .dark override; only --radius, a non-color, is untouched).
- Dark values reuse the Electron surface palette, so the web dashboard and the app stay consistent. Charts re-derived for dark contrast, and the invisible rgba hover cursor is now a themed token.
- Pre-paint bootstrap applies the theme before first paint (no flash), degrades to the OS media query when storage is disabled. The toggle initializes from that class, persists to the same key, and follows live OS theme flips only while no explicit choice is stored. Accessible (aria-label/title).
- dash build and tsc clean; contained to dash/, no new dependencies.
Good to merge.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #854
Implements exactly the shape proposed in my comment on the issue and signed off by @iamtoruk: the
.darktoken block reusing the Electron palette, the pre-paint bootstrap withprefers-color-schemefallback where the toggle overrides and wins, the header sun/moon toggle persisted to localStorage, and the stray hex values folded into tokens. Contained todash/, no new dependencies, per the approval.What it does
Dark mode for the web dashboard (
codeburn web), reusing the groundwork that was already half-laid:dash/src/index.css: a.dark { ... }block overriding the same token set as:root, pluscolor-scheme: dark. Values are lifted from the dark palette the repo already ships for the Electron surface (app/renderer/styles/plain.css:#0e1013canvas,#16181dpanel,#e8eaeeink,#282c33line, ok/warn/bad accents), so the two surfaces stay visually consistent. The previously dead@custom-variant darkdeclaration now has something to bind to. Chart colors (--chart-1..10) are re-derived for dark-background contrast. No:roottoken was removed or renamed; light mode renders byte-identically.dash/index.html: a tiny inline script ahead of the bundle applies.darkfromlocalStorage['codeburn-theme'], falling back toprefers-color-scheme, so there is no flash of light theme.localStorageaccess is wrapped in try/catch: in storage-disabled contexts (some embeds/webviews) the script degrades to the media query instead of dying before the class is applied.matchMedia('change')listener follows live OS theme flips.text-brand,accent-primary,bg-chart-5,text-chart-8), andCHART_COLORSusesvar(--chart-N)so Recharts follows the active theme. An adversarial review pass also caught non-hex literals a grep for#RRGGBBcannot see: the bar-chart hover cursor wasrgba(0,0,0,0.04)(invisible on#0e1013) and is now a themed--chart-hover-cursortoken with light and dark values.Not changed
No new dependencies. No
dash/package.json, Vite or Tailwind config changes. Nothing outsidedash/.Verification
cd dash && npm run buildclean;npx tsc --noEmitclean.grep -RInE '#[0-9a-fA-F]{3,8}\b' dash/src --include='*.tsx' --include='*.ts'returns zero lines outsideindex.css.:rootcolor token has a.darkoverride; light-mode values unchanged.One honest limitation: the build and type gates cannot verify runtime SVG painting, so the
var(--chart-N)values in Recharts fills rest on the same mechanism the file already used forvar(--color-chart-grid-stroke)onCartesianGrid, which renders correctly today.