feat: runtime accent color picker with 6 presets
Replace all hardcoded #c8ff00 / rgba(200,255,0,...) with CSS custom properties (--accent, --accent-rgb) so the accent color updates live. Add themeStore (Zustand + localStorage) with 6 presets (Лайм, Синий, Розовый, Фиолет, Оранж, Минт). Add ThemeApplier component that syncs CSS vars on load. Add color picker UI section in ExtraTab. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
16
apps/web/src/components/ThemeApplier.tsx
Normal file
16
apps/web/src/components/ThemeApplier.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
import { useThemeStore, ACCENT_PRESETS } from '@/store/themeStore'
|
||||
|
||||
export default function ThemeApplier() {
|
||||
const { accentIdx } = useThemeStore()
|
||||
|
||||
useEffect(() => {
|
||||
const preset = ACCENT_PRESETS[accentIdx] ?? ACCENT_PRESETS[0]
|
||||
document.documentElement.style.setProperty('--accent', preset.accent)
|
||||
document.documentElement.style.setProperty('--accent-rgb', preset.rgb)
|
||||
}, [accentIdx])
|
||||
|
||||
return null
|
||||
}
|
||||
Reference in New Issue
Block a user