Skip to content

feat: add system theme mode to follow OS dark/light preference#881

Open
eacheat53 wants to merge 1 commit into
polywock:masterfrom
eacheat53:feat/system-theme-mode
Open

feat: add system theme mode to follow OS dark/light preference#881
eacheat53 wants to merge 1 commit into
polywock:masterfrom
eacheat53:feat/system-theme-mode

Conversation

@eacheat53
Copy link
Copy Markdown

Summary

Add a "System" theme mode that automatically follows the operating system's dark/light preference, alongside the existing Light and Dark options.

Changes

  • Theme selector: Replaced the dark theme Toggle with a 3-option <select> dropdown: Light, Dark, and System
  • Real-time sync: When set to "System", the extension listens to prefers-color-scheme media query and updates the theme in real-time when the OS switches between light/dark mode
  • Default for new installs: Fresh installs now default to "System" mode instead of snapshotting the OS preference once
  • Backward compatible: Existing boolean darkTheme values (true/false) continue to work as before
  • All 19 locales updated with translated strings for the new options

Files Modified

File Change
src/types.ts darkTheme type: booleanboolean | "system"
src/hooks/useThemeSync.tsx Added matchMedia listener for system mode
src/options/SectionFlags.tsx Toggle → select dropdown
src/utils/configUtils.ts Fresh install defaults to "system"
src/utils/GsmType.ts Added locale keys
static/locales/*.json Added translated strings (19 files)

- Add 'System' option alongside Light/Dark in theme settings
- When set to 'System', theme follows OS prefers-color-scheme in real-time
- Replace Toggle with a select dropdown (Light/Dark/System)
- Default fresh installs to 'System' mode
- Add translated locale strings for all 19 languages
- Backward compatible: existing boolean darkTheme values still work
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