Skip to content

Add Classic Light mode and independent accent themes - #314

Draft
engelben wants to merge 6 commits into
Git-Romer:mainfrom
engelben:feature/add-classic-light-mode-and-accent-themes
Draft

Add Classic Light mode and independent accent themes#314
engelben wants to merge 6 commits into
Git-Romer:mainfrom
engelben:feature/add-classic-light-mode-and-accent-themes

Conversation

@engelben

Copy link
Copy Markdown
Contributor

Motivation

  • Introduce a proper two-dimensional appearance system that separates base color mode (system | light | dark) from independent Pokémon accent palettes so users can choose brightness and accent independently.
  • Prevent visible theme flash by applying the resolved appearance before React paints and migrate the legacy theme preference into the new accent storage safely.
  • Provide a polished Classic Light token set while preserving the existing dark appearance and Pokémon visual effects.
  • Make semantic color tokens available to components and Tailwind so shared UI surfaces can adapt to both light and dark modes.

Description

  • Added an appearance hook API (useAppearance, exported also as useTheme) that manages colorMode, resolvedColorMode, accent, persistence keys pokecollector-color-mode and pokecollector-accent, legacy theme migration, live prefers-color-scheme tracking, and centralized DOM application. (frontend/src/hooks/useTheme.js)
  • Added a small defensive pre-render initialization script to index.html that resolves mode+accent and applies them on the document element before React renders to avoid theme flash. (frontend/index.html)
  • Introduced semantic CSS tokens for dark and Classic Light bases and accent variables, updated many shared component styles to consume the new tokens, and added per-accent definitions (including Electric foreground safety). (frontend/src/index.css)
  • Updated Tailwind configuration to read semantic values from CSS variables and use token-based shadows and borders. (frontend/tailwind.config.js)
  • Refactored the Settings UI to separate Appearance into accessible Color mode and Accent controls, added English and German translations, and wired the UI to the new appearance API. (frontend/src/pages/Settings.jsx, frontend/src/i18n/en.js, frontend/src/i18n/de.js)
  • Updated toast styling to use semantic tokens and kept compatibility aliases (such as data-theme) to avoid breaking third-party/custom styles. (frontend/src/main.jsx)

Testing

  • Ran git diff --check to validate whitespace and patch issues and it returned clean results.
  • Performed a full frontend install and build with cd frontend && npm ci && npm run build and the production build completed successfully (Vite build completed).
  • All tests passed (47 tests passed across the suite).

@engelben engelben changed the title Feature/add classic light mode and accent themes Add Classic Light mode and independent accent themes Jul 27, 2026
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.

1 participant