fix(motifs): readable motif graph in dark mode (#5) #48

Merged

rbrooks merged 1 commit from fix/v6.1-graph-dark-mode into main

2026-06-25 23:19:06 +00:00

rbrooks commented

2026-06-25 23:08:16 +00:00

Owner

Closes #5 (v6.1).

Problem

The motif graph (MotifGraph, ReactFlow) was illegible in dark mode: node backgrounds/borders and the background dots were hardcoded light values, and ReactFlow's own chrome (Controls, MiniMap, edges, attribution) had no dark theme, so it rendered as bright elements on the dark page.

Fix

Set ReactFlow's colorMode from the app theme — this applies the library's built-in dark styling to Controls, MiniMap, edges, and the canvas.
Theme the node background/color/border and the Background dot color for dark.
Add a small reactive useIsDarkMode() hook that tracks the dark class on <html> via a MutationObserver. ReactFlow's colorMode prop needs a resolved boolean — it can't read Tailwind's dark: classes — and the hook updates live when the theme is toggled.

Test

useIsDarkMode.test.ts — mount state (class absent/present) and live reaction to toggling the dark class. (The graph render itself isn't unit-tested — ReactFlow needs real layout measurement that jsdom doesn't provide.)

Verification

tsc + vite build clean ✅ · full app suite green (48 tests) ✅
⚠️ Worth a visual check after deploy: open a motif graph and toggle dark mode — nodes, edges, controls, and minimap should all be legible. The unit test covers the theme-detection logic but not the rendered pixels.

Second of three v6.1 issues (after #47 for #3). Export-all-motifs (#4) next.

🤖 Generated with Claude Code

Closes #5 (v6.1). ## Problem The motif graph (`MotifGraph`, ReactFlow) was illegible in dark mode: node backgrounds/borders and the background dots were hardcoded light values, and ReactFlow's own chrome (Controls, MiniMap, edges, attribution) had no dark theme, so it rendered as bright elements on the dark page. ## Fix - Set ReactFlow's **`colorMode`** from the app theme — this applies the library's built-in dark styling to Controls, MiniMap, edges, and the canvas. - Theme the node `background`/`color`/`border` and the `Background` dot color for dark. - Add a small reactive **`useIsDarkMode()`** hook that tracks the `dark` class on `<html>` via a `MutationObserver`. ReactFlow's `colorMode` prop needs a resolved boolean — it can't read Tailwind's `dark:` classes — and the hook updates live when the theme is toggled. ## Test `useIsDarkMode.test.ts` — mount state (class absent/present) and live reaction to toggling the `dark` class. (The graph render itself isn't unit-tested — ReactFlow needs real layout measurement that jsdom doesn't provide.) ## Verification - `tsc` + `vite build` clean ✅ · full app suite green (48 tests) ✅ - ⚠️ **Worth a visual check after deploy**: open a motif graph and toggle dark mode — nodes, edges, controls, and minimap should all be legible. The unit test covers the theme-detection logic but not the rendered pixels. Second of three v6.1 issues (after #47 for #3). Export-all-motifs (#4) next. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

rbrooks added 1 commit

2026-06-25 23:08:16 +00:00

fix(motifs): make the motif graph readable in dark mode (#5 )

CI / API — typecheck & tests (push) Successful in 2m1s

Details

CI / App — typecheck, test & build (push) Successful in 1m15s

Details

CI / App — typecheck, test & build (pull_request) Successful in 1m17s

Details

CI / API — typecheck & tests (pull_request) Successful in 2m6s

Details

b50538a6cc

The ReactFlow graph rendered with hardcoded light node backgrounds/borders
and light background dots, and its chrome (Controls, MiniMap, edges) had no
dark theme — illegible on a dark page.

- drive ReactFlow's `colorMode` from the app theme so the built-in dark
  styling applies to controls/minimap/edges/attribution
- theme node background/text/border and the Background dot color for dark
- add a reactive useIsDarkMode() hook (tracks the `dark` class on <html> via
  a MutationObserver) since ReactFlow props can't read Tailwind dark: classes

Adds a useIsDarkMode test (mount state + live class-toggle reaction).

Closes #5

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

rbrooks referenced this pull request

2026-06-25 23:12:29 +00:00

feat(export): export all motifs as one combined Markdown document (#4) #49

rbrooks merged commit 4ac41cad5c into main

2026-06-25 23:19:06 +00:00

rbrooks deleted branch fix/v6.1-graph-dark-mode

2026-06-25 23:19:06 +00:00

rbrooks referenced this pull request from a commit

2026-06-25 23:19:09 +00:00

Merge pull request 'fix(motifs): readable motif graph in dark mode (#5)' (#48) from fix/v6.1-graph-dark-mode into main