891: Light and Dark Mode

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. 18:43 The challenges with shared caching. 19:33 Tailwind CSS implementation. Tailwind dark-mode. 19:52 Shoehorning in dark mode. 22:25 Other things to consider. 22:28 Color contrast. Lea Verou contrast-color. 24:39 Logos. 25:22 Icons and images. 26:20 Accessibility. Polypane. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Scott Tolinski?

  Welcome to Syntax. Today on Monday, we're going to be talking about color schemes. We're going to be talking about light and dark mode in 2025. Now that some of the features that arrived in the browser are continuing to have more and more support every single day.

• 0:17Wes Bos?

  We're in a much better place now. I'm really excited about this stuff.

• 0:21Scott Tolinski?

  We're in a much, much better place. In fact, some of these tips and techniques are things that you can use today to add effortless light and dark mode to your apps. And you know me, I'm a big fan of that. So to kick things off, my name is Scott Tolinski. I'm a developer from Denver. With me as always is Wes Boss. What's up Wes?

• 0:38Wes Bos?

  Hey, I'm excited about all of this light, dark mode stuff. It's, 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 hacks.

• 0:48Scott Tolinski?

  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, it all just became way easier for me overall. And I think it can be way easier for you as well. And you know what else can be easier for you is fixing your app when it goes down, or even knowing if it went down at all, because Sentry now has uptime monitoring, as in, they can ping you the moment your app goes down. That way, you spend no time wondering or having to check to make sure your app is up, or even worse, not even knowing that it's down. Because if you want people to give you money for your application, or heck, you just want people to use it without being upset at you,

• 1:32Scott Tolinski?

  well, you're gonna want to make sure that that thing is actually online. Man, it's so many neat features in Sentry lately, whether that's uptime monitoring, performance tracking, or session replay, where you could actually see a video, a scrubbable video of the user clicking around your site and getting angry when your app isn't working. So check it out at sentry.io/syntax. Sign up today using the coupon code TASTYTREAT.

• 2:05Scott Tolinski?

  Wes, let's get into it. Light and dark mode 2025. What do you have to consider?

• 2:12Wes Bos?

  Yeah, let's talk about how to do light, dark mode from scratch and all of the things available to us. And then we'll talk about how do you shoehorn a website that doesn't have dark mode into it, as well as how to manually override the system settings of it. Because sometimes people want to flip them on. So first of all, from scratch, we're starting a brand new website. Let's talk about how do we set up the CSS? And there's, there's kind of a lot of ways to go about this. But what I've been doing, and I'm curious to see what your thoughts are on this, is

• 2:45Scott Tolinski?

  Yes.

• 2:45Wes Bos?

  You set up all your like color variables first, right? You have your, your white, your black, your green, your, your, your grays. You can have multiple variants of those if you want, right? Like you can go through the whole Tailwind color scheme. I generally just kind of pick my colors and name them white, green, black, whatever. And then I will set up variables off, based off of those, right? So you foreground, background, primary, secondary. I, I don't know, sometimes I dip into like, like button color, but then I don't know if I should be doing that or not. And those variables are simply just referencing the other variables, which are white, green, black, pink. What are your thoughts on that?

• 3:26Scott Tolinski?

  Yeah, I tend to do it the same way. I'll have a link to my drop-in CSS, which is like the CSS starter I'm using for most things these days.

• 3:35Wes Bos?

  Yeah.

• 3:35Scott Tolinski?

  It's not perfect. It's still, you know, being tweaked. But the way I tend to do it is, yeah, I define my color palette with actual color names. Yellow, orange, red, pink, blue, whatever. I then define the foreground and background using the light, dark functions. Then I define some tints and shades that can go along with that. Now, that's for a very simple color palette. On the syntax site, we have it broken out into, you know, HSL or HS variables. And that way we can create.

