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/components/Settings/ThemeSettings.tsx

@@ -10,6 +10,12 @@ interface ThemeSettingsProps {
 
 const ThemeSettings: React.FC<ThemeSettingsProps> = ({ settings, onUpdate }) => {
   const currentTheme = settings.theme ?? 'system'
+  const currentDarkColor = settings.darkColorTheme ?? 'midnight'
+  const currentLightColor = settings.lightColorTheme ?? 'paper-white'
+  
+  // Determine which color picker to show based on current theme
+  const showDarkColors = currentTheme === 'dark' || currentTheme === 'system'
+  const showLightColors = currentTheme === 'light' || currentTheme === 'system'
 
   return (
     <div className="settings-section">
@@ -41,9 +47,66 @@ const ThemeSettings: React.FC<ThemeSettingsProps> = ({ settings, onUpdate }) =>
           />
         </div>
       </div>
+
+      {showDarkColors && (
+        <div className="setting-group setting-inline">
+          <label>Dark Color Theme</label>
+          <div className="setting-buttons">
+            <button
+              onClick={() => onUpdate({ darkColorTheme: 'black' })}
+              className={`font-size-btn ${currentDarkColor === 'black' ? 'active' : ''}`}
+              title="Black"
+            >
+              Black
+            </button>
+            <button
+              onClick={() => onUpdate({ darkColorTheme: 'midnight' })}
+              className={`font-size-btn ${currentDarkColor === 'midnight' ? 'active' : ''}`}
+              title="Midnight"
+            >
+              Midnight
+            </button>
+            <button
+              onClick={() => onUpdate({ darkColorTheme: 'charcoal' })}
+              className={`font-size-btn ${currentDarkColor === 'charcoal' ? 'active' : ''}`}
+              title="Charcoal"
+            >
+              Charcoal
+            </button>
+          </div>
+        </div>
+      )}
+
+      {showLightColors && (
+        <div className="setting-group setting-inline">
+          <label>Light Color Theme</label>
+          <div className="setting-buttons">
+            <button
+              onClick={() => onUpdate({ lightColorTheme: 'paper-white' })}
+              className={`font-size-btn ${currentLightColor === 'paper-white' ? 'active' : ''}`}
+              title="Paper White"
+            >
+              Paper
+            </button>
+            <button
+              onClick={() => onUpdate({ lightColorTheme: 'sepia' })}
+              className={`font-size-btn ${currentLightColor === 'sepia' ? 'active' : ''}`}
+              title="Sepia"
+            >
+              Sepia
+            </button>
+            <button
+              onClick={() => onUpdate({ lightColorTheme: 'ivory' })}
+              className={`font-size-btn ${currentLightColor === 'ivory' ? 'active' : ''}`}
+              title="Ivory"
+            >
+              Ivory
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
 
 export default ThemeSettings
-