pokemon/nuzlocke-tracker
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add dark/light mode toggle with adaptive badge colors

Browse Source 
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>
This commit is contained in:
Julian Tabel
2026-02-20 19:45:12 +01:00
parent cb35bf161e
commit a381633413
8 changed files with 224 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.beans/nuzlocke-tracker-dpw7--modernize-website-design-and-look-and-feel.md
View File

@@ -91,7 +91,7 @@ Self-host **Geist** (or Inter/JetBrains Mono pairing):
- [x] Update all page-level backgrounds and containers - [x] Update all page-level backgrounds and containers
- [x] Update modal styles (EncounterModal, StatusChangeModal, etc.) - [x] Update modal styles (EncounterModal, StatusChangeModal, etc.)
- [x] Update badge/indicator styles (TypeBadge, RuleBadges, EncounterMethodBadge) - [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 - [x] Polish hover states and transitions across all interactive elements
- [ ] Add automated Playwright accessibility and mobile layout tests - [ ] Add automated Playwright accessibility and mobile layout tests
- [ ] Verify accessibility (contrast ratios, focus indicators) - [ ] Verify accessibility (contrast ratios, focus indicators)

9
frontend/index.html
View File

@@ -17,6 +17,15 @@
<link rel="manifest" href="/site.webmanifest" /> <link rel="manifest" href="/site.webmanifest" />
</head> </head>
<body> <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> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>

20
frontend/src/components/ConditionBadge.tsx
View File

@@ -1,8 +1,20 @@
const CONDITION_CONFIG: Record<string, { label: string; color: string }> = { const CONDITION_CONFIG: Record<string, { label: string; color: string }> = {
'Mega Evolution': { label: 'Mega', color: 'bg-fuchsia-900/40 text-fuchsia-300' }, 'Mega Evolution': {
Gigantamax: { label: 'G-Max', color: 'bg-red-900/40 text-red-300' }, label: 'Mega',
Dynamax: { label: 'D-Max', color: 'bg-rose-900/40 text-rose-300' }, color: 'bg-fuchsia-900/40 text-fuchsia-300 light:bg-fuchsia-100 light:text-fuchsia-700',
Terastallize: { label: 'Tera', color: 'bg-teal-900/40 text-teal-300' }, },
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({ export function ConditionBadge({

65
frontend/src/components/EncounterMethodBadge.tsx
View File

@@ -1,17 +1,56 @@
export const METHOD_CONFIG: Record<string, { label: string; color: string }> = { export const METHOD_CONFIG: Record<string, { label: string; color: string }> = {
starter: { label: 'Starter', color: 'bg-yellow-900/40 text-yellow-300' }, starter: {
gift: { label: 'Gift', color: 'bg-pink-900/40 text-pink-300' }, label: 'Starter',
fossil: { label: 'Fossil', color: 'bg-amber-900/40 text-amber-300' }, color: 'bg-yellow-900/40 text-yellow-300 light:bg-yellow-100 light:text-yellow-800',
trade: { label: 'Trade', color: 'bg-emerald-900/40 text-emerald-300' }, },
walk: { label: 'Grass', color: 'bg-green-900/40 text-green-300' }, gift: {
headbutt: { label: 'Headbutt', color: 'bg-lime-900/40 text-lime-300' }, label: 'Gift',
surf: { label: 'Surfing', color: 'bg-blue-900/40 text-blue-300' }, color: 'bg-pink-900/40 text-pink-300 light:bg-pink-100 light:text-pink-700',
'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' }, fossil: {
'good-rod': { label: 'Good Rod', color: 'bg-sky-900/40 text-sky-300' }, label: 'Fossil',
'super-rod': { label: 'Super Rod', color: 'bg-indigo-900/40 text-indigo-300' }, color: 'bg-amber-900/40 text-amber-300 light:bg-amber-100 light:text-amber-800',
horde: { label: 'Horde', color: 'bg-rose-900/40 text-rose-300' }, },
sos: { label: 'SOS', color: 'bg-violet-900/40 text-violet-300' }, 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 */ /** Display order for encounter method groups */

38
frontend/src/components/Layout.tsx
View File

@@ -1,5 +1,6 @@
import { useState } from 'react' import { useState } from 'react'
import { Link, Outlet, useLocation } from 'react-router-dom' import { Link, Outlet, useLocation } from 'react-router-dom'
import { useTheme } from '../hooks/useTheme'
const navLinks = [ const navLinks = [
{ to: '/runs/new', label: 'New Run' }, { 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() { export function Layout() {
const [menuOpen, setMenuOpen] = useState(false) const [menuOpen, setMenuOpen] = useState(false)
const location = useLocation() const location = useLocation()
@@ -68,9 +102,11 @@ export function Layout() {
{link.label} {link.label}
</NavLink> </NavLink>
))} ))}
<ThemeToggle />
</div> </div>
{/* Mobile hamburger */} {/* Mobile hamburger */}
<div className="flex items-center sm:hidden"> <div className="flex items-center gap-1 sm:hidden">
<ThemeToggle />
<button <button
type="button" type="button"
onClick={() => setMenuOpen(!menuOpen)} onClick={() => setMenuOpen(!menuOpen)}

6
frontend/src/components/RuleBadges.tsx
View File

@@ -20,10 +20,10 @@ export function RuleBadges({ rules }: RuleBadgesProps) {
title={def.description} title={def.description}
className={`px-2 py-0.5 rounded-full text-xs font-medium ${ className={`px-2 py-0.5 rounded-full text-xs font-medium ${
def.category === 'core' 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' : def.category === 'completion'
? 'bg-green-900/40 text-green-300' ? 'bg-green-900/40 text-green-300 light:bg-green-100 light:text-green-700'
: 'bg-amber-900/40 text-amber-300' : 'bg-amber-900/40 text-amber-300 light:bg-amber-100 light:text-amber-800'
}`} }`}
> >
{def.name} {def.name}

63
frontend/src/hooks/useTheme.ts Normal file
View File

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

43
frontend/src/index.css
View File

@@ -68,6 +68,49 @@
--color-status-failed-bg: rgba(248, 81, 73, 0.15); --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 ────────────────────────────────────────────────── */ /* ── Base layer ────────────────────────────────────────────────── */
@layer base { @layer base {