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/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}