• 4:09Scott Tolinski?

  I think it's HSI. It might be OKLCH, OKLCH, where we're tweaking the lightness value or whatever. And then that way you can be a little bit more flexible with it. It can be a little bit more programmatic. It's a lot of variables going that way. So it really depends on like the type of project and how many of those tints and shades and versions of colors I need. Sometimes like in my drop in one, the color system I have as the default palette is just like six hex values. And that can be as much as you need sometimes. And other times you need a lot more than that.

• 4:41Wes Bos?

  Yeah, I'm always torn between trying to calculate some things and simply just using the straight up color. I think for variations, I like to calculate it. You know, if you have something that is blue and you want to have like a border around. A button is a really good example, right? I may have like six or seven different button colors. And the border of that button is simply just going to be calculated based on the button's background color and to be either a little bit lighter or a little bit darker. And so if it's red, you'll have a little bit of a darker red border around it. And that's really nice because then you don't have to go and make a million variations.

• 5:24Wes Bos?

  But that can kind of get out of control really quickly if you if you go overboard on all the different calculations.

• 5:32Scott Tolinski?

  Yeah, but now with things like color mix and relative color, to which the degree at which those are supported, which actually I haven't checked on relative color in a while. Because Can I Use Color Mix itself has had pretty good support for a little bit. So Color Mix is available 91% of browsers globally. It's available in Firefox going back to May of 2023. So you can use Color Mix. But Relative Color has always been lagging behind. Relative Color is in all of the browsers with 90% support. So 90 versus 91, that's actually, yeah, that's a lot better than I was expecting. So with Relative Color and Color Mix, if you find yourself being able to use those

• 6:17Scott Tolinski?

  functions based on what you need to support, those are well worth your time for calculating colors and making a programmatic scheme. In fact, I'm probably going to use these in the new syntax site.

• 6:27Wes Bos?

  Totally. I've been using them on for probably about a year now. And I've been really happy with it because what they do is Relative Color will allow you to take. In any color, let's say you have a hex code and then you can break it out into RGB, HSLA, okay, what else?

• 6:48Scott Tolinski?

  LCH.

• 6:49Wes Bos?

  LCH. And basically it just takes the color, slaps it into those different channels, right? The red, the green, the blue, or the hue, the saturation, lightness, whatever format you're using. And then you can use calc to up or down each of those. So if you want to just increase the lightness slightly, or if you want to simply just take that value and make the opacity 50%, it's very doable. And then color mix is simply you just take two colors and then you provide it how much you want to mix them. Is that right?

• 7:22Scott Tolinski?

  Yeah. Yeah, you can, you can do that and you can mix colors with transparent as well, things like that. I have a, I have a snippet in here, I'll have in the show notes that I use for tinting and shading, which simply just mixes the foreground color, which we'll talk about in a second, with transparent for either 95 or 90%. It's a, I have tint, tint or shade and tint or shade harder. So if you're in light or dark mode, it's going to either tint or shade it based on what you need. So that way it gives you like a slightly lighter line or even a, even less slightly lighter line each time. So.

• 7:58Wes Bos?

  Those are, those are probably simpler if you're simply trying to mix something with, with white, black or transparent. Yeah, right?

• 8:07Scott Tolinski?

  Correct.

• 8:07Wes Bos?

  You want to make it lighter, darker. And then if you need a little bit more control over each of the channels, you want to, you want to reach for a relative color.

• 8:15Scott Tolinski?

  Yeah, totally. So one thing that I like to do, like I mentioned here, is I like to have foreground and background variables, which kind of connects directly to the color and background color properties. You know, in CSS, I always found that to be such a weird thing that text color was color and background was background color.

• 8:36Wes Bos?

  Yeah.

• 8:36Scott Tolinski?

  And, and so for me, I've kind of always stayed with this foreground and background because to me, having those two tightly related in the way that they're named, just makes a lot of sense to me, right? So I use FGBG for any time I want to have a foreground or a background variable.

