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:
@@ -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)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user