Skip to content

feat(frontend): add dark/light mode toggle with system auto-detection (#129) - #217

Open
ZacLou wants to merge 1 commit into
Kaycee276:masterfrom
ZacLou:feat/dark-light-mode-129
Open

feat(frontend): add dark/light mode toggle with system auto-detection (#129)#217
ZacLou wants to merge 1 commit into
Kaycee276:masterfrom
ZacLou:feat/dark-light-mode-129

Conversation

@ZacLou

@ZacLou ZacLou commented Sep 2, 2026

Copy link
Copy Markdown

Closes #129

Adds a global dark/light theme switch that persists the user's choice in localStorage and defaults to the system preference.

  • Extends themeStore with colorMode (light / dark / system), persisted alongside the existing board theme.
  • Adds a ThemeToggle component (Light / Dark / System) and places it on GamePage.
  • Toggles the .dark class on document.documentElement based on the resolved mode.
  • Listens to prefers-color-scheme changes when the mode is system.
  • Adds unit tests for color-mode application and board-theme CSS variables.
  • Configures Vitest with jsdom and excludes the e2e directory from unit runs.
  • Also fixes the setViewingIndex signature in gameStore so it accepts updater functions, resolving pre-existing TypeScript errors in ChessBoard.tsx.

Verified:

  • npm run lint passes
  • npm test passes (8 tests)
  • npm run build passes

…Kaycee276#129)

Closes Kaycee276#129

- Extend themeStore with colorMode (light/dark/system), persisted in localStorage.
- Add ThemeToggle component with sun/moon/monitor icons.
- Apply .dark class to document.documentElement based on mode + system preference.
- Listen to prefers-color-scheme changes when mode is system.
- Add tests for color mode and board theme application.
- Configure vitest with jsdom environment and exclude e2e specs.
- Bonus: fix setViewingIndex signature in gameStore to accept updater functions,
  resolving pre-existing TypeScript errors in ChessBoard.tsx.
@vercel

vercel Bot commented Sep 2, 2026

Copy link
Copy Markdown

@web-flow is attempting to deploy a commit to the kaycee276's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FRONTEND] feat(frontend): Implement Dark/Light Mode Theme Toggle with System Auto-Detection

2 participants