refactor: use single link color setting with theme-aware palette

- Revert to single linkColor setting (removed linkColorDark/Light)
- Add theme-specific color palettes: LINK_COLORS_DARK and LINK_COLORS_LIGHT
- Color picker shows appropriate palette based on current theme
- Single link color value applied to both dark and light CSS variables
- Dark theme shows lighter colors (sky-400, cyan-400, etc.)
- Light theme shows darker colors (blue-500, indigo-500, etc.)

src/components/Settings.tsx

@@ -51,8 +51,7 @@ const DEFAULT_SETTINGS: UserSettings = {
   ttsDetectContentLanguage: true,
   ttsLanguageMode: 'content',
   ttsDefaultSpeed: 2.1,
-  linkColorDark: '#38bdf8',
-  linkColorLight: '#3b82f6',
+  linkColor: '#38bdf8',
 }
 
 interface SettingsProps {

src/components/Settings/ReadingDisplaySettings.tsx

@@ -5,7 +5,7 @@ import IconButton from '../IconButton'
 import ColorPicker from '../ColorPicker'
 import FontSelector from '../FontSelector'
 import { getFontFamily } from '../../utils/fontLoader'
-import { hexToRgb, LINK_COLORS } from '../../utils/colorHelpers'
+import { hexToRgb, LINK_COLORS_DARK, LINK_COLORS_LIGHT } from '../../utils/colorHelpers'
 
 interface ReadingDisplaySettingsProps {
   settings: UserSettings
@@ -14,6 +14,13 @@ interface ReadingDisplaySettingsProps {
 
 const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ settings, onUpdate }) => {
   const previewFontFamily = getFontFamily(settings.readingFont || 'source-serif-4')
+  
+  // Determine current effective theme for color palette selection
+  const currentTheme = settings.theme ?? 'system'
+  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'
 
   return (
     <div className="settings-section">
@@ -110,23 +117,12 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
       </div>
 
       <div className="setting-group setting-inline">
-        <label className="setting-label">Link Color (Dark)</label>
+        <label className="setting-label">Link Color</label>
         <div className="setting-control">
           <ColorPicker
-            selectedColor={settings.linkColorDark || '#38bdf8'}
-            onColorChange={(color) => onUpdate({ linkColorDark: color })}
-            colors={LINK_COLORS}
-          />
-        </div>
-      </div>
-
-      <div className="setting-group setting-inline">
-        <label className="setting-label">Link Color (Light)</label>
-        <div className="setting-control">
-          <ColorPicker
-            selectedColor={settings.linkColorLight || '#3b82f6'}
-            onColorChange={(color) => onUpdate({ linkColorLight: color })}
-            colors={LINK_COLORS}
+            selectedColor={settings.linkColor || defaultLinkColor}
+            onColorChange={(color) => onUpdate({ linkColor: color })}
+            colors={linkColors}
           />
         </div>
       </div>
@@ -202,8 +198,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.linkColorDark || '#38bdf8',
-            '--color-link-light': settings.linkColorLight || '#3b82f6'
+            '--color-link-dark': settings.linkColor || (isDark ? '#38bdf8' : '#3b82f6'),
+            '--color-link-light': settings.linkColor || (isDark ? '#38bdf8' : '#3b82f6')
           } as React.CSSProperties}
         >
           <h3>The Quick Brown Fox</h3>

src/hooks/useSettings.ts

@@ -68,13 +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 colors for dark and light themes
-      // Store both values on root - CSS will use the appropriate one based on theme
-      const darkLinkColor = settings.linkColorDark || '#38bdf8'
-      const lightLinkColor = settings.linkColorLight || '#3b82f6'
-      
-      root.setProperty('--color-link-dark', darkLinkColor)
-      root.setProperty('--color-link-light', lightLinkColor)
+      // 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 paragraph alignment
       root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify')

src/services/settingsService.ts

@@ -74,9 +74,8 @@ 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 (theme-specific)
-  linkColorDark?: string // default: #38bdf8 (sky-400)
-  linkColorLight?: string // default: #3b82f6 (blue-500)
+  // Link color for article content
+  linkColor?: string // default: #38bdf8 (sky-400) for dark, #3b82f6 (blue-500) for light
 }
 
 /**

src/utils/colorHelpers.ts

@@ -16,12 +16,22 @@ export const HIGHLIGHT_COLORS = [
   { name: 'Purple', value: '#9333ea' }   // purple-600
 ]
 
-// Tailwind color palette for link colors
-export const LINK_COLORS = [
+// Tailwind color palette for link colors - optimized for dark themes
+export const LINK_COLORS_DARK = [
   { name: 'Sky Blue', value: '#38bdf8' },  // sky-400
   { name: 'Cyan', value: '#22d3ee' },      // cyan-400
-  { name: 'Blue', value: '#3b82f6' },      // blue-500
   { name: 'Light Blue', value: '#60a5fa' }, // blue-400
   { name: 'Indigo Light', value: '#818cf8' }, // indigo-400
+  { name: 'Blue', value: '#3b82f6' },      // blue-500
   { name: 'Purple', value: '#9333ea' }     // purple-600
 ]
+
+// Tailwind color palette for link colors - optimized for light themes
+export const LINK_COLORS_LIGHT = [
+  { name: 'Blue', value: '#3b82f6' },      // blue-500
+  { name: 'Indigo', value: '#6366f1' },     // indigo-500
+  { name: 'Purple', value: '#9333ea' },    // purple-600
+  { name: 'Sky Blue', value: '#0ea5e9' },   // sky-500 (darker for light bg)
+  { name: 'Cyan', value: '#06b6d4' },      // cyan-500 (darker for light bg)
+  { name: 'Teal', value: '#14b8a6' }       // teal-500
+]