From ed1a4e489ea9e65194dd3ac7cd27f3ddd80000b0 Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:12:43 +0100 Subject: [PATCH 01/16] style: increase paragraph spacing in reader view to 1rem --- src/styles/components/reader.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css index 40d4c2e9..c3b5775a 100644 --- a/src/styles/components/reader.css +++ b/src/styles/components/reader.css @@ -115,8 +115,9 @@ margin-bottom: 0.5rem; color: var(--color-text); } -.reader-markdown p { margin: 0.5rem 0; } -.reader-html p, .reader-html div, .reader-html span, .reader-html li, .reader-html td, .reader-html th { font-size: 1em !important; } +.reader-markdown p { margin: 1rem 0; } +.reader-html p { margin: 1rem 0; } +.reader-html div, .reader-html span, .reader-html li, .reader-html td, .reader-html th { font-size: 1em !important; } /* Lists */ .reader-markdown ul, .reader-html ul { list-style-type: disc; From feafe4a07b66b58041f746ff5229470a3048d149 Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:13:18 +0100 Subject: [PATCH 02/16] style: increase paragraph spacing in reader view to 1.5rem --- src/styles/components/reader.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css index c3b5775a..603dd346 100644 --- a/src/styles/components/reader.css +++ b/src/styles/components/reader.css @@ -115,8 +115,8 @@ margin-bottom: 0.5rem; color: var(--color-text); } -.reader-markdown p { margin: 1rem 0; } -.reader-html p { margin: 1rem 0; } +.reader-markdown p { margin: 1.5rem 0; } +.reader-html p { margin: 1.5rem 0; } .reader-html div, .reader-html span, .reader-html li, .reader-html td, .reader-html th { font-size: 1em !important; } /* Lists */ .reader-markdown ul, .reader-html ul { From 7b3f36b0bb4e38bdef2cc2462d8651bf9a6d64f8 Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:14:11 +0100 Subject: [PATCH 03/16] style: increase top margin on headlines in reader view --- src/styles/components/reader.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css index 603dd346..1c6d391d 100644 --- a/src/styles/components/reader.css +++ b/src/styles/components/reader.css @@ -71,7 +71,7 @@ font-size: 2.25rem; /* text-4xl */ font-weight: 700; line-height: 1.2; - margin-top: 2rem; + margin-top: 3rem; margin-bottom: 1rem; color: var(--color-text); } @@ -79,7 +79,7 @@ font-size: 1.875rem; /* text-3xl */ font-weight: 600; line-height: 1.3; - margin-top: 1.75rem; + margin-top: 2.75rem; margin-bottom: 0.875rem; color: var(--color-text); } @@ -87,7 +87,7 @@ font-size: 1.5rem; /* text-2xl */ font-weight: 600; line-height: 1.4; - margin-top: 1.5rem; + margin-top: 2.5rem; margin-bottom: 0.75rem; color: var(--color-text); } @@ -95,7 +95,7 @@ font-size: 1.25rem; /* text-xl */ font-weight: 600; line-height: 1.4; - margin-top: 1.25rem; + margin-top: 2.25rem; margin-bottom: 0.625rem; color: var(--color-text); } @@ -103,7 +103,7 @@ font-size: 1.125rem; /* text-lg */ font-weight: 600; line-height: 1.4; - margin-top: 1rem; + margin-top: 2rem; margin-bottom: 0.5rem; color: var(--color-text); } @@ -111,7 +111,7 @@ font-size: 1rem; /* text-base */ font-weight: 600; line-height: 1.4; - margin-top: 1rem; + margin-top: 2rem; margin-bottom: 0.5rem; color: var(--color-text); } From 43e6455668e69235216110d32caa24b240c699b0 Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:14:53 +0100 Subject: [PATCH 04/16] style: further increase top margin on headlines in reader view --- src/styles/components/reader.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css index 1c6d391d..db902296 100644 --- a/src/styles/components/reader.css +++ b/src/styles/components/reader.css @@ -71,7 +71,7 @@ font-size: 2.25rem; /* text-4xl */ font-weight: 700; line-height: 1.2; - margin-top: 3rem; + margin-top: 4rem; margin-bottom: 1rem; color: var(--color-text); } @@ -79,7 +79,7 @@ font-size: 1.875rem; /* text-3xl */ font-weight: 600; line-height: 1.3; - margin-top: 2.75rem; + margin-top: 3.5rem; margin-bottom: 0.875rem; color: var(--color-text); } @@ -87,7 +87,7 @@ font-size: 1.5rem; /* text-2xl */ font-weight: 600; line-height: 1.4; - margin-top: 2.5rem; + margin-top: 3rem; margin-bottom: 0.75rem; color: var(--color-text); } @@ -95,7 +95,7 @@ font-size: 1.25rem; /* text-xl */ font-weight: 600; line-height: 1.4; - margin-top: 2.25rem; + margin-top: 2.75rem; margin-bottom: 0.625rem; color: var(--color-text); } @@ -103,7 +103,7 @@ font-size: 1.125rem; /* text-lg */ font-weight: 600; line-height: 1.4; - margin-top: 2rem; + margin-top: 2.5rem; margin-bottom: 0.5rem; color: var(--color-text); } @@ -111,7 +111,7 @@ font-size: 1rem; /* text-base */ font-weight: 600; line-height: 1.4; - margin-top: 2rem; + margin-top: 2.5rem; margin-bottom: 0.5rem; color: var(--color-text); } From 2323427dbd68c4bd2e391de0c25bbb925b085510 Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:15:16 +0100 Subject: [PATCH 05/16] style: further increase top margin on headlines in reader view --- src/styles/components/reader.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css index db902296..8d5fb5e3 100644 --- a/src/styles/components/reader.css +++ b/src/styles/components/reader.css @@ -71,7 +71,7 @@ font-size: 2.25rem; /* text-4xl */ font-weight: 700; line-height: 1.2; - margin-top: 4rem; + margin-top: 5rem; margin-bottom: 1rem; color: var(--color-text); } @@ -79,7 +79,7 @@ font-size: 1.875rem; /* text-3xl */ font-weight: 600; line-height: 1.3; - margin-top: 3.5rem; + margin-top: 4.5rem; margin-bottom: 0.875rem; color: var(--color-text); } @@ -87,7 +87,7 @@ font-size: 1.5rem; /* text-2xl */ font-weight: 600; line-height: 1.4; - margin-top: 3rem; + margin-top: 4rem; margin-bottom: 0.75rem; color: var(--color-text); } @@ -95,7 +95,7 @@ font-size: 1.25rem; /* text-xl */ font-weight: 600; line-height: 1.4; - margin-top: 2.75rem; + margin-top: 3.5rem; margin-bottom: 0.625rem; color: var(--color-text); } @@ -103,7 +103,7 @@ font-size: 1.125rem; /* text-lg */ font-weight: 600; line-height: 1.4; - margin-top: 2.5rem; + margin-top: 3rem; margin-bottom: 0.5rem; color: var(--color-text); } @@ -111,7 +111,7 @@ font-size: 1rem; /* text-base */ font-weight: 600; line-height: 1.4; - margin-top: 2.5rem; + margin-top: 3rem; margin-bottom: 0.5rem; color: var(--color-text); } From 3b4f3e8161edac2f28e98fc0913d7519d3260e57 Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:20:33 +0100 Subject: [PATCH 06/16] feat: improve link visibility in dark mode with lighter indigo-400 color - Change primary color from indigo-500 to indigo-400 (#818cf8) in dark mode - Improves readability on dimmed mobile displays - Update both theme-dark and theme-system dark mode variants --- src/styles/base/variables.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/base/variables.css b/src/styles/base/variables.css index d70415f1..e438b2ff 100644 --- a/src/styles/base/variables.css +++ b/src/styles/base/variables.css @@ -55,8 +55,8 @@ --color-text: #e4e4e7; /* zinc-200 */ --color-text-secondary: #a1a1aa; /* zinc-400 */ --color-text-muted: #71717a; /* zinc-500 */ - --color-primary: #6366f1; /* indigo-500 */ - --color-primary-hover: #4f46e5; /* indigo-600 */ + --color-primary: #818cf8; /* indigo-400 - lighter for better visibility on dimmed displays */ + --color-primary-hover: #6366f1; /* indigo-500 */ } /* Light theme */ @@ -95,8 +95,8 @@ --color-text: #e4e4e7; --color-text-secondary: #a1a1aa; --color-text-muted: #71717a; - --color-primary: #6366f1; - --color-primary-hover: #4f46e5; + --color-primary: #818cf8; /* indigo-400 - lighter for better visibility on dimmed displays */ + --color-primary-hover: #6366f1; /* indigo-500 */ } } From 51811762605cc61daf619741845aecb7d836dd2f Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:27:16 +0100 Subject: [PATCH 07/16] feat: add configurable link color setting for article links - Add linkColor field to UserSettings interface - Add LINK_COLORS palette with 6 link-appropriate colors - Update ColorPicker to accept custom color arrays - Add Link Color setting UI after Reading Font setting - Apply link color as CSS variable in useSettings hook - Update reader CSS to use --link-color variable instead of --color-primary - Add link color preview in settings preview section - Default to indigo-400 (#818cf8) for better visibility on dimmed displays --- src/components/ColorPicker.tsx | 9 +++++---- src/components/Settings.tsx | 1 + .../Settings/ReadingDisplaySettings.tsx | 18 +++++++++++++++--- src/hooks/useSettings.ts | 3 +++ src/services/settingsService.ts | 2 ++ src/styles/base/variables.css | 8 ++++---- src/styles/components/forms.css | 7 +++++++ src/styles/components/reader.css | 2 +- src/utils/colorHelpers.ts | 10 ++++++++++ 9 files changed, 48 insertions(+), 12 deletions(-) diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx index 87f969c8..1a35acea 100644 --- a/src/components/ColorPicker.tsx +++ b/src/components/ColorPicker.tsx @@ -1,22 +1,23 @@ import React from 'react' -import { HIGHLIGHT_COLORS } from '../utils/colorHelpers' +import { HIGHLIGHT_COLORS, LINK_COLORS } from '../utils/colorHelpers' interface ColorPickerProps { selectedColor: string onColorChange: (color: string) => void + colors?: typeof HIGHLIGHT_COLORS } -const ColorPicker: React.FC = ({ selectedColor, onColorChange }) => { +const ColorPicker: React.FC = ({ selectedColor, onColorChange, colors = HIGHLIGHT_COLORS }) => { return (
- {HIGHLIGHT_COLORS.map(color => ( + {colors.map(color => (
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx index e7707e06..c8b2dce0 100644 --- a/src/components/Settings.tsx +++ b/src/components/Settings.tsx @@ -51,6 +51,7 @@ const DEFAULT_SETTINGS: UserSettings = { ttsDetectContentLanguage: true, ttsLanguageMode: 'content', ttsDefaultSpeed: 2.1, + linkColor: '#818cf8', } interface SettingsProps { diff --git a/src/components/Settings/ReadingDisplaySettings.tsx b/src/components/Settings/ReadingDisplaySettings.tsx index 034ee353..779159b0 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 } from '../../utils/colorHelpers' +import { hexToRgb, LINK_COLORS } from '../../utils/colorHelpers' interface ReadingDisplaySettingsProps { settings: UserSettings @@ -109,6 +109,17 @@ const ReadingDisplaySettings: React.FC = ({ setting +
+ +
+ onUpdate({ linkColor: color })} + colors={LINK_COLORS} + /> +
+
+
@@ -179,14 +190,15 @@ const ReadingDisplaySettings: React.FC = ({ setting fontFamily: previewFontFamily, fontSize: `${settings.fontSize || 21}px`, '--highlight-rgb': hexToRgb(settings.highlightColor || '#ffff00'), - '--paragraph-alignment': settings.paragraphAlignment || 'justify' + '--paragraph-alignment': settings.paragraphAlignment || 'justify', + '--link-color': settings.linkColor || '#818cf8' } as React.CSSProperties} >

The Quick Brown Fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

-

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

+

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. This is a sample link to demonstrate the link color.

diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts index ad637441..6d583fae 100644 --- a/src/hooks/useSettings.ts +++ b/src/hooks/useSettings.ts @@ -68,6 +68,9 @@ 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 || '#818cf8') + // Set paragraph alignment root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify') diff --git a/src/services/settingsService.ts b/src/services/settingsService.ts index 1c76f083..af307ef3 100644 --- a/src/services/settingsService.ts +++ b/src/services/settingsService.ts @@ -74,6 +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 + linkColor?: string // default: #818cf8 (indigo-400) } /** diff --git a/src/styles/base/variables.css b/src/styles/base/variables.css index e438b2ff..d70415f1 100644 --- a/src/styles/base/variables.css +++ b/src/styles/base/variables.css @@ -55,8 +55,8 @@ --color-text: #e4e4e7; /* zinc-200 */ --color-text-secondary: #a1a1aa; /* zinc-400 */ --color-text-muted: #71717a; /* zinc-500 */ - --color-primary: #818cf8; /* indigo-400 - lighter for better visibility on dimmed displays */ - --color-primary-hover: #6366f1; /* indigo-500 */ + --color-primary: #6366f1; /* indigo-500 */ + --color-primary-hover: #4f46e5; /* indigo-600 */ } /* Light theme */ @@ -95,8 +95,8 @@ --color-text: #e4e4e7; --color-text-secondary: #a1a1aa; --color-text-muted: #71717a; - --color-primary: #818cf8; /* indigo-400 - lighter for better visibility on dimmed displays */ - --color-primary-hover: #6366f1; /* indigo-500 */ + --color-primary: #6366f1; + --color-primary-hover: #4f46e5; } } diff --git a/src/styles/components/forms.css b/src/styles/components/forms.css index ce791677..49cee91c 100644 --- a/src/styles/components/forms.css +++ b/src/styles/components/forms.css @@ -43,6 +43,13 @@ word-wrap: break-word; text-align: var(--paragraph-alignment, justify); } +.preview-content a { + color: var(--link-color, #818cf8); + text-decoration: none; +} +.preview-content a:hover { + text-decoration: underline; +} .setting-select { width: 100%; padding: 0.5rem 1.75rem 0.5rem 0.5rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: 4px; color: var(--color-text); font-size: 1rem; } .setting-inline .setting-select { width: auto; min-width: 200px; flex: 1; } .setting-select:focus { outline: none; border-color: var(--color-primary); } diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css index 8d5fb5e3..23e8e1f4 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(--color-primary); text-decoration: none; } +.reader-markdown a { color: var(--link-color, #818cf8); 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; } diff --git a/src/utils/colorHelpers.ts b/src/utils/colorHelpers.ts index 418d3f6b..cb371389 100644 --- a/src/utils/colorHelpers.ts +++ b/src/utils/colorHelpers.ts @@ -15,3 +15,13 @@ export const HIGHLIGHT_COLORS = [ { name: 'Blue', value: '#3b82f6' }, // blue-500 { name: 'Purple', value: '#9333ea' } // purple-600 ] + +// Tailwind color palette for link colors +export const LINK_COLORS = [ + { 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: 'Purple', value: '#9333ea' } // purple-600 +] From 0dc9e37ff49a5814c574bc5da33ac3d3f772da4b Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:28:12 +0100 Subject: [PATCH 08/16] chore: change default link color to Sky Blue (#38bdf8) --- src/components/Settings.tsx | 2 +- src/components/Settings/ReadingDisplaySettings.tsx | 4 ++-- src/hooks/useSettings.ts | 2 +- src/services/settingsService.ts | 2 +- src/styles/components/forms.css | 2 +- src/styles/components/reader.css | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx index c8b2dce0..759b6229 100644 --- a/src/components/Settings.tsx +++ b/src/components/Settings.tsx @@ -51,7 +51,7 @@ const DEFAULT_SETTINGS: UserSettings = { ttsDetectContentLanguage: true, ttsLanguageMode: 'content', ttsDefaultSpeed: 2.1, - linkColor: '#818cf8', + linkColor: '#38bdf8', } interface SettingsProps { diff --git a/src/components/Settings/ReadingDisplaySettings.tsx b/src/components/Settings/ReadingDisplaySettings.tsx index 779159b0..f67f4e0e 100644 --- a/src/components/Settings/ReadingDisplaySettings.tsx +++ b/src/components/Settings/ReadingDisplaySettings.tsx @@ -113,7 +113,7 @@ const ReadingDisplaySettings: React.FC = ({ setting
onUpdate({ linkColor: color })} colors={LINK_COLORS} /> @@ -191,7 +191,7 @@ 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 || '#818cf8' + '--link-color': settings.linkColor || '#38bdf8' } as React.CSSProperties} >

The Quick Brown Fox

diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts index 6d583fae..0aec4c1e 100644 --- a/src/hooks/useSettings.ts +++ b/src/hooks/useSettings.ts @@ -69,7 +69,7 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U root.setProperty('--highlight-color-nostrverse', settings.highlightColorNostrverse || '#9333ea') // Set link color - root.setProperty('--link-color', settings.linkColor || '#818cf8') + root.setProperty('--link-color', settings.linkColor || '#38bdf8') // Set paragraph alignment root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify') diff --git a/src/services/settingsService.ts b/src/services/settingsService.ts index af307ef3..d6a57820 100644 --- a/src/services/settingsService.ts +++ b/src/services/settingsService.ts @@ -75,7 +75,7 @@ export interface UserSettings { // Text-to-Speech settings ttsDefaultSpeed?: number // default: 2.1 // Link color for article content - linkColor?: string // default: #818cf8 (indigo-400) + linkColor?: string // default: #38bdf8 (sky-400) } /** diff --git a/src/styles/components/forms.css b/src/styles/components/forms.css index 49cee91c..e0696e96 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, #818cf8); + color: var(--link-color, #38bdf8); text-decoration: none; } .preview-content a:hover { diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css index 23e8e1f4..6dc746d8 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, #818cf8); text-decoration: none; } +.reader-markdown a { color: var(--link-color, #38bdf8); 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; } From b2aa9c4179ba62eecdeaf158abc36f0d4d0882c1 Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:29:41 +0100 Subject: [PATCH 09/16] refactor: update preview link to use real article link instead of sample text --- src/components/Settings/ReadingDisplaySettings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Settings/ReadingDisplaySettings.tsx b/src/components/Settings/ReadingDisplaySettings.tsx index f67f4e0e..35258bd4 100644 --- a/src/components/Settings/ReadingDisplaySettings.tsx +++ b/src/components/Settings/ReadingDisplaySettings.tsx @@ -198,7 +198,7 @@ const ReadingDisplaySettings: React.FC = ({ setting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

-

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. This is a sample link to demonstrate the link color.

+

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

From 120409dc7b2877dd1f9bc582f9462563ce9e6afe Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:30:18 +0100 Subject: [PATCH 10/16] refactor: move link to 3rd paragraph and remove 4th paragraph from preview --- src/components/Settings/ReadingDisplaySettings.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Settings/ReadingDisplaySettings.tsx b/src/components/Settings/ReadingDisplaySettings.tsx index 35258bd4..0b872220 100644 --- a/src/components/Settings/ReadingDisplaySettings.tsx +++ b/src/components/Settings/ReadingDisplaySettings.tsx @@ -197,8 +197,7 @@ const ReadingDisplaySettings: React.FC = ({ setting

The Quick Brown Fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

-

Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

-

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

+

Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

From ee7e88bc6297d54296ae4fbfec83a7904c4ffaa9 Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:31:15 +0100 Subject: [PATCH 11/16] refactor: use relative path for preview link to work on localhost --- src/components/Settings/ReadingDisplaySettings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Settings/ReadingDisplaySettings.tsx b/src/components/Settings/ReadingDisplaySettings.tsx index 0b872220..bd6a6ff6 100644 --- a/src/components/Settings/ReadingDisplaySettings.tsx +++ b/src/components/Settings/ReadingDisplaySettings.tsx @@ -197,7 +197,7 @@ const ReadingDisplaySettings: React.FC = ({ setting

The Quick Brown Fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

-

Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

+

Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

From 36659ad2cc1ec6156a5d27c2064dadcdf3909762 Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:32:09 +0100 Subject: [PATCH 12/16] fix: remove unused LINK_COLORS import from ColorPicker --- src/components/ColorPicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx index 1a35acea..35658dbb 100644 --- a/src/components/ColorPicker.tsx +++ b/src/components/ColorPicker.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { HIGHLIGHT_COLORS, LINK_COLORS } from '../utils/colorHelpers' +import { HIGHLIGHT_COLORS } from '../utils/colorHelpers' interface ColorPickerProps { selectedColor: string From 286d5df5b81b677de30f585da6da82ab6453b7a2 Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:34:46 +0100 Subject: [PATCH 13/16] 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; } From f41cb4b17ef259fa2a740c3585aa058fe6840173 Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:35:49 +0100 Subject: [PATCH 14/16] 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 +] From 55d14d9e7703333e3b5ceb9385f22df46019038b Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:38:17 +0100 Subject: [PATCH 15/16] 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 = ({ 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 (
@@ -120,8 +130,8 @@ const ReadingDisplaySettings: React.FC = ({ setting
onUpdate({ linkColor: color })} + selectedColor={currentLinkColor} + onColorChange={handleLinkColorChange} colors={linkColors} />
@@ -198,8 +208,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.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} >

The Quick Brown Fox

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) } /** From 85d256b47b4f9bd32aac1420be5a0ad89c732948 Mon Sep 17 00:00:00 2001 From: Gigi Date: Fri, 7 Nov 2025 22:39:22 +0100 Subject: [PATCH 16/16] fix: update preview link color when link color setting changes - Set --color-link directly in preview inline styles based on current theme - Preview now shows the correct link color for the active theme - Link color updates immediately when changed in settings --- src/components/Settings/ReadingDisplaySettings.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Settings/ReadingDisplaySettings.tsx b/src/components/Settings/ReadingDisplaySettings.tsx index 483f51fe..2767a921 100644 --- a/src/components/Settings/ReadingDisplaySettings.tsx +++ b/src/components/Settings/ReadingDisplaySettings.tsx @@ -208,8 +208,9 @@ 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': isDark + ? (settings.linkColorDark || '#38bdf8') + : (settings.linkColorLight || '#3b82f6') } as React.CSSProperties} >

The Quick Brown Fox