Add theme toggle: dark / grey / light screen modes#3
Open
warfield2016 wants to merge 4 commits into
Open
Conversation
A new sixth tab that visualizes all 30 concepts across the 5 CCA-F domains
as an interactive radial graph, with cross-domain connection arcs showing
how concepts relate across exam scenarios.
Click any concept to open a detail panel with six sections per concept:
- Why it matters (production impact, 1-2 sentences)
- Used in (concrete production apps)
- Connects to (clickable links to related concepts across domains)
- Learn more (curated Skilljar + docs links)
- Watch for (common failure modes and anti-patterns)
- Exam signals (distractor-trap phrases that point to this concept)
Implementation notes:
- Pure SVG with polar-coordinate layout (no d3, keeps zero external UI
deps per project convention)
- 3-ring design: root at center, 5 domain nodes sized by weight, 30 concept
nodes clustered by domain with angular spread proportional to domain size
- 47 cross-domain arcs rendered as quadratic Bezier curves, highlighted on
hover/selection, dimmed otherwise
- Brighter label colors for D1 (#e74c3c) and D5 (#a569bd) to fix WCAG AA
contrast failures against the #0c0c10 background
- Detail panel expands below the SVG (no modal overlay), closes on Escape
- Mastery toggle persisted to localStorage with bm-{id} key format
- Keyboard accessible (Tab focus, Enter opens panel, Esc closes)
- Renders cleanly at both mobile (375px) and desktop widths
A button in the header cycles through three themes. Selection persists in localStorage (key: cca-theme) and auto-restores on next visit. Themes: - dark (default): current #0c0c10 root, matches prior design - grey: mid-tone #1f2026 root for reduced eye strain - light: #fafafa root with dark text, for daytime / bright environments Implementation: CSS custom properties injected into the root container via inline style. Components reference colors through var(--bg-root), var(--text-primary), etc. Accent colors (domain reds, oranges, greens) remain fixed across themes to preserve visual identity and the existing WCAG contrast work. Minimal refactor: replaced ~60 hardcoded hex literals with CSS variable references across the whole component tree. Kept ~4 literal colors where they're intentionally contrast on colored fills (domain badges), since those need to stay dark regardless of theme.
…room - maxWidth 520 → 860 so the app fills a laptop screen instead of looking like a phone column - Base font sizes bumped +2px across the board (9→11, 10→12, 11→13, 13→14, 14→15) — keeps the visual hierarchy intact while making everything readable at arm's length - Card padding widened (12px → 16-20px), border radius increased - Header, tabs, and progress bar scaled proportionally - Theme toggle button and footer spacing adjusted for the wider layout - Day cards use themed backgrounds instead of hardcoded dark hex values
warfield2016
force-pushed
the
feat/theme-toggle
branch
from
2e49199 to
3e2cc3c
Compare
warfield2016
force-pushed
the
feat/brain-map
branch
from
d1f7b78 to
19d6e33
Compare
- GitHub Actions workflow builds study plan (root) and quiz engine (quiz/), merges outputs into a single dist, deploys via Pages - Vite base paths set to /cca-study-plan/ and /cca-study-plan/quiz/ so assets resolve correctly on GitHub Pages After merging to main, enable Pages in repo Settings → Pages → Source: GitHub Actions. Study plan: https://warfield2016.github.io/cca-study-plan/ Quiz engine: https://warfield2016.github.io/cca-study-plan/quiz/
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
1 participant
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.
Summary
Depends on PR #1 (feat/brain-map) — base branch set accordingly.
Test plan