Dark mode with a media query!

Key Takeaways

hello there and welcome to this video my name is Kevin and if you're new to my channel here I make weekly tips tricks and tutorials exploring mostly CSS but just front and goodness in general and in this week's video we are going to be looking at how we can make a dark mode that is set through the system so we can easily switch it from a light to a dark some switching my system settings right now back and forth and you can see that it is switching between the two modes so how we can easily set that up CSS custom properties are our big friend on this but you don't wouldn't necessarily a hundred percent need them but they just make your life so much easier for this so let's dive in and see how we can do it it is super simple you're gonna love it I love doing this let's go take a look one thing before we do dive in though just about browser support browser support is not fantastic for this at the time of recording but that's fine I am using custom properties here so if you are using that already you're probably not worrying about IE are using something like post CSS just to handle you know making sure that it's all working but if it doesn't work for whatever reason if the browser doesn't support it you're gonna end up with your default color scheme and it doesn't really matter this is just sort of like extra awesomeness so if somebody's on a newer phone or if they're on their computer that does have the settings like mine does here we just saw it switching back and forth if they've set it to prefer dark mode they will be getting dark mode and if their browser doesn't support it for whatever reason or their system doesn't have dark mode they don't know the difference anyway so jumping into it here in vs code you can see here on my route I have put a whole bunch of CSS custom properties I've developed a color scheme here with a light a dark primary secondary and accent colors that I'm using throughout because I knew I just at one point maybe wanted to switch colors around I set a foreground color to my dark so that's my text colors and a background color to my light and that is this background color that we have right here so you can see the light or actually that's that background color we have it down there so throughout everywhere where I was setting up my colors I was using my background my foreground and if we go further down you can see more instances of those coming up and in a few places I did use my accent color or my color primary and things like that so there are a few places where different colors were coming through but as much as possible I tried to stick with my foreground and my background and this is where the real magic comes in it's a nice simple media query that we can put in is called prefers color scheme now for this you can just leave it as the default which means it won't actually switch things we can set it to light so you can do a light one if you want and you can also set it to dark so I'm gonna put dark for this because we're going to be setting one specifically for a dark assuming just the default will be my light one that I have and in here once again we'll go back into our route and what I'm going to do is just for now switch my foreground and background colors on that so we can see here the easiest way to do that is say my background is here my foreground is here now this will not be perfect but it will be a nice start except how can I test to see if it's working well I am on Windows so in Windows if you go into your settings there's a color settings area and you'll have your default windows mode which mine was set to dark but my default app mode is actually set to light so I can switch that over to dark and look at that a whole bunch of the colors changed except this color here didn't that's because I'd set it up with a gradient using a couple of my other colors so that does mean I would have to change a few other things in here so let's do that really fast and just like that we can see it all switches over and it's actually looking pretty cool so I did come up with a completely different color scheme here for my primary secondary and accent but my background in foreground here I was just flipping back and forth now so if we come back and I switch to that back to light and see it's switching over to light and if I switch it back to dark the whole website is switching over to that dark mode super nice and easy to do especially if you're using CSS custom properties if you're not comfortable with using custom properties there is a link in the description that goes into a mini-series that i did on that it's a six-part video series here on youtube also if you'd like to see how to do this but with JavaScript instead so having like a little toggle and we can click and the user can choose which mode they would want that in let me know in the comments below and maybe we'll look at doing that in the next week or two if a lot of people think that would be pretty awesome thank you very much for watching I hope you liked this video if you did please hit the thumbs up it's a super cool super easy to use so I really do hope you liked it and hopefully you can think of cool ways implementing this insight so that you are working on thank you very much once again for watching a huge thank you to my patrons you guys are the absolute best thank you very much once again for the support that you do give me if you haven't seen that series on custom properties I do recommend you go check it out and of course until next time don't forget to make your corne the internet just a little bit more awesome