aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-02-23 16:04:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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.)
This commit is contained in:
Gigi
2025-11-07 22:35:49 +01:00
parent 286d5df5b8
commit f41cb4b17e
5 changed files with 35 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Settings.tsx
View File

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

32
src/components/Settings/ReadingDisplaySettings.tsx
View File

@@ -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>