• 8:55Wes Bos?

  I like that. That makes a lot of sense to me. You can kind of think about it as like, in dark mode, your background will be black, your text will be white and vice versa. And obviously, they are not always going to be like that. You can choose whatever colors you want, but that's a nice way for me to think about it.

• 9:12Scott Tolinski?

  Totally.

• 9:13Wes Bos?

  Let's talk about actually setting it. So on the root of your document, or really on any element, you set what's called a color scheme property in CSS. And that will allow us to specify which color schemes are available. And you can, in this case, you probably will be setting color scheme light/dark. But there are some other options. What is this? Normal? What does that do?

• 9:37Scott Tolinski?

  I think normal is just the, actually, that's a good question. I was gonna say it's just the normal behavior, but how does that differ from just?

• 9:43Wes Bos?

  Normal indicates that the element can be rendered using the page's color scheme settings. If the page does not have a color scheme set, the element is rendered. Okay, so I think that would be sort of not, is that unsetting it? Because the kind of cool thing about color scheme is that you can set it on the entire page. But if you have one element that you want to be dark mode or light mode, you can always just set it on that element and then your values will flip.

• 10:12Scott Tolinski?

  Yeah. So like, for instance, just to toss this out there, if you on your root of your document or any element, you set color scheme dark, that's going to change the default CSS for your site to have a black background and white text. So it's actually changing the default CSS where color scheme light is kind of how it's always been. But if you use something color scheme light, then a space, and then dark, that is going to respect the user's light and dark mode settings. So on their computer, on their phone, if they have their appearance mode set to dark, then you will get that black background, white text automatically. This is also known as the system color scheme.

• 10:55Scott Tolinski?

  You'll typically see this on like, in an app where it says light/dark mode. It'll be like, light/dark system is often the way that you'll see that to say like, just use whatever the whole system is. Or force this dark or force this light and you can do that flow simply by changing the color scheme, light or color scheme dark here. And I usually make a class for that, like mode dark or just dark, where it sets the color scheme to only dark and then updates the background and the color. So that way those things get updated when whenever you change that color scheme.

• 11:30Wes Bos?

  Yeah, it's a lot of I've seen people use data attributes, you know, like data dash color or data dash scheme, you can add a class to it, or you could simply inline the value. I probably wouldn't inline it because then you're you're dealing with weird specificity issues. If you want to later override that thing.

• 11:50Scott Tolinski?

  Yeah.

• 11:50Wes Bos?

  Once you have color scheme, light, dark set in your CSS, you can use a number of different ways to set your your colors, right? There's the the way we've had for a while is the prefers color scheme media query. And that's always been a little bit verbose, but that will allow you to write a media query and attach it to a specific selector. And in that, generally what you're doing is you're simply just flipping variables, you know, you're setting your foreground to to dark and your background to light or vice versa. But you can, in that case, you can do anything you want, which may be other things like adjusting text shadow or box shadow or really

• 12:33Wes Bos?

  maybe swapping out like a background image that for for a different version.

• 12:36Scott Tolinski?

  Yeah, totally. But now we have the light dark function in CSS. It's light hyphen dark and it's a function. So that means you got parentheses and everything like that. So it's a light dark function and the first is it argument or parameter? Man, this always gets me.

• 12:53Wes Bos?

  The parameter is is what the function is defined as and the argument is the actual value. So I always think of parameter as a placeholder, argument is actual.

• 13:04Scott Tolinski?

  Okay, so the first argument is the light, is the first argument or first parameter?

• 13:10Wes Bos?

  Yeah. And when you're using it, it's an argument. When you're defining it, it's a parameter.

• 13:15Scott Tolinski?

  Man, that's my specificity right there. I cannot get that straight.

