Description
Add a theme toggle allowing users to switch between dark mode (current default) and a light mode variant.
Details
- Toggle button: Sun/moon icon in the header, next to the "+ New Battle" button
- Persistence: Save preference in localStorage, default to system preference (
prefers-color-scheme)
- Theme implementation: Use CSS custom properties (already defined in
@theme block in index.css) with two sets of values
- Light mode color scheme:
- Background:
#ffffff → #f6f8fa (GitHub-style light bg)
- Cards:
#ffffff with subtle border
- Text:
#1f2328 (primary), #656d76 (muted)
- Borders:
#d0d7de
- Territory grid: Lighter neutral cells, same participant colors but on white background
- Pixel font and accent colors remain the same for brand consistency
Implementation Approach
- Add a
ThemeProvider context wrapping the app
- Toggle adds/removes a
data-theme="light" attribute on <html>
- CSS variables swap based on
[data-theme="light"] selector
- All existing
bg-dark-*, text-dark-*, border-dark-* classes reference the CSS variables, so they auto-switch
- Canvas rendering in TerritoryArena reads theme context to adjust background/border colors
Acceptance Criteria
Description
Add a theme toggle allowing users to switch between dark mode (current default) and a light mode variant.
Details
prefers-color-scheme)@themeblock inindex.css) with two sets of values#ffffff→#f6f8fa(GitHub-style light bg)#ffffffwith subtle border#1f2328(primary),#656d76(muted)#d0d7deImplementation Approach
ThemeProvidercontext wrapping the appdata-theme="light"attribute on<html>[data-theme="light"]selectorbg-dark-*,text-dark-*,border-dark-*classes reference the CSS variables, so they auto-switchAcceptance Criteria