From 286d5df5b81b677de30f585da6da82ab6453b7a2 Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:34:46 +0100 Subject: [PATCH] feat: rename link color to --color-link and add dark/light theme support - Rename CSS variable from --link-color to --color-link - Add linkColorDark and linkColorLight settings (replacing single linkColor) - Add --color-link to dark and light theme CSS variables - Use CSS var() references to automatically switch based on theme - Update settings UI to show separate color pickers for dark and light themes - Default: dark=#38bdf8 (sky-400), light=#3b82f6 (blue-500) - Update all CSS references to use new variable name --- src/components/Settings.tsx | 3 ++- .../Settings/ReadingDisplaySettings.tsx | 20 +++++++++++++++---- src/hooks/useSettings.ts | 9 +++++++-- src/services/settingsService.ts | 5 +++-- src/styles/base/variables.css | 4 ++++ src/styles/components/forms.css | 2 +- src/styles/components/reader.css | 2 +- 7 files changed, 34 insertions(+), 11 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 bd6a6ff6..24f3d9f8 100644 --- a/src/components/Settings/ReadingDisplaySettings.tsx +++ b/src/components/Settings/ReadingDisplaySettings.tsx @@ -110,11 +110,22 @@ const ReadingDisplaySettings: React.FC = ({ setting
- +
onUpdate({ linkColor: color })} + selectedColor={settings.linkColorDark || '#38bdf8'} + onColorChange={(color) => onUpdate({ linkColorDark: color })} + colors={LINK_COLORS} + /> +
+
+ +
+ +
+ onUpdate({ linkColorLight: color })} colors={LINK_COLORS} />
@@ -191,7 +202,8 @@ const ReadingDisplaySettings: React.FC = ({ setting fontSize: `${settings.fontSize || 21}px`, '--highlight-rgb': hexToRgb(settings.highlightColor || '#ffff00'), '--paragraph-alignment': settings.paragraphAlignment || 'justify', - '--link-color': settings.linkColor || '#38bdf8' + '--color-link-dark': settings.linkColorDark || '#38bdf8', + '--color-link-light': settings.linkColorLight || '#3b82f6' } as React.CSSProperties} >

The Quick Brown Fox

diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts index 0aec4c1e..2cac89f2 100644 --- a/src/hooks/useSettings.ts +++ b/src/hooks/useSettings.ts @@ -68,8 +68,13 @@ 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 - root.setProperty('--link-color', settings.linkColor || '#38bdf8') + // 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 paragraph alignment root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify') diff --git a/src/services/settingsService.ts b/src/services/settingsService.ts index d6a57820..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) + // Link color for article content (theme-specific) + linkColorDark?: string // default: #38bdf8 (sky-400) + linkColorLight?: string // default: #3b82f6 (blue-500) } /** diff --git a/src/styles/base/variables.css b/src/styles/base/variables.css index d70415f1..5e801513 100644 --- a/src/styles/base/variables.css +++ b/src/styles/base/variables.css @@ -57,6 +57,7 @@ --color-text-muted: #71717a; /* zinc-500 */ --color-primary: #6366f1; /* indigo-500 */ --color-primary-hover: #4f46e5; /* indigo-600 */ + --color-link: var(--color-link-dark, #38bdf8); /* sky-400 */ } /* Light theme */ @@ -73,6 +74,7 @@ --color-text-muted: #6b7280; /* gray-500 */ --color-primary: #4f46e5; /* indigo-600 */ --color-primary-hover: #4338ca; /* indigo-700 */ + --color-link: var(--color-link-light, #3b82f6); /* blue-500 */ /* Highlight colors for light theme - use same Tailwind colors */ --highlight-color-mine: #fde047; /* yellow-300 */ @@ -97,6 +99,7 @@ --color-text-muted: #71717a; --color-primary: #6366f1; --color-primary-hover: #4f46e5; + --color-link: var(--color-link-dark, #38bdf8); } } @@ -112,6 +115,7 @@ --color-text-muted: #6b7280; --color-primary: #4f46e5; --color-primary-hover: #4338ca; + --color-link: var(--color-link-light, #3b82f6); /* Standard highlight colors */ --highlight-color-mine: #fde047; diff --git a/src/styles/components/forms.css b/src/styles/components/forms.css index e0696e96..6fec30e8 100644 --- a/src/styles/components/forms.css +++ b/src/styles/components/forms.css @@ -44,7 +44,7 @@ text-align: var(--paragraph-alignment, justify); } .preview-content a { - color: var(--link-color, #38bdf8); + color: var(--color-link); text-decoration: none; } .preview-content a:hover { diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css index 6dc746d8..4841788d 100644 --- a/src/styles/components/reader.css +++ b/src/styles/components/reader.css @@ -160,7 +160,7 @@ opacity: 0.69; margin: 2.5rem 0; } -.reader-markdown a { color: var(--link-color, #38bdf8); text-decoration: none; } +.reader-markdown a { color: var(--color-link); text-decoration: none; } .reader-markdown a:hover { text-decoration: underline; } .reader-markdown code { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.9em; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; } .reader-markdown pre { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1rem 0; line-height: 1.5; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }