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

@@ -55,16 +55,17 @@ export default function AudioBackground() {
ctx.fillStyle = '#0a0a0f'
ctx.fillRect(0, 0, W, H)
const accentRgb = document.documentElement.style.getPropertyValue('--accent-rgb') || '200,255,0'
const diag = Math.hypot(W, H)
const base = diag * 0.55
// Lime orb — bass driven, top-left
// Accent orb — bass driven, top-left
const r1 = base * (0.75 + smoothBass * 0.55 + breathe)
const a1 = 0.055 + smoothBass * 0.07
const g1 = ctx.createRadialGradient(W * 0.18, H * 0.08, 0, W * 0.18, H * 0.08, r1)
g1.addColorStop(0, `rgba(200,255,0,${a1})`)
g1.addColorStop(0.45, `rgba(200,255,0,${a1 * 0.28})`)
g1.addColorStop(1, 'rgba(200,255,0,0)')
g1.addColorStop(0, `rgba(${accentRgb},${a1})`)
g1.addColorStop(0.45, `rgba(${accentRgb},${a1 * 0.28})`)
g1.addColorStop(1, `rgba(${accentRgb},0)`)
ctx.fillStyle = g1
ctx.fillRect(0, 0, W, H)