From 55d14d9e7703333e3b5ceb9385f22df46019038b Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Fri, 7 Nov 2025 22:38:17 +0100
Subject: [PATCH] fix: store separate link colors for dark and light themes

- Restore linkColorDark and linkColorLight settings
- Single color picker UI updates the appropriate theme's color based on current theme
- Dark theme color picker updates linkColorDark
- Light theme color picker updates linkColorLight
- Separate values applied to --color-link-dark and --color-link-light CSS variables
- Matches the pattern used for --color-primary
---
 src/components/Settings.tsx                   |  3 ++-
 .../Settings/ReadingDisplaySettings.tsx       | 20 ++++++++++++++-----
 src/hooks/useSettings.ts                      | 10 +++++-----
 src/services/settingsService.ts               |  5 +++--
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 759b6229..81b2bfc0 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -51,7 +51,8 @@ const DEFAULT_SETTINGS: UserSettings = {
   ttsDetectContentLanguage: true,
   ttsLanguageMode: 'content',
   ttsDefaultSpeed: 2.1,
-  linkColor: '#38bdf8',
+  linkColorDark: '#38bdf8',
+  linkColorLight: '#3b82f6',
 }
 
 interface SettingsProps {
diff --git a/src/components/Settings/ReadingDisplaySettings.tsx b/src/components/Settings/ReadingDisplaySettings.tsx
index de470d7d..483f51fe 100644
--- a/src/components/Settings/ReadingDisplaySettings.tsx
+++ b/src/components/Settings/ReadingDisplaySettings.tsx
@@ -20,7 +20,17 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
   const isDark = currentTheme === 'dark' || 
     (currentTheme === 'system' && (typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)').matches : true))
   const linkColors = isDark ? LINK_COLORS_DARK : LINK_COLORS_LIGHT
-  const defaultLinkColor = isDark ? '#38bdf8' : '#3b82f6'
+  const currentLinkColor = isDark 
+    ? (settings.linkColorDark || '#38bdf8')
+    : (settings.linkColorLight || '#3b82f6')
+  
+  const handleLinkColorChange = (color: string) => {
+    if (isDark) {
+      onUpdate({ linkColorDark: color })
+    } else {
+      onUpdate({ linkColorLight: color })
+    }
+  }
 
   return (
     <div className="settings-section">
@@ -120,8 +130,8 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
         <label className="setting-label">Link Color</label>
         <div className="setting-control">
           <ColorPicker
-            selectedColor={settings.linkColor || defaultLinkColor}
-            onColorChange={(color) => onUpdate({ linkColor: color })}
+            selectedColor={currentLinkColor}
+            onColorChange={handleLinkColorChange}
             colors={linkColors}
           />
         </div>
@@ -198,8 +208,8 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
             fontSize: `${settings.fontSize || 21}px`,
             '--highlight-rgb': hexToRgb(settings.highlightColor || '#ffff00'),
             '--paragraph-alignment': settings.paragraphAlignment || 'justify',
-            '--color-link-dark': settings.linkColor || (isDark ? '#38bdf8' : '#3b82f6'),
-            '--color-link-light': settings.linkColor || (isDark ? '#38bdf8' : '#3b82f6')
+            '--color-link-dark': settings.linkColorDark || '#38bdf8',
+            '--color-link-light': settings.linkColorLight || '#3b82f6'
           } as React.CSSProperties}
         >
           <h3>The Quick Brown Fox</h3>
diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
index 85ba3a01..73185bb4 100644
--- a/src/hooks/useSettings.ts
+++ b/src/hooks/useSettings.ts
@@ -68,11 +68,11 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       root.setProperty('--highlight-color-friends', settings.highlightColorFriends || '#f97316')
       root.setProperty('--highlight-color-nostrverse', settings.highlightColorNostrverse || '#9333ea')
       
-      // Set link color - apply to both dark and light theme variables
-      // The CSS will use the appropriate one based on the current theme
-      const linkColor = settings.linkColor || '#38bdf8'
-      root.setProperty('--color-link-dark', linkColor)
-      root.setProperty('--color-link-light', linkColor)
+      // Set link colors for dark and light themes separately
+      const darkLinkColor = settings.linkColorDark || '#38bdf8'
+      const lightLinkColor = settings.linkColorLight || '#3b82f6'
+      root.setProperty('--color-link-dark', darkLinkColor)
+      root.setProperty('--color-link-light', lightLinkColor)
       
       // Set paragraph alignment
       root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify')
diff --git a/src/services/settingsService.ts b/src/services/settingsService.ts
index bf7f1ae7..f0fd2e4f 100644
--- a/src/services/settingsService.ts
+++ b/src/services/settingsService.ts
@@ -74,8 +74,9 @@ export interface UserSettings {
   ttsLanguageMode?: 'system' | 'content' | string // default: 'content', can also be language code like 'en', 'es', etc.
   // Text-to-Speech settings
   ttsDefaultSpeed?: number // default: 2.1
-  // Link color for article content
-  linkColor?: string // default: #38bdf8 (sky-400) for dark, #3b82f6 (blue-500) for light
+  // Link color for article content (theme-specific)
+  linkColorDark?: string // default: #38bdf8 (sky-400)
+  linkColorLight?: string // default: #3b82f6 (blue-500)
 }
 
 /**