Loading…
17
Old school hex codes vs CSS variables for dark themes
I used to hardcode every dark mode shade with hex values like #1a1a2e for backgrounds and #16213e for panels, but after a 60 page redesign last fall I switched everything to CSS custom properties. The change happened when I realized I was updating the same navy blue across 14 different files just to fix a contrast issue on mobile. Now I define a palette in one place and use semantic names like - bg-surface or - text-muted, which feels SO much easier to maintain. Is that just a crutch for lazy devs, or is there a real downside to relying on variables instead of locking in the exact values first?
1 comments
Log in to join the discussion
Log In1 Comment
nathang675d ago
How many semantic names did you end up with before it started feeling like its own mess though? Like at some point dont you just have 40 variables and now you gotta remember which one is which instead of just knowing #16213e is the panel?
And did you hit any spots where a one off color was fine to just hardcode instead of making a whole new variable for it?
2