From f41cb4b17ef259fa2a740c3585aa058fe6840173 Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:35:49 +0100 Subject: [PATCH] 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 | 3 +- .../Settings/ReadingDisplaySettings.tsx | 32 ++++++++----------- src/hooks/useSettings.ts | 12 +++---- src/services/settingsService.ts | 5 ++- src/utils/colorHelpers.ts | 16 ++++++++-- 5 files changed, 35 insertions(+), 33 deletions(-) diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx index 81b2bfc0..759b6229 100644 --- a/src/components/Settings.tsx +++ b/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 { diff --git a/src/components/Settings/ReadingDisplaySettings.tsx b/src/components/Settings/ReadingDisplaySettings.tsx index 24f3d9f8..de470d7d 100644 --- a/src/components/Settings/ReadingDisplaySettings.tsx +++ b/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 = ({ 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 (
@@ -110,23 +117,12 @@ const ReadingDisplaySettings: React.FC = ({ setting
- +
onUpdate({ linkColorDark: color })} - colors={LINK_COLORS} - /> -
-
- -
- -
- onUpdate({ linkColorLight: color })} - colors={LINK_COLORS} + selectedColor={settings.linkColor || defaultLinkColor} + onColorChange={(color) => onUpdate({ linkColor: color })} + colors={linkColors} />
@@ -202,8 +198,8 @@ const ReadingDisplaySettings: React.FC = ({ 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} >

The Quick Brown Fox

diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts index 2cac89f2..85ba3a01 100644 --- a/src/hooks/useSettings.ts +++ b/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') diff --git a/src/services/settingsService.ts b/src/services/settingsService.ts index f0fd2e4f..bf7f1ae7 100644 --- a/src/services/settingsService.ts +++ b/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 } /** diff --git a/src/utils/colorHelpers.ts b/src/utils/colorHelpers.ts index cb371389..6796573d 100644 --- a/src/utils/colorHelpers.ts +++ b/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 +]