Kyle Pope
e5b6725081
The swatches were added to SettingsPage but useTheme only had 5 presets, so selecting the new colors saved to DB but never applied CSS variables. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { useSettings } from './useSettings';
|
|
|
|
const ACCENT_PRESETS: Record<string, { h: number; s: number; l: number }> = {
|
|
cyan: { h: 187, s: 85.7, l: 53.3 },
|
|
blue: { h: 217, s: 91.2, l: 59.8 },
|
|
purple: { h: 258, s: 89.5, l: 66.3 },
|
|
orange: { h: 21, s: 94.6, l: 53.3 },
|
|
green: { h: 142, s: 70.6, l: 45.3 },
|
|
red: { h: 0, s: 84.2, l: 60.2 },
|
|
pink: { h: 330, s: 81.2, l: 60.4 },
|
|
yellow: { h: 48, s: 83.3, l: 47.5 },
|
|
};
|
|
|
|
export function useTheme() {
|
|
const { settings } = useSettings();
|
|
|
|
useEffect(() => {
|
|
if (!settings?.accent_color) return;
|
|
|
|
const preset = ACCENT_PRESETS[settings.accent_color];
|
|
if (preset) {
|
|
document.documentElement.style.setProperty('--accent-h', preset.h.toString());
|
|
document.documentElement.style.setProperty('--accent-s', `${preset.s}%`);
|
|
document.documentElement.style.setProperty('--accent-l', `${preset.l}%`);
|
|
}
|
|
}, [settings?.accent_color]);
|
|
|
|
return {
|
|
accentColor: settings?.accent_color || 'cyan',
|
|
presets: ACCENT_PRESETS,
|
|
};
|
|
}
|