Skip to content

Add accent color picker to customize board theme 🎨 #456

Description

@anoopcodehack

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!! 🔥

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions