Add dark/light mode toggle with adaptive badge colors

Implement theme switching via sun/moon toggle in nav bar. Dark remains the default; light mode overrides surface, text, border, accent, and status color tokens. Preference persists in localStorage and falls back to prefers-color-scheme. An inline script in index.html prevents flash of wrong theme on load. Define a Tailwind v4 @custom-variant for light mode and update all badge components (encounter method, rule, condition) to use light:bg-{color}-100 / light:text-{color}-700 for readable contrast on light surfaces. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-20 19:45:12 +01:00
parent cb35bf161e
commit a381633413
8 changed files with 224 additions and 22 deletions
--- a/.beans/nuzlocke-tracker-dpw7--modernize-website-design-and-look-and-feel.md
+++ b/.beans/nuzlocke-tracker-dpw7--modernize-website-design-and-look-and-feel.md
@@ -91,7 +91,7 @@ Self-host **Geist** (or Inter/JetBrains Mono pairing):
 - [x] Update all page-level backgrounds and containers
 - [x] Update modal styles (EncounterModal, StatusChangeModal, etc.)
 - [x] Update badge/indicator styles (TypeBadge, RuleBadges, EncounterMethodBadge)
- [ ] Add dark/light mode toggle to nav
+- [x] Add dark/light mode toggle to nav
 - [x] Polish hover states and transitions across all interactive elements
 - [ ] Add automated Playwright accessibility and mobile layout tests
 - [ ] Verify accessibility (contrast ratios, focus indicators)
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -17,6 +17,15 @@
    <link rel="manifest" href="/site.webmanifest" />
  </head>
  <body>
