shiyue/PinchChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add System theme option that follows OS color scheme

Browse Source 
Adds a 'System' option to the theme switcher that automatically uses
light or dark theme based on the OS prefers-color-scheme setting.
Dynamically updates when the OS preference changes (e.g. scheduled
dark mode). i18n labels added for EN/FR.
This commit is contained in:
Nicolas Varrot
2026-02-13 04:12:54 +00:00
parent aa37d7b313
commit 2157d7ebd5
5 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ThemeSwitcher.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useRef, useEffect } from 'react';
import { Palette, Sun, Moon, Monitor, Check } from 'lucide-react';
import { Palette, Sun, Moon, Monitor, Laptop, Check } from 'lucide-react';
import { useTheme } from '../hooks/useTheme';
import type { ThemeName, AccentColor } from '../contexts/ThemeContextDef';
import { useT } from '../hooks/useLocale';
@@ -7,6 +7,7 @@ import { useT } from '../hooks/useLocale';
import type { TranslationKey } from '../lib/i18n';
const themeOptions: { value: ThemeName; icon: typeof Sun; labelKey: TranslationKey }[] = [
{ value: 'system', icon: Laptop, labelKey: 'theme.system' },
{ value: 'dark', icon: Moon, labelKey: 'theme.dark' },
{ value: 'light', icon: Sun, labelKey: 'theme.light' },
{ value: 'oled', icon: Monitor, labelKey: 'theme.oled' },