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:
38
apps/web/src/store/themeStore.ts
Normal file
38
apps/web/src/store/themeStore.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
'use client'
|
||||
|
||||
import { create } from 'zustand'
|
||||
|
||||
export interface AccentPreset {
|
||||
name: string
|
||||
accent: string
|
||||
rgb: string
|
||||
}
|
||||
|
||||
export const ACCENT_PRESETS: AccentPreset[] = [
|
||||
{ name: 'Лайм', accent: '#c8ff00', rgb: '200,255,0' },
|
||||
{ name: 'Синий', accent: '#00D4FF', rgb: '0,212,255' },
|
||||
{ name: 'Розовый', accent: '#FF2D78', rgb: '255,45,120' },
|
||||
{ name: 'Фиолет', accent: '#A855F7', rgb: '168,85,247' },
|
||||
{ name: 'Оранж', accent: '#FF6B35', rgb: '255,107,53' },
|
||||
{ name: 'Минт', accent: '#00FFB2', rgb: '0,255,178' },
|
||||
]
|
||||
|
||||
const STORAGE_KEY = 'pm_accent'
|
||||
|
||||
interface ThemeStore {
|
||||
accentIdx: number
|
||||
setAccent: (idx: number) => void
|
||||
}
|
||||
|
||||
export const useThemeStore = create<ThemeStore>((set) => ({
|
||||
accentIdx: (() => {
|
||||
if (typeof window === 'undefined') return 0
|
||||
const saved = localStorage.getItem(STORAGE_KEY)
|
||||
const idx = saved !== null ? parseInt(saved, 10) : 0
|
||||
return idx >= 0 && idx < ACCENT_PRESETS.length ? idx : 0
|
||||
})(),
|
||||
setAccent: (idx) => {
|
||||
if (typeof window !== 'undefined') localStorage.setItem(STORAGE_KEY, String(idx))
|
||||
set({ accentIdx: idx })
|
||||
},
|
||||
}))
|
||||
Reference in New Issue
Block a user