diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx index 87f969c8..35658dbb 100644 --- a/src/components/ColorPicker.tsx +++ b/src/components/ColorPicker.tsx @@ -4,19 +4,20 @@ import { HIGHLIGHT_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..81b2bfc0 100644 --- a/src/components/Settings.tsx +++ b/src/components/Settings.tsx @@ -51,6 +51,8 @@ const DEFAULT_SETTINGS: UserSettings = { ttsDetectContentLanguage: true, ttsLanguageMode: 'content', ttsDefaultSpeed: 2.1, + linkColorDark: '#38bdf8', + linkColorLight: '#3b82f6', } interface SettingsProps { diff --git a/src/components/Settings/ReadingDisplaySettings.tsx b/src/components/Settings/ReadingDisplaySettings.tsx index 034ee353..2767a921 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_DARK, LINK_COLORS_LIGHT } from '../../utils/colorHelpers' interface ReadingDisplaySettingsProps { settings: UserSettings @@ -14,6 +14,23 @@ 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 currentLinkColor = isDark + ? (settings.linkColorDark || '#38bdf8') + : (settings.linkColorLight || '#3b82f6') + + const handleLinkColorChange = (color: string) => { + if (isDark) { + onUpdate({ linkColorDark: color }) + } else { + onUpdate({ linkColorLight: color }) + } + } return (
@@ -109,6 +126,17 @@ const ReadingDisplaySettings: React.FC = ({ setting
+
+ +
+ +
+
+
@@ -179,14 +207,16 @@ 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', + '--color-link': isDark + ? (settings.linkColorDark || '#38bdf8') + : (settings.linkColorLight || '#3b82f6') } 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.

+

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.

diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts index ad637441..73185bb4 100644 --- a/src/hooks/useSettings.ts +++ b/src/hooks/useSettings.ts @@ -68,6 +68,12 @@ 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 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 1c76f083..f0fd2e4f 100644 --- a/src/services/settingsService.ts +++ b/src/services/settingsService.ts @@ -74,6 +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 (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 ce791677..6fec30e8 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(--color-link); + 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 40d4c2e9..4841788d 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: 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: 1.75rem; + 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: 1.5rem; + 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: 1.25rem; + 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: 1rem; + margin-top: 3rem; margin-bottom: 0.5rem; color: var(--color-text); } @@ -111,12 +111,13 @@ font-size: 1rem; /* text-base */ font-weight: 600; line-height: 1.4; - margin-top: 1rem; + margin-top: 3rem; 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: 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 { list-style-type: disc; @@ -159,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(--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; } diff --git a/src/utils/colorHelpers.ts b/src/utils/colorHelpers.ts index 418d3f6b..6796573d 100644 --- a/src/utils/colorHelpers.ts +++ b/src/utils/colorHelpers.ts @@ -15,3 +15,23 @@ export const HIGHLIGHT_COLORS = [ { name: 'Blue', value: '#3b82f6' }, // blue-500 { name: 'Purple', value: '#9333ea' } // purple-600 ] + +// 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: '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 +]