891: Light and Dark Mode
Syntax - Tasty Web Development Treats
Wes Bos
4.9 • 1.1K Ratings
🗓️ 7 April 2025
⏱️ 27 minutes
🧾️ Download transcript
Summary
Light mode? Dark mode? Scott and Wes break down the best ways to implement theme switching in CSS, from prefers-color-scheme to manual overrides. Plus, tips on handling shadows, icons, and the dreaded flash of dark mode!
Show Notes
- 00:00 Welcome to Syntax!
- 01:05 Brought to you by Sentry.io.
- 02:06 Light and dark mode, things to consider.
- 02:31 Light and dark mode from scratch.
- drop-in.css.
- 04:41 Calculations vs assigned color.
- 05:32 color-mix and relative color.
- 08:15 Foreground and background variables.
- –tint-or-shade: color-mix(in oklab, var(–fg), transparent 95%);
- –tint-or-shade-harder: color-mix(in oklab, var(–fg), transparent 90%);
- 09:13 Setting color scheme.
- 12:38 light-dark function in CSS.
- 15:48 Manually setting dark mode.
- 19:52 Shoehorning in dark mode.
- 22:25 Other things to consider.
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Transcript
Click on a timestamp to play from that location
| 0:00.8 | Welcome to Syntax. Today on Monday, we're going to be talking about color schemes. |
| 0:06.0 | We're going to be talking about light and dark mode in 2025. Now that some of the features that |
| 0:11.7 | arrived in the browser are continuing to have more and more support every single day. |
| 0:17.6 | We're in a much better place now. I'm really excited about this stuff. We're in a much, |
| 0:22.4 | much better place. In fact, some of these tips and techniques are things that you can use |
| 0:26.3 | today to add effortless light and dark mode to your apps. And you know me, I'm a big fan of that. |
| 0:32.7 | So to kick things off, my name is Scott Tolensky. I'm a developer from Denver. With me as always his West boss. What's up, Wes? Hey, I'm excited about all of the slight dark mode stuff. It's, |
| 0:42.1 | I think, I feel like it's finally out of space where it works really well. You don't have to do a ton of |
| 0:48.0 | hacks. No, you know, I was maybe a little skeptical of some of these things when they first launched, like their utility, if I would use them. And then once I got, you know, comfortable using these tools, |
| 0:58.8 | it all just became way easier for me overall. And I think it can be way easier for you as well. |
| 1:05.6 | And you know what else can be easier for you is fixing your app when it goes down or even |
| 1:10.5 | knowing if it went down at all |
| 1:12.0 | because Century 8 now has uptime monitoring as in they can pin you the moment your app goes down |
| 1:18.3 | that way you spend no time wondering or having to check to make sure your app is up or even worse |
| 1:24.1 | not even knowing that it's down because if you want people to give you money |
| 1:28.5 | for your application or heck, you just want people to use it without being upset at you, |
| 1:32.2 | well, you're going to now want to make sure that that thing is actually online. |
| 1:35.9 | Man, it's so many neat features in Century lately, whether that it's uptime monitoring, |
| 1:40.1 | performance tracking, or session replay where you could actually see a video, a scrubable video |
| 1:47.6 | of the user clicking around your site and getting angry when your app isn't working. |
| 1:53.1 | So check it out at sentry.io.4.S. Syntax. Sign up today using the coupon code, |
| 1:58.4 | Tasty Treat. |
... |
Please login to see the full transcript.
Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.
Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.
Copyright © Tapesearch 2025.