From 689963c0415d76b6c534eb5b9af8db7adf14f2ea Mon Sep 17 00:00:00 2001 From: Gigi Date: Tue, 14 Oct 2025 10:00:21 +0200 Subject: [PATCH] refactor(theme): change default light theme to sepia - Update default from paper-white to sepia for warmer reading - Midnight remains default for dark mode - Sepia provides warm, eye-friendly tones for light mode --- src/components/Settings/ThemeSettings.tsx | 2 +- src/hooks/useSettings.ts | 2 +- src/services/settingsService.ts | 2 +- src/utils/theme.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Settings/ThemeSettings.tsx b/src/components/Settings/ThemeSettings.tsx index a65c47d8..42755067 100644 --- a/src/components/Settings/ThemeSettings.tsx +++ b/src/components/Settings/ThemeSettings.tsx @@ -11,7 +11,7 @@ interface ThemeSettingsProps { const ThemeSettings: React.FC = ({ settings, onUpdate }) => { const currentTheme = settings.theme ?? 'system' const currentDarkColor = settings.darkColorTheme ?? 'midnight' - const currentLightColor = settings.lightColorTheme ?? 'paper-white' + const currentLightColor = settings.lightColorTheme ?? 'sepia' // Determine which color picker to show based on current theme const showDarkColors = currentTheme === 'dark' || currentTheme === 'system' diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts index b2d1e36e..a6b6ff6d 100644 --- a/src/hooks/useSettings.ts +++ b/src/hooks/useSettings.ts @@ -54,7 +54,7 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U applyTheme( settings.theme ?? 'system', settings.darkColorTheme ?? 'midnight', - settings.lightColorTheme ?? 'paper-white' + settings.lightColorTheme ?? 'sepia' ) // Load font first and wait for it to be ready diff --git a/src/services/settingsService.ts b/src/services/settingsService.ts index 187e0e29..021b6655 100644 --- a/src/services/settingsService.ts +++ b/src/services/settingsService.ts @@ -50,7 +50,7 @@ export interface UserSettings { // Theme preference theme?: 'dark' | 'light' | 'system' // default: system darkColorTheme?: 'black' | 'midnight' | 'charcoal' // default: midnight - lightColorTheme?: 'paper-white' | 'sepia' | 'ivory' // default: paper-white + lightColorTheme?: 'paper-white' | 'sepia' | 'ivory' // default: sepia } export async function loadSettings( diff --git a/src/utils/theme.ts b/src/utils/theme.ts index 9bbc6796..7c425875 100644 --- a/src/utils/theme.ts +++ b/src/utils/theme.ts @@ -19,7 +19,7 @@ export function getSystemTheme(): 'dark' | 'light' { export function applyTheme( theme: Theme, darkColorTheme: DarkColorTheme = 'midnight', - lightColorTheme: LightColorTheme = 'paper-white' + lightColorTheme: LightColorTheme = 'sepia' ): void { const root = document.documentElement