Add light/system/dark theme toggle by Varnasr · Pull Request #4 · Varnasr/dev-case-studies

Varnasr · 2026-04-07T06:50:27Z

Adds the canonical 3-button ImpactMojo theme selector (system / light / dark, defaulting to system) to FieldCases.

What

Inline <head> no-flash bootstrap that resolves the saved theme before paint and sets data-theme on <html>.
Theme selector markup (3 SVG buttons matching impactmojo.in) injected into the site-header nav on both index.html and study.html.
Inline <body> script that wires up clicks, persists picks to localStorage[imx_theme], clears the key when system is chosen, and follows OS appearance changes when no explicit pick is set.
[data-theme="dark"] block in css/style.css that re-declares only the colour variables (the existing CSS already references var(--bg), var(--text), etc. throughout, so the page flips automatically), plus .theme-selector / .theme-btn styles.

Uses the same imx_theme localStorage key as the rest of the ImpactMojo platform, so dark/light state is shared with the sister DevDiscourses site (same varnasr.github.io origin).
Some elements may still use raw hex colours instead of variables — contrast touch-ups can land in a follow-up PR if needed.

Varnasr added 3 commits April 7, 2026 12:20

Add light/system/dark theme toggle to index

25188f5

Add light/system/dark theme toggle to study page

44f5264

Add dark theme variables and theme-selector styles

84a4f8f

Varnasr merged commit 09ddf13 into main Apr 7, 2026

Varnasr deleted the claude/add-theme-toggle branch April 7, 2026 06:50