feat: theme switcher — dark, light, OLED modes with configurable accent colors

- Add ThemeContext with CSS custom properties for all base colors
- Three theme modes: Dark (default), Light, OLED Black
- Six accent colors: Cyan, Violet, Emerald, Amber, Rose, Blue
- Theme switcher dropdown in header (palette icon)
- Persisted in localStorage
- CSS variables replace hardcoded hex colors in index.css and components
- i18n support (EN/FR) for theme labels
This commit is contained in:
Nicolas Varrot
2026-02-12 23:51:01 +00:00
parent 5c35bdda32
commit b20bf41bf4
13 changed files with 347 additions and 24 deletions

View File

@@ -102,6 +102,14 @@ const en = {
// Export
'header.export': 'Export conversation as Markdown',
// Theme
'theme.title': 'Theme',
'theme.mode': 'Mode',
'theme.accent': 'Accent',
'theme.dark': 'Dark',
'theme.light': 'Light',
'theme.oled': 'OLED',
} as const;
const fr: Record<keyof typeof en, string> = {
@@ -187,6 +195,13 @@ const fr: Record<keyof typeof en, string> = {
'shortcuts.generalSection': 'Général',
'header.export': 'Exporter la conversation en Markdown',
'theme.title': 'Thème',
'theme.mode': 'Mode',
'theme.accent': 'Accent',
'theme.dark': 'Sombre',
'theme.light': 'Clair',
'theme.oled': 'OLED',
};
export type TranslationKey = keyof typeof en;