• 13:20Scott Tolinski?

  Either way, the first value, the first value in the function is going to be what is going to be used when it's in color scheme light. And the second value is going to be what it uses when it's in color scheme dark. And this can be super handy for like, so you know, the default for color scheme dark is to have a black background with white text. But if you wanted this to be your own colors here, you could do something like the BG is light hyphen dark, where you first have a lighter gray, then a darker gray. And the opposite of that with the foreground, where it's like light, dark. And in light mode, you want that foreground color to be dark. So you have the dark color and the second value is going to be your light color.

• 14:00Wes Bos?

  You're making my head spin, but essentially it's just-

• 14:02Scott Tolinski?

  We have code in the, we have code in the show notes. Okay, folks.

• 14:05Wes Bos?

  Function that flips based on light or dark. It's shorthand. It's really simple. You don't have to throw a media query in there and it is well supported in all the browsers now, which is very nice. You can only pass it colors, which I think is okay, but in some cases, like a box shadow is something you often have to take off in, in dark mode. If that's the case, or if you want to adjust, if for some reason you want to adjust the padding or the spacing or the, the walk of some text shadow or box shadow, you cannot use values in that case. So if that was the case, you probably would have to, that's a good question. Like, how would you-

• 14:47Scott Tolinski?

  You reach for a first color scheme.

• 14:49Wes Bos?

  Oh, yeah. Oh, yeah. You just, you do a proper preferred color scheme and then you're-

• 14:54Scott Tolinski?

  Proper preferred color scheme. Cause it's a media query. You can do anything with that. You can throw anything in that. And for anybody out there, I think we harp on this enough. If you're in dark mode, don't make your shadows white. That makes no sense. Have you ever seen a white shadow? Like, come on.

• 15:09Wes Bos?

  It looks awful and it's kind of a bummer because like you're sort of seeing shadows go away in a lot of applications, right? Like I'm just looking Riverside, no shadows, MDN, no shadows, GitHub, no shadows. And the shadows have kind of been stripped away because they don't look good at all. And then what a lot of people do is they they go sort of like gray mode or brown mode. Like just light enough so that they they can still throw a shadow on it. But that's an even bigger pet peeve is when your your dark mode is too brown. Doesn't look look very good. Not a fan of that.

• 15:46Scott Tolinski?

  Not not a fan of that at all.

• 15:48Wes Bos?

  All right. So let's talk about manually setting dark mode. You can manually set dark mode by simply putting a color scheme dark on an element and that will force it. Generally, you want to respect your users' settings. So what their their OS has been set to. But if somebody wants to have a toggle for for dark mode, that's how you now set it. You simply set color scheme dark in your CSS on either the root or on a specific element. Like I use missive and I use the sidebar in dark mode and I use the authoring experience in light mode. So that's a very easy way to do it.

• 16:30Wes Bos?

  You simply just set it on the sidebar and then all the variables will sort of trickle down for each of their light and dark modes.

• 16:37Scott Tolinski?

  Yeah.

• 16:38Wes Bos?

  One thing with manually setting dark mode or light mode via JavaScript is that when the page loads, you have to apply that that class or you have to apply something to your markup so that it kicks in. And we talked about this on the syntax website as well. We tried to server render it, but then that then the dark mode class was getting into the the cache and it was being shared. Or in our case, the theme was getting set. If somebody had a theme set and they visited a page, then the cache would reflect that theme for that page. So that was a bit of a an issue. So the way that you can set

• 17:21Wes Bos?

  Dark mode is you you use JavaScript and you can check if somebody has saved a value in local storage. You can use window dot match media to to inherit their sort of light or dark mode default. So if someone has not said it, then you'll get that. Otherwise, you can put it into local storage. But when the page loads, you have the split second where the CSS is loaded, but the JavaScript has not yet run. And then you'll get a flash of light mode and then it'll flip to dark. So the only way around that that I've ever found is with some blocking JavaScript. So you do a very short little script tag before

