Effortless Light and Dark Mode × Theme Styling

In this episode of Syntax, Wes and Scott talk about the latest CSS theming properties and techniques for better controlling light and dark modes, as well as creating comprehensive color systems for applications and websites. Make sure to check out the video version of this episode for practical code examples, and explanations of light/dark function, CSS variables, meta tags for theme colors, accent color, color mix, and upcoming features like style queries and color contrast.

Show Notes

(00:00) - Welcome to Syntax!
(03:45) - theme-color
(10:12) - color-scheme
(15:14) - light-dark()
(17:44) - How to force light or dark mode
(23:03) - Live debugging box-shadow
(28:05) - color-mix()
(29:53) - accent-color
(31:27) - Relative color syntax
(35:49) - Style queries and color-contrast()

------------------------------------------------------------------------------
Hit us up on Socials!

#webdevelopment #webdeveloper #javascript

[petecapecod]

We are all living the CSS dream now! 🎆 Pretty much no @prefers-color media queries, I'll take it.
I'm excited to start using light-dark() in production now. Big time win! 🥳

[rossrobino]

Great episode, you can put a media attribute on your favicon link tag and set prefers color scheme on it to swap it

[feldinho]

Btw, the meta tags also accept the new `light-dark` css function. Where `light-dark(red, yellow)` result in the theme color being red in light mode and yellow in dark mode.

I hope the issue with icons having poor contrast depending on the browser theme color could be addressed with something like the upcoming `color-contrast` function, where it evaluates the best color to show based on a reference color instead of the light/dark modes. That could potentially be used inside an SVG favicon to compare the available colors against the `Canvas` color, but that's just speculation on my part.

[alwayzsmarter]

10:00 for some reason this doesn't change my safari or chrome bar color but when I overflow scroll or whatever my page I can see those colors correctly shown for light vs dark like in background of page but still not the bar

[abdellahcodes]

Just in time for Sentry Docs dark mode

[HampusR]

I'm a bit sad. This was the first time I really felt that it's no longer a podcast, but a youtube channel that also provides audio. A lot of "now this, now that" that is impossible to follow along to unless you have the video. I understand that you need to evolve, but as someone who listens riding a bike, the video will always be impossible to look at.