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>
This commit is contained in:
2026-02-20 19:45:12 +01:00
parent cb35bf161e
commit a381633413
8 changed files with 224 additions and 22 deletions

View File

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