• 18:01Wes Bos?

  any of your HTML renders. And what that will do is it will check if local storage has that value set, and then you can put it on the HTML before the any of the CSS has been applied to it. It is blocking, so it stops everything else from running, but it is fast enough that you don't get that little flicker.

• 18:21Scott Tolinski?

  Yeah, well, you could also set the color scheme via CSS in server side rendering so that it's there on the initial load if you have it saved in a cookie. Like if you have that parameter saved into a cookie, you could then have that available on the server to get written so that it's a part of that initial HTML payload as well if you're doing server side rendering that way.

• 18:45Wes Bos?

  But if you're if you are getting into caching, especially if you're getting into sharing caching, then it's a pain. That's what happened on the syntax website. Like, Ben had like some weird wave race theme set on the syntax website, and he was like the first person to visit a page, like the cache clears every like five minutes or whatever. And then randomly, some pages would have the wave race theme. What is going on here? And it was because we were server rendering that value. So if you are re-rendering every single time someone visits a page, you're not doing any caching, you're not sharing caching between users. Yeah, that's probably fine. But caching ruins my life.

• 19:30Scott Tolinski?

  Yeah, I know. Right? No kidding.

• 19:32Wes Bos?

  Tailwind CSS has a really good snippet for how to get that JavaScript in there. And Tailwind CSS obviously has their own implementation of dark mode as well. They work the same way, but you can simply just prefix your values with dark colon, and then that will allow you to flip the colors. Next up, we have shoehorning in dark mode. So like, let's say you have a website that was not built. This is my own personal website. It's not built for dark mode. How do you shoehorn that in? And in most cases, you should, hopefully you've used CSS variables throughout your application. If not, it's probably a good time to refactor your CSS and say like, anywhere I've used

• 20:15Wes Bos?

  like this hex code, replace that with a variable called white and dark and whatnot. And then you can kind of go through the whole process of what we've done as well. It's simply just when you are in light and dark mode, you can flip those, the values of those variables. It's, I think it's a relatively easy thing to do if you don't have a ton of hardcoded hex values, and you probably shouldn't have that anyways.

• 20:45Scott Tolinski?

  Yeah. And also can find like color drift where your variables have drifted slightly here and there, and maybe you have like three different hex values for a color that's similar. I hate to say this, but like AI is pretty dang good at doing that task. You can say, convert my, convert all of my hex values into CSS variables. And obviously you check to make sure the work is good, but like I found that to be a task that AI is decently suited at because it won't goof up your thing. It's just a, like a fancier find and replace at that point.

• 21:20Wes Bos?

  Yeah.

• 21:21Scott Tolinski?

  So, yeah. I would say definitely.

• 21:23Wes Bos?

  It's really good at that. And like it can handle context much better than like a, like a regex or something.

• 21:29Scott Tolinski?

  Totally. Yeah. Which I found to be tough sometimes, especially like you said, if you have that color drift. And then once they're all in variables, maybe that's where you find the color drift and then you can do find and replace to make your stuff a little bit more aligned.

• 21:41Wes Bos?

  Mm hmm.

• 21:42Scott Tolinski?

  So yeah, once you're in CSS variable land, you know, to me, I yellow throw a light, dark mode on there and just see how it looks and then start repairing with the light and dark function where needed is really what it comes down to.

• 21:53Wes Bos?

  Yeah, yeah. You could probably get like, what, 90% of a website done with simply just swapping variable values. And then you have to sort of go through the cases where it doesn't look good, right? Because it's not simply just changing the colors. Sometimes things just don't look the same way when you invert their colors. So then you kind of go through and say, all right, well, in this case, I need to override the text color or, or the border on the specific element.

• 22:24Scott Tolinski?

  Word. What about other things to consider here? One is color contrast. You know, color contrast is something you're going to have to manage manually at this very moment. The contrast color function in CSS is kind of MIA, which is, it's always kind of weird because it's just, it feels like it's been in limbo for, for so long here in terms of where this thing is. And I don't have any reports on when color contrast or contrast color, they've changed the name a couple of times, when that will be available. But I did find this, this new ish post from May of last year from Leveroo about emulating

