Add multi-theme system with light, dark, ocean, forest, and high-contrast options - #111
Open
asherp wants to merge 1 commit into
Open
Add multi-theme system with light, dark, ocean, forest, and high-contrast options#111asherp wants to merge 1 commit into
asherp wants to merge 1 commit into
Conversation
Replaces the binary light/dark toggle with a proper theme system per issue #91. - Tokenize theme-able colors as CSS custom properties in variables.css (brand/primary, surfaces, text, borders, danger, sidebar) and replace the scattered hardcoded brand hex values (#667eea/#764ba2 gradient and variants) across the component CSS with var(...) references. - Add styles/themes.css: a generic, token-driven surface layer (keyed on body.themed) plus theme token sets defined under :root[data-theme]. Ships light, dark, high-contrast, ocean, and forest themes. - Dark stays visually identical: it keeps the legacy body.dark-mode class and dark-mode.css overrides, with matching tokens so brand colors retint. - Settings → Appearance now shows a swatch-based theme picker with previews instead of a single dark toggle. - Persist the selection in localStorage ('theme'), respect the legacy 'darkMode' value for existing users, and apply the theme on <html> before first paint via an inline head script (no flash of the wrong theme). - Update JS that hardcoded dark colors (email-service, contacts-service, utils) to read the active theme's tokens instead of the dark-mode class. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QxyBudD1ouFYxsBpB2wy9M
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the binary dark mode toggle with a comprehensive multi-theme system supporting five distinct color themes: light, dark, high-contrast, ocean, and forest. The implementation uses CSS custom properties (tokens) for theme-agnostic styling, with dark mode retaining its legacy
.dark-modeclass for backward compatibility while new themes use a generic.themedclass driven by token values.Key Changes
New theme system architecture (
styles/themes.css):body.themedvariables.cssdark-mode.cssoverrides for compatibilitybody.themedCSS custom properties (
styles/variables.css):--color-primary,--color-bg,--color-surface,--color-text,--color-border,--color-sidebar,--color-danger, etc.:root[data-theme="..."]Theme management (
js/app.js):setDarkMode()withsetTheme(theme)that handles all five themesgetSavedTheme()to resolve active theme, honoring legacydarkModepreference for backward compatibilitydata-theme-valueattributesdarkModelocalStorage key in sync for older code pathsaria-checkedattributesPre-paint theme application (
index.html):<head>script that applies saved theme to<html>before first paint, eliminating flash of wrong themegetSavedTheme()Settings UI (
index.html):Stylesheet updates (across
contacts.css,forms.css,dm.css,email.css,buttons.css,navigation.css,loading.css,relay.css,qr-scanner.css,dark-mode.css):#667eea,#764ba2, etc.) with CSS custom property referencesvar(--color-primary-gradient)Utility updates (
js/utils.js,js/contacts-service.js,js/email-service.js):Implementation Details
darkModelocalStorage preference is automatically migrated to the newthemekey;setDarkMode()andtoggleDarkMode()remain as shims<head>applies theme before DOM renders, preventing visual flickeraria-checkedstates.themedclass.dark-modeclass anddark-mode.cssoverrides to maintain existing behaviorhttps://claude.ai/code/session_01QxyBudD1ouFYxsBpB2wy9M