feat(theme): add color theme variants for light and dark modes

- Add darkColorTheme: black, midnight (default), charcoal
- Add lightColorTheme: paper-white (default), sepia, ivory
- Extend UserSettings with color theme fields
- Update ThemeSettings UI to show color options
- Add CSS variables for all color theme variants
- Sepia and Ivory have warm, reading-friendly palettes
- Black offers true black for OLED screens
- All color themes sync via Nostr (NIP-78)

src/utils/theme.ts

@@ -1,4 +1,6 @@
 export type Theme = 'dark' | 'light' | 'system'
+export type DarkColorTheme = 'black' | 'midnight' | 'charcoal'
+export type LightColorTheme = 'paper-white' | 'sepia' | 'ivory'
 
 let mediaQueryListener: ((e: MediaQueryListEvent) => void) | null = null
 
@@ -11,14 +13,21 @@ export function getSystemTheme(): 'dark' | 'light' {
 }
 
 /**
- * Apply theme to the document root element
+ * Apply theme and color variant to the document root element
  * Handles 'system' theme by listening to OS preference changes
  */
-export function applyTheme(theme: Theme): void {
+export function applyTheme(
+  theme: Theme,
+  darkColorTheme: DarkColorTheme = 'midnight',
+  lightColorTheme: LightColorTheme = 'paper-white'
+): void {
   const root = document.documentElement
   
   // Remove existing theme classes
   root.classList.remove('theme-dark', 'theme-light', 'theme-system')
+  // Remove existing color theme classes
+  root.classList.remove('dark-black', 'dark-midnight', 'dark-charcoal')
+  root.classList.remove('light-paper-white', 'light-sepia', 'light-ivory')
   
   // Clean up previous media query listener if exists
   if (mediaQueryListener) {
@@ -29,6 +38,10 @@ export function applyTheme(theme: Theme): void {
   if (theme === 'system') {
     root.classList.add('theme-system')
     
+    // Apply color themes for system mode (CSS will handle media query)
+    root.classList.add(`dark-${darkColorTheme}`)
+    root.classList.add(`light-${lightColorTheme}`)
+    
     // Listen for system theme changes
     mediaQueryListener = (e: MediaQueryListEvent) => {
       console.log('🎨 System theme changed to:', e.matches ? 'dark' : 'light')
@@ -38,7 +51,13 @@ export function applyTheme(theme: Theme): void {
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', mediaQueryListener)
   } else {
     root.classList.add(`theme-${theme}`)
+    // Apply appropriate color theme based on light/dark
+    if (theme === 'dark') {
+      root.classList.add(`dark-${darkColorTheme}`)
+    } else {
+      root.classList.add(`light-${lightColorTheme}`)
+    }
   }
   
-  console.log('🎨 Applied theme:', theme)
+  console.log('🎨 Applied theme:', theme, 'with colors:', { dark: darkColorTheme, light: lightColorTheme })
 }