Skip to content

Make the dashboard follow the light/dark color scheme - #13

Merged
elephantum merged 1 commit into
masterfrom
push-rwoxuqpwxpxu
Sep 10, 2026
Merged

elephantum merged 1 commit into
masterfrom
push-rwoxuqpwxpxu

Conversation

@elephantum

Copy link
Copy Markdown
Contributor

No description provided.

The dashboard page always rendered light, with every color a hardcoded
hex in inline styles, and React Flow v11 has no dark mode of its own
(colorMode is v12+).

Every color in static/index.html is now a CSS custom property defined
once as a light-dark(<light>, <dark>) pair under color-scheme: light
dark. Light values are the previous hexes, so light mode is unchanged.
Inline styles reference the tokens as "var(--...)" strings (including
GROUP_COLORS and SELECTED_EDGE_COLOR), so a prefers-color-scheme change
repaints in CSS alone: no matchMedia listener, no re-render, no dagre
relayout.

React Flow's stylesheet colors (edges, handles, controls, minimap,
attribution) are overridden in the same <style>. The minimap node fill,
mask, and background dots are SVG presentation attributes in v11, so
they're themed by CSS rules: MiniMap uses nodeClassName
(minimap-node--<group>) instead of nodeColor. Arrowheads get their
color via defaultMarkerColor="var(--edge)", which v11 applies as an
inline style where var() resolves.

Bumps the shared workspace version to 0.4.2 across every package and
the workspace root, including the exact-pinned tkati-core dependency.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@elephantum
elephantum merged commit 3de1538 into master Sep 10, 2026
10 of 12 checks passed
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