Prefers Color Scheme & Visuals Exercise

[00:00:00]
>> 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:02:37]
Any questions about that for moving to the exercise? Yeah, that's a great question. So yeah, it's like are there also JavaScript API's for these things? And the example is like if you have some JavaScript animated thing, and you know that they prefer reduce motion, can you do it?

[00:02:50]
So I think I also like, can you do it without media queries, right? If you're not in CSS, but in JavaScript, is that fair? Okay, yeah, so there is an API for, trying remember the name of it. There's an API where you can get media query information. And the name of it is, yes.

[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:03:57]
And then if you want, if you're a JavaScript person for extra credit, [LAUGH] you can also enable the checkbox to override that setting. So, I think the first thing what we should be able to see is here, as I pick light, this page should go white and as I pick dark, this page should go black.

[00:04:14]
And if you wanted to get fancy way that you could also allow the checkbox to override those settings.