Light & Dark mode WITHOUT CSS!

The color-scheme property is a super useful property. It allows us to switch the UI elements, like form controls, scrollbars, and all that to light or dark modes, but it also has a meta tag that we can use as well, allowing us to create light and dark modes without even writing any CSS!

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:59 - The problem with the prefers-color-scheme media query
02:38 - Setting a default color-scheme
04:15 - light and dark modes with color-scheme
05:05 - Using color-scheme with prefers-color-scheme
06:22 - the color-scheme meta tag
07:33 - Setting color-scheme on individual elements
09:55 - differences between browsers

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[desmondodion]

You are the reason I took the scrimba course after seeing your crash course by accident. I'm in module 6 now.. Advanced Js. You helped me understand CSS so much better. collapsing margins, flexbox, order, border-image, linear gradient, background- blend-mode and so on.. Thank you so much. 🙏

[yaycupcake]

I really hope this encourages people to include BOTH light and dark modes. It doesn't have to be perfect, but as someone who has astigmatism and finds light-text-on-dark-background to be extremely blurry (just because of how my eyes work), I get so upset when I see the trend of websites being *exclusively* dark mode, as if people are too lazy to even try to implement both. When I create my own sites, I always try to include both. Just because I personally won't use dark mode, doesn't mean others won't appreciate it, and it goes both ways, for everyone. I really really hope some people will learn from this and see how easy it is and utilize it. I really feel like every site should have at least a somewhat usable light AND dark mode option, and any tools to move society toward that point are really important.

[UteBescht]

Your tutorials are simply awesome - great explanation - great structure and always something that makes my jaw drop. Thanks again, Kevin- and go on with this fantastic work!

[jaysonbunnell]

Oh my gosh! you could use the variable stuff from last vid, have a scheme toggle and a preferred color scheme meta tag, and still keep both the css clean and the site responsive!!

[lucienchu]

Thanks Kevin, dark mode would be my next concern of my designs.

[microcolonel]

I love this. I don't touch the user stylesheet for the most part on my personal sites, very accessible and they look great in my opinion.

[rafaqf]

Another amazing video from Kevin Power! :P Thanks a lot!

[zachjensz]

Finally dark mode users won't be blinded by FOUC

[GroudFrank]

Great video on the topic but I still prefer implementing themes(and accent colours) with JS and CSS. It's a lot more work to implement but worth it if you want super granular control.

[solomonobihan]

He is so good.

How can someone be this good?

[FFAs]

This looks like fun to play with. Thanks for the tip!

[Soferking]

great man ! I hate css and you really help me to get things done !

[bySterling]

Awesome tutorial! I did think it was going to school us on how to build a visitor switcher toggle mode ha

[Mr-Corey-June]

Thanks for what you teach. I only know basic HTML, self taught from Webtv signatures in history past. I use a testbed for my coding. A completely different visual from yours, LOL. I can change my page and text and link color in the body tag. If I want to change text size, color, or style, I'll do that with a font tag. I have colorful tables and nested tables and even colorful Fieldset and Label tags that I'm learning to use.

Most of what you show and do, and the tool you use is somewhat over my head, but I learn a little to have a better understanding of CSS. I use to use Xspeed and Yspeed in my body tag to have a scrolling background, but that is no more. I'd like to do that in a simple HTML way, but I think CSS would be the way to do it so my text fish can once again swim across my seamless scrolling background images that I made. And maybe have the snow fall in the story I wrote. I'm old and crippled and will never be a web designer, but what you teach helps me get more familiar with CSS and maybe one day I'll understand the setting up using the "{" or "}" or ";" and when and where to put them. I need a CSS tutorial for dummy's, written slow so I can keep up, LOL

Maybe one day I will even get to see my audioscopes and their wiggly colorful lines dance to music again, I can dream.

[balmaraz]

A print CSS video from you would be super great!

[DN]

Thank you so much for this!

Would targeting root with a dark background-color get rid of the annoying flash of white when page loads/refreshes?

Thanks again.

[hjetwd]

Responsively App - free open source alternative of Polypane 😉

[devanshnigam]

Amazing content, can we handle the ico files similarly as well which are used for website icons, visible in the tabs?

[_viy]

Is there a way to use system theme as default and let user choose from dark, light or system just in case when my system is dark but I want a light website?

[bobhearinger]

This doesn't change anything to my site and I have dark mode on Windows?