+    <script>
+      (function() {
+        var t = localStorage.getItem('ant-theme');
+        if (t === 'light' || (!t && window.matchMedia('(prefers-color-scheme: light)').matches)) {
+          document.documentElement.setAttribute('data-theme', 'light');
+          document.documentElement.style.colorScheme = 'light';
+        }
+      })();
+    </script>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
--- a/frontend/src/components/ConditionBadge.tsx
+++ b/frontend/src/components/ConditionBadge.tsx
@@ -1,8 +1,20 @@
 const CONDITION_CONFIG: Record<string, { label: string; color: string }> = {
-  'Mega Evolution': { label: 'Mega', color: 'bg-fuchsia-900/40 text-fuchsia-300' },
-  Gigantamax: { label: 'G-Max', color: 'bg-red-900/40 text-red-300' },
-  Dynamax: { label: 'D-Max', color: 'bg-rose-900/40 text-rose-300' },
-  Terastallize: { label: 'Tera', color: 'bg-teal-900/40 text-teal-300' },
+  'Mega Evolution': {
+    label: 'Mega',
+    color: 'bg-fuchsia-900/40 text-fuchsia-300 light:bg-fuchsia-100 light:text-fuchsia-700',
+  },
+  Gigantamax: {
+    label: 'G-Max',
+    color: 'bg-red-900/40 text-red-300 light:bg-red-100 light:text-red-700',
+  },
+  Dynamax: {
+    label: 'D-Max',
+    color: 'bg-rose-900/40 text-rose-300 light:bg-rose-100 light:text-rose-700',
+  },
+  Terastallize: {
+    label: 'Tera',
+    color: 'bg-teal-900/40 text-teal-300 light:bg-teal-100 light:text-teal-700',
+  },
 }

 export function ConditionBadge({
--- a/frontend/src/components/EncounterMethodBadge.tsx
+++ b/frontend/src/components/EncounterMethodBadge.tsx
@@ -1,17 +1,56 @@
 export const METHOD_CONFIG: Record<string, { label: string; color: string }> = {
-  starter: { label: 'Starter', color: 'bg-yellow-900/40 text-yellow-300' },
-  gift: { label: 'Gift', color: 'bg-pink-900/40 text-pink-300' },
-  fossil: { label: 'Fossil', color: 'bg-amber-900/40 text-amber-300' },
-  trade: { label: 'Trade', color: 'bg-emerald-900/40 text-emerald-300' },
-  walk: { label: 'Grass', color: 'bg-green-900/40 text-green-300' },
-  headbutt: { label: 'Headbutt', color: 'bg-lime-900/40 text-lime-300' },
-  surf: { label: 'Surfing', color: 'bg-blue-900/40 text-blue-300' },
-  'rock-smash': { label: 'Rock Smash', color: 'bg-orange-900/40 text-orange-300' },
-  'old-rod': { label: 'Old Rod', color: 'bg-cyan-900/40 text-cyan-300' },
-  'good-rod': { label: 'Good Rod', color: 'bg-sky-900/40 text-sky-300' },
-  'super-rod': { label: 'Super Rod', color: 'bg-indigo-900/40 text-indigo-300' },
-  horde: { label: 'Horde', color: 'bg-rose-900/40 text-rose-300' },
-  sos: { label: 'SOS', color: 'bg-violet-900/40 text-violet-300' },
+  starter: {
+    label: 'Starter',
+    color: 'bg-yellow-900/40 text-yellow-300 light:bg-yellow-100 light:text-yellow-800',
+  },
+  gift: {
+    label: 'Gift',
+    color: 'bg-pink-900/40 text-pink-300 light:bg-pink-100 light:text-pink-700',
+  },
+  fossil: {
+    label: 'Fossil',
+    color: 'bg-amber-900/40 text-amber-300 light:bg-amber-100 light:text-amber-800',
+  },
+  trade: {
+    label: 'Trade',
+    color: 'bg-emerald-900/40 text-emerald-300 light:bg-emerald-100 light:text-emerald-700',
+  },
+  walk: {
+    label: 'Grass',
+    color: 'bg-green-900/40 text-green-300 light:bg-green-100 light:text-green-700',
+  },
+  headbutt: {
+    label: 'Headbutt',
+    color: 'bg-lime-900/40 text-lime-300 light:bg-lime-100 light:text-lime-800',
+  },
+  surf: {
+    label: 'Surfing',
+    color: 'bg-blue-900/40 text-blue-300 light:bg-blue-100 light:text-blue-700',
+  },
+  'rock-smash': {
+    label: 'Rock Smash',
+    color: 'bg-orange-900/40 text-orange-300 light:bg-orange-100 light:text-orange-800',
+  },
+  'old-rod': {
+    label: 'Old Rod',
+    color: 'bg-cyan-900/40 text-cyan-300 light:bg-cyan-100 light:text-cyan-700',
+  },
+  'good-rod': {
+    label: 'Good Rod',
+    color: 'bg-sky-900/40 text-sky-300 light:bg-sky-100 light:text-sky-700',
+  },
+  'super-rod': {
+    label: 'Super Rod',
+    color: 'bg-indigo-900/40 text-indigo-300 light:bg-indigo-100 light:text-indigo-700',
+  },
+  horde: {
+    label: 'Horde',
+    color: 'bg-rose-900/40 text-rose-300 light:bg-rose-100 light:text-rose-700',
+  },
+  sos: {
+    label: 'SOS',
+    color: 'bg-violet-900/40 text-violet-300 light:bg-violet-100 light:text-violet-700',
+  },
 }

 /** Display order for encounter method groups */
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { Link, Outlet, useLocation } from 'react-router-dom'
+import { useTheme } from '../hooks/useTheme'

 const navLinks = [
  { to: '/runs/new', label: 'New Run' },
@@ -37,6 +38,39 @@ function NavLink({
  )
 }

+function ThemeToggle() {
+  const { theme, toggle } = useTheme()
+
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      className="p-2 rounded-md text-text-secondary hover:text-text-primary hover:bg-surface-3 transition-colors"
+      aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+    >
+      {theme === 'dark' ? (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 3v1m0 16v1m8.66-13.66l-.71.71M4.05 19.95l-.71.71M21 12h-1M4 12H3m16.66 7.66l-.71-.71M4.05 4.05l-.71-.71M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+          />
+        </svg>
+      ) : (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+          />
+        </svg>
+      )}
+    </button>
+  )
+}
+
 export function Layout() {
  const [menuOpen, setMenuOpen] = useState(false)
  const location = useLocation()
@@ -68,9 +102,11 @@ export function Layout() {
                  {link.label}
                </NavLink>
              ))}
+              <ThemeToggle />
            </div>
            {/* Mobile hamburger */}
-            <div className="flex items-center sm:hidden">
+            <div className="flex items-center gap-1 sm:hidden">
+              <ThemeToggle />
              <button
                type="button"
                onClick={() => setMenuOpen(!menuOpen)}
--- a/frontend/src/components/RuleBadges.tsx
+++ b/frontend/src/components/RuleBadges.tsx
@@ -20,10 +20,10 @@ export function RuleBadges({ rules }: RuleBadgesProps) {
          title={def.description}
          className={`px-2 py-0.5 rounded-full text-xs font-medium ${
            def.category === 'core'
-              ? 'bg-blue-900/40 text-blue-300'
+              ? 'bg-blue-900/40 text-blue-300 light:bg-blue-100 light:text-blue-700'
              : def.category === 'completion'
-                ? 'bg-green-900/40 text-green-300'
-                : 'bg-amber-900/40 text-amber-300'
+                ? 'bg-green-900/40 text-green-300 light:bg-green-100 light:text-green-700'
+                : 'bg-amber-900/40 text-amber-300 light:bg-amber-100 light:text-amber-800'
          }`}
        >
          {def.name}
--- a/frontend/src/hooks/useTheme.ts
+++ b/frontend/src/hooks/useTheme.ts
@@ -0,0 +1,63 @@
+import { useCallback, useSyncExternalStore } from 'react'
+
+type Theme = 'dark' | 'light'
+
+const STORAGE_KEY = 'ant-theme'
+
+function getSystemTheme(): Theme {
+  return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
+}
+
+function getStoredTheme(): Theme | null {
+  const stored = localStorage.getItem(STORAGE_KEY)
+  if (stored === 'dark' || stored === 'light') return stored
+  return null
+}
+
+function applyTheme(theme: Theme) {
+  if (theme === 'light') {
+    document.documentElement.setAttribute('data-theme', 'light')
+  } else {
+    document.documentElement.removeAttribute('data-theme')
+  }
+  document.documentElement.style.colorScheme = theme
+}
+
+const listeners = new Set<() => void>()
+let currentTheme: Theme = getStoredTheme() ?? getSystemTheme()
+
+applyTheme(currentTheme)
+
+const mediaQuery = window.matchMedia('(prefers-color-scheme: light)')
+mediaQuery.addEventListener('change', () => {
+  if (!getStoredTheme()) {
+    currentTheme = getSystemTheme()
+    applyTheme(currentTheme)
+    for (const listener of listeners) listener()
+  }
+})
+
+function subscribe(listener: () => void) {
+  listeners.add(listener)
+  return () => {
+    listeners.delete(listener)
+  }
+}
+
+function getSnapshot(): Theme {
+  return currentTheme
+}
+
+export function useTheme() {
+  const theme = useSyncExternalStore(subscribe, getSnapshot)
+
+  const toggle = useCallback(() => {
+    const next: Theme = currentTheme === 'dark' ? 'light' : 'dark'
+    currentTheme = next
+    localStorage.setItem(STORAGE_KEY, next)
+    applyTheme(next)
+    for (const listener of listeners) listener()
+  }, [])
+
+  return { theme, toggle } as const
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -68,6 +68,49 @@
  --color-status-failed-bg: rgba(248, 81, 73, 0.15);
 }

+@custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));
+
+/* ── Light mode overrides ─────────────────────────────────────── */
+
+html[data-theme='light'] {
+  color-scheme: light;
+
+  /* Surfaces */
+  --color-surface-0: #ffffff;
+  --color-surface-1: #f6f8fa;
+  --color-surface-2: #eef1f4;
+  --color-surface-3: #d8dee4;
+  --color-surface-4: #ced5dc;
+
+  /* Accent (darkened for text contrast on light surfaces) */
+  --color-accent-200: #245f7e;
+  --color-accent-300: #1a5068;
+  --color-accent-400: #2d6a89;
+
+  /* Text */
+  --color-text-primary: #1f2328;
+  --color-text-secondary: #656d76;
+  --color-text-tertiary: #8b949e;
+  --color-text-link: #1a5068;
+
+  /* Borders */
+  --color-border-default: rgba(0, 0, 0, 0.15);
+  --color-border-muted: rgba(0, 0, 0, 0.08);
+  --color-border-accent: rgba(57, 94, 115, 0.35);
+
+  /* Status (adjusted for light surfaces) */
+  --color-status-alive: #1a7f37;
+  --color-status-alive-bg: rgba(26, 127, 55, 0.1);
+  --color-status-dead: #cf222e;
+  --color-status-dead-bg: rgba(207, 34, 46, 0.1);
+  --color-status-active: #1a7f37;
+  --color-status-active-bg: rgba(26, 127, 55, 0.1);
+  --color-status-completed: #0969da;
+  --color-status-completed-bg: rgba(9, 105, 218, 0.1);
+  --color-status-failed: #cf222e;
+  --color-status-failed-bg: rgba(207, 34, 46, 0.1);
+}
+
 /* ── Base layer ────────────────────────────────────────────────── */

@layer base {