Make the dashboard follow the light/dark color scheme

CHANGELOG.md

@@ -4,6 +4,28 @@ One entry per jj change, keyed by its change identifier (stable across
 `jj describe`/`jj squash`/rebases — use `jj log -r <change-id>` to look one
 up). Newest first.
 
+## 0.4.2
+
+### rwoxuqpw — Make the dashboard follow the light/dark color scheme
+
+- Every color in `packages/tkati-dashboard/src/tkati_dashboard/static/index.html` is now a CSS
+  custom property defined once in the `<style>` block as a `light-dark(<light>, <dark>)` pair,
+  with `color-scheme: light dark` on `:root` (plus the matching `<meta>`). Light values are the
+  previous hardcoded hexes, so light mode is unchanged. Inline styles in the React code reference
+  the tokens as `"var(--…)"` strings — including `GROUP_COLORS`/`FALLBACK_COLORS` and
+  `SELECTED_EDGE_COLOR` — so a scheme change repaints in CSS alone: no `matchMedia` listener, no
+  re-render, and `layout()`'s memoized dagre run isn't touched.
+- React Flow v11 has no dark mode of its own (`colorMode` is v12+), so its stylesheet's
+  hardcoded colors (edge paths, handles, controls, minimap, attribution) are overridden in the
+  same `<style>`, which loads after the esm.sh `<link>`. The minimap node fill, minimap mask, and
+  background dots are SVG presentation attributes in v11, so they're themed with CSS rules rather
+  than props: `MiniMap` switched from `nodeColor` to `nodeClassName` (`minimap-node--<group>`,
+  with `group` added to each node's `data`).
+- Arrowheads: `<ReactFlow defaultMarkerColor="var(--edge)">` for plain edges. v11 applies marker
+  colors through the polyline's inline `style`, where `var()` resolves. The highlighted edge's
+  marker uses `SELECTED_EDGE_COLOR` (`var(--accent)`) the same way.
+- `light-dark()` requires Chrome 123, Firefox 120, or Safari 17.5 (all 2024).
+
 ## 0.4.1
 
 ### ulyqzzps — Break consumer lag down per partition in the dashboard inspector

packages/tkati-core/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "tkati-core"
-version = "0.4.1"
+version = "0.4.2"
 description = "Core abstractions for Kafka/ClickHouse streaming pipeline nodes"
 readme = "README.md"
 requires-python = ">=3.13"

packages/tkati-dashboard/CHANGELOG.md

@@ -1,3 +1,12 @@
+# 0.4.2
+
+* The page now follows the OS/browser light/dark preference (`prefers-color-scheme`) instead of
+  always rendering light, and switches live when the preference changes — no reload, no graph
+  relayout, selection kept. Light mode looks as before. In dark mode the canvas, inspector panel,
+  menus, nodes, and React Flow's own chrome (edges, arrowheads, handles, grid, controls, minimap)
+  all switch to dark variants, as do native controls like the auto-refresh dropdown. There's no
+  in-page toggle.
+
 # 0.4.1
 
 * The inspector panel's "Consumer lag" section now breaks each consumer group's lag down per

packages/tkati-dashboard/README.md

@@ -34,6 +34,10 @@ easy to trace at a glance — with its full connection/config/schema details, pl
 edge touching it and that edge's live consumer lag; drag the panel's left edge to
 resize it (the width is remembered across reloads).
 
+The page follows your OS/browser light/dark preference (`prefers-color-scheme`) and switches live
+when it changes — no reload, and the graph keeps its layout and selection. There's no in-page
+toggle; the browser's setting (or DevTools' "Emulate CSS prefers-color-scheme") decides.
+
 ### Try it with the bundled example
 
 [`examples/simple-pipeline`](examples/simple-pipeline) is the smallest interesting dataflow: two

packages/tkati-dashboard/pyproject.toml

@@ -1,11 +1,11 @@
 [project]
 name = "tkati-dashboard"
-version = "0.4.1"
+version = "0.4.2"
 description = "Local web dashboard that renders a serialized tkati dataflow directory as a graph"
 readme = "README.md"
 requires-python = ">=3.13"
 dependencies = [
-    "tkati-core==0.4.1",
+    "tkati-core==0.4.2",
     "fastapi>=0.115.0",
     "uvicorn>=0.34.0",
     "confluent-kafka>=2.11.0",