Skip to content

Support light/dark/system themes and remember user preference (#165)#208

Open
kyoungholee wants to merge 2 commits intoCefalo:developfrom
kyoungholee:feature/165-dark-mode
Open

Support light/dark/system themes and remember user preference (#165)#208
kyoungholee wants to merge 2 commits intoCefalo:developfrom
kyoungholee:feature/165-dark-mode

Conversation

@kyoungholee
Copy link
Copy Markdown

Summary

  • Added full dark mode support alongside the existing light theme.
  • Introduced a theme mode switcher (Light / Dark / System) in the Settings → Preferences page.
  • Persisted the user’s theme choice so it is remembered across sessions and falls back to the system setting by default.

Changes

  • Extended color-schemes.ts with a dedicated dark palette.
  • Added ThemeModeContext to manage theme preference (light, dark, system) and resolve the actual mode.
  • Persisted the theme preference via shared cache under the themeMode key.
  • Wrapped the app with ThemeModeProvider so the resolved mode is applied globally.
  • Updated PreferenceView to expose an Appearance section with a 3-way toggle and made styling use theme tokens instead of hard-coded colors where relevant.

Behavior

  • Default behavior follows the system prefers-color-scheme setting.
  • If the user selects Light or Dark explicitly, that choice overrides the system setting.
  • The selected theme is stored and restored on subsequent visits.

Testing

  • Manually toggled between Light / Dark / System in Settings and verified:
    • Theme changes immediately across the app.
    • Preference is preserved after page reload.
    • Colors adapt correctly on key screens (Home, Login, Settings).

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