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:
2026-04-25 12:59:58 +03:00
parent 0097fb5183
commit 24856a644f
21 changed files with 187 additions and 96 deletions

View 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 })
},
}))