Supporting Light & Dark Color Schemes

[00:00:00]
>> Jen Kramer: The next thing that we're going to do is the light-dark mode, and there are layers to how light-dark modes work. If you have worked with light-dark mode before, you've probably used JavaScript. And you use JavaScript to toggle classes or toggle style sheets or something similar to swap your colors between a lighter color scheme and a darker color scheme.

[00:00:23]
But what we're going to do today is we're gonna do this all with CSS, this is relatively new to the CSS spec. And one of one of the interesting things is that our web page can actually tap into our operating systems settings. So depending on how your Mac is configured, depending on how your Windows computer is configured, we can have your website look different automatically without even a switch.

[00:00:51]
So I wanted to demo that for you first. And the way we're going to get that started is right here, we're in 6b n your following along, there's the beginning code pen, or you can continue on with the one we've been doing. We have all of our sections all together in the same web page.

[00:01:11]
So what we're going to do here to start with is, right here in our CSS, on our HTML elements styling, we are going to add the following code. We're gonna say color scheme light dark, okay? So right there on the HTML, we just say color scheme, light, dark, and then second part, very important.

[00:01:39]
On your body, we have already set a background color and a color and this is gonna override any of your operating system settings. So just for the moment, we're gonna comment out our background color and our text color, so this will now be white and black. So it looks very similar to what we had before, but it's a different shade of white and a different shade of black, basically speaking.

[00:02:07]
Okay, so if you are on a Mac, you can now go to your system settings and under appearance, there are some icons here across the top that say light, dark and auto. And what I'm going to do is switch mine over to dark windows, people hang on just a second, I'll tell you how to do this on Windows.

[00:02:30]
When I switch this over to dark, it automatically changes the colors on my webpage, how amazing is that, okay? So if you're on a Windows computer, go to your start menu, and then you're gonna go to settings, then go to personalization and color. So for Windows once again it's settings personalization or start menu settings personalization and color.

[00:02:59]
And on that screen you should have similar options to light, dark or auto, and you should be able to switch from whatever you have on your computer, from lights to dark and you should see the same color switching. All right, so that's really nice. Notice that the color scheme, this item works really well up here for our top part here in our bio, but as we scroll down, like into our projects, you may notice a few issues.

[00:03:27]
Remember once again that our projects had some text colors that were called out here, it does not necessarily doing what we want it to do, so this is not a perfect solution, but it's interesting that the solution exists. So if you were to build a very basic webpage, this is one possible way of doing it.