Add accent color picker to customize board theme 🎨
File: client/src/pages/Dashboard.jsx
Board is always purple 💀
Let users pick their own accent color fr!!
Fix:
const [accent, setAccent] = useState(
localStorage.getItem('accent_color') || '#7F77DD'
)
const ACCENTS = [
'#7F77DD', '#E85D75', '#27AE60',
'#F39C12', '#2980B9', '#E74C3C',
'#1ABC9C', '#E67E22'
]
// inject as CSS variable:
useEffect(() => {
document.documentElement.style
.setProperty('--accent', accent)
localStorage.setItem('accent_color', accent)
}, [accent])
// add picker in navbar:
{ACCENTS.map(color => ( setAccent(color)} style={{ background: color }} className={w-4 h-4 rounded-full transition ${accent === color ? 'ring-2 ring-white' : ''}} /> ))}
~15 lines! localStorage ✅
No backend needed 🎯
Makes app feel truly personal!! 🔥
Add accent color picker to customize board theme 🎨
File: client/src/pages/Dashboard.jsx
Board is always purple 💀
Let users pick their own accent color fr!!
Fix:
const [accent, setAccent] = useState(
localStorage.getItem('accent_color') || '#7F77DD'
)
const ACCENTS = [
'#7F77DD', '#E85D75', '#27AE60',
'#F39C12', '#2980B9', '#E74C3C',
'#1ABC9C', '#E67E22'
]
// inject as CSS variable:
useEffect(() => {
document.documentElement.style
.setProperty('--accent', accent)
localStorage.setItem('accent_color', accent)
}, [accent])
// add picker in navbar:
{ACCENTS.map(color => ( setAccent(color)} style={{ background: color }} className={
w-4 h-4 rounded-full transition ${accent === color ? 'ring-2 ring-white' : ''}} /> ))}~15 lines! localStorage ✅
No backend needed 🎯
Makes app feel truly personal!! 🔥