• 23:03Scott Tolinski?

  color contrast using color mix. And I think it's using color mixers or it's using a relative color. And man, this was a brilliant blog post. I'd never seen this until today. I can't believe I haven't seen this post, but go, go and read this whole post because you can get pretty dang far with today's CSS features to emulate a degree of contrast color, which to me, this is something I've been reaching to JavaScript for forever and ever and ever. So there, there's some really neat stuff inside of here for getting contrast color with just CSS at the moment, right now.

• 23:40Wes Bos?

  Yeah, the reason why they haven't rolled it out yet is they're still trying to figure out, can you, like, what's the algorithm for calculating contrast to color? Because there is, like in DevTools, they'll tell you if something's not perfect, but like, there are lots of edge cases where things just don't look right, even though mathematically they do have a high enough contrast. So you'll have to think about that. As well as like, like even on the Syntax website is the, the yellow doesn't necessarily, if the yellow text is too small, it doesn't look good. Yellow doesn't look good on white in general. So like, that's, that's something we have to go through and say, all right, well, it's,

• 24:21Wes Bos?

  yeah, we can flip between white and black, but our primary color, yellow, is staying there. But there are lots of cases where we'll have to change things, where maybe we should flip the logo to white in that case, or maybe there needs to be a background on something.

• 24:37Scott Tolinski?

  Yeah, totally.

• 24:38Wes Bos?

  I have that with my, my logo right now. I cannot figure out how to make it look good on, in dark mode. I just like, I'm at a point now where I'm like, do I just put a background on it or something like that?

• 24:52Scott Tolinski?

  There's a really great even like demo in the Lea Verou post. It's like showing a teal background with some white and dark text. And they're basically saying, would you believe that the, the white text fails in the black text version? But when looking at them, the white text is clearly more readable. So yeah, there's a lot there.

• 25:10Wes Bos?

  Even, even just white on red is inaccessible. Like YouTube's red.

• 25:16Scott Tolinski?

  And it always looks better.

• 25:17Wes Bos?

  Yeah, it does. Doesn't make sense to me, you know? Let's talk about icons and images in general. If you need to swap the source of an image based on light or dark, then you have to use a picture element with multiple source tags. And those source tags themselves can have media queries. So you'll have picture, source, whatever, light.png, and then you have a media query inline right on that element. If you're using SVG inline, you can simply just switch the filter. Color with CSS, which is really nice when you're able to do that. That comes with a bunch of upsides and downsides. If you're bundling the SVGs in your application, that can be a little bit big,

• 26:01Wes Bos?

  but it's really nice to be able to simply just change the fill color and call it a day.

• 26:06Scott Tolinski?

  Yeah, these are like what you're getting into at the end of the project. When it's like, all right, I gotta test everything. Then you add, if you choose to add color schemes, which I can't recommend, then you gotta deal with all that stuff too. So, hey, the whole thing, again, you'll want to always check all of your modes for accessibility. We've talked about this in the contrast color bit, but the best way that I do that is using the browser polypane, which will give you any alerts about any accessibility items throughout your site, not just color based. So I always throw my app into polypane, and I usually develop quite a bit in polypane as I go to make sure that those things are taken care of. But it's important to make sure that you do have enough contrast there.

• 26:51Scott Tolinski?

  You have the right colors and everything that you need.

• 26:55Wes Bos?

  Beautiful. All right. I think that's all we have for light and dark mode. Anything else to add?

• 27:00Scott Tolinski?

  I don't. Yeah, let us, if you have any pro tips and pro techniques for light and dark mode, let us know. We want to see how you're doing it. Are you doing things differently than we are? Drop a comment below, smash that subscribe button, hit the like, all that good stuff, and we will catch you in the next one.

• 27:16Wes Bos?

  Peace.