Transcript from the "Prefers Color Scheme & Visuals Exercise" Lesson
>> Another one that's very cool. And again, another curb cut effect because I think it's very cool from a design standpoint too is prefers color scheme. So a lot of operating systems these days including Apple allow you to set your color scheme. And so I think if I go to Preferences whereas it's maybe like Appearance, and then I can select light mode, I can select dark mode, things like that.
[00:00:27] So at an operating system level, I've chosen dark mode. Well, now we have this ability to read into that setting and change things accordingly, which is really cool. I do this on my personal site, and we do this on Twitter, and we did it on some Adobe sites as well.
[00:00:40] So again, think about your HTML and you've got your main wrapper class inside the body tags. So you give it a class of wrapper and then you do these prefers colour schemes again. So you do okay media query if they prefer dark then we set wrappers background to be black, the whole page is black.
[00:00:55] I guess I should probably add colour, you know, white or something for contrast. Otherwise, if they prefer the color scheme light, we set the wrapper background to be white instead. And so now you can have this site that's like very dynamic, where as soon as they load the page, whatever your operating system level is set to, you can go ahead and just set your page to that.
[00:01:16] This one's really interesting too though, because if you think about it, it's very trendy these days for websites to include their own manual dark mode toggle, right? So if you go to a blog and it has, for an example I have one on my site, right? So I have this little like day night thing, and you click it and it goes dark, and then you click it again, it goes light.
[00:01:36] So now we're like, okay, we have this toggle, right? And we have the prefers color scheme from the system design. And then we also probably to make a really good experience, if I set this to light and I refresh the page, I don't want it to be dark because they already chose light.
[00:01:52] So it's probably locally cached too. So you kind of end up in a little bit of a complicated space, right? Where you're like, okay, maybe the first thing you that you do is you check the user's cache to see if you've manually saved their preference for your site, they prefer light.
[00:02:06] And if that's not there, then maybe as a second thought, you check their preferences and you see if they prefer a lighter dark seem and that's added to that. And if that's not there, then maybe you have a total default based on the toggle or whatever. So it's a little bit interesting.
[00:02:19] I think that like the reduced motion is very simple. They prefer reduce motion. So don't do animations. The light mode, dark mode can get tricky if you offer light mode dark mode as a clickable experience in your existing web app. You can get a little bit tricky there, but I think, I still think it's really great.
[00:03:09] So you can do it this way. Let me link this in the, I'm not logged into the chat, but. So you can do window dot match media and then you can pass in any type of query selector that CSS takes and it'll return true or false for you.
[00:03:22] So this would be same with like Mac screen size, anything like that. But yeah, so you could do if window match media prefers colour scheme. So it won't be true or false. For this one, it'll be lighter dark for this one based on what you've set. So then you could do something like if window match media prefers color scheme equals light.
[00:03:37] Do this. Otherwise do that. It's a great question. All right, last exercise. So I'll take 10 to do this and then I will be on the automation tooling, all sorts of other cool stuff but no more exercises. So for this exercise, read the user's dark light mode preference and set the background to like a dark color or light color.
[00:04:14] And if you wanted to get fancy way that you could also allow the checkbox to override those settings.