Dark mode with a media query!

[@Anth-ony]

Pretty neat. I'd also be interested in seeing the JS toggle.

[@KyleMerl]

The JS toggle would be a worthwhile tutorial. I could see using the same concepts from that for other accessibility things, like having buttons that change the size of text on the screen and stuff like that.

[@jlogo80]

Please Kevin I'd love your video with a js switch!!

[@sahilsindhu6290]

Hi kevin, it's awesome. Can u please make video on JS toggle button.

[@lipun_panda]

I would love the JS toggle switch for Dark Theme

[@mohammedzaid5989]

same

[@alexisortizojeda809]

He uploaded a video today where he uses localStorage and a toggle to switch between modes!

[@rowinmol2164]

Awesome, definitely interested in a JS version 🔥

[@AlexTechie]

You're really creative; the first site I've ever seen use something other than white + dark gray for light and dark mode. Great video, Kevin!

[@arshad.mp4]

Today, I checked my mail and I found your mail regarding this video and when I clicked on the link, it's totally worth of. Thanks Kevin

[@GGdevelopment]

LOVING YOUR STUFF!!!!

[@birsingh5388]

Yes, please add toggle with JS to change the colors

[@eokwukwe]

Js toggle will make sense also.

[@VerySadBatman]

Thank you for this! It's a game changer for native and progressive web applications with very minimal code. You're awesome!

[@fuse98]

Kevin, just wanted to post on your most recent video to increase the chance that you'll see it. I've been watching a lot of your videos as I stumbled upon your channel from a CSS Dos and Donts search that I did and I'm really enjoying your entire approach at teaching as well as your fluidity in your videos. Keep doing what you do, I personally appreciate the time and effort. Cheers

[@KevinPowell]

Really glad that you're enjoying my content! I try to keep up on all comments, so feel free to post on any video (it's easier for me to see comments on old videos than replies to comments on new videos)

[@rashikkarmacharya8023]

very useful man! and as always right on time. Just as i start scratching my head you come up with something that just helps!! great!!!

[@jeffborges101]

wow . How nice ! A little JS code would be excellent ! . Kevin , I just bought and started your course on Scrimba. It is really amazing . I am learning a lot of things that was hard to understand before your class. A course that worth a way more than the discounted price. My knowledge of CSS and how the browsers " see " the things to be rendered (even if we don´t do nothing) had a major boost! This is a " must have " course for any front end developer Thank you very much

[@busyrand]

Just in time for me! I was looking for a straightforward way to do this exact thing without relying on plugins that were not good finished products just yet.

[@Morrile1]

Awsome, as you say. Didn't realise CSS could have done that because I assumed it was something only JS could handle. I am certainly learning from you Kevin, albeit very busy with other stuff called work at the moment. Roll on December when I will have almost all of December to catch up.

[@renzosolis4283]

yes, please do it! :)

[@miezekatze2945]

I googled for a way to switch from light to dark mode some time ago and stumbled upon the media query approach but I never got around to try it, so it's nice to see it in action here! I'd also be very interested in seeing the js/toggle way! :D

[@cristiano_skp3190]

Great video 👌. Js switch will be awesome 🙂

[@sergeialekseenko3545]

I have found great things. Thanks a lot!

[@FirdavsiWebDev]

Great tutorial,Kevin. Thank you so much!

[@bikramchettri9405]

Good trick can you do a video where we can particularly switch dark node on and off and save the preference to local storage?

[@KevinPowell]

That was the idea for the one with the toggle :D

[@busyrand]

@@KevinPowell Please do this ASAP! This was great.

[@KevinPowell]

It'll be out next Wednesday :)

[@shaikshamsher7466]

Interested to see the javascript version

[@BruceKoehler]

Hey Kevin, another great tutorial. I have been looking for a way to add a dark mode toggle to websites, and so I would enjoy that JS tutorial you mentioned

[@KevinPowell]

I might be doing it next week!

[@BruceKoehler]

@@KevinPowell That's cool

[@kennedycrispim3150]

Conheci seu canal recentemente e estou amando seus videos, parabéns pelo trabalho.

[@digigoliath]

I am with the Dark side. A JS toggle? Hell, yeah!

[@DailyIntern]

Thank you Father of CSS.

[@tahsinalmahi8769]

Awesome!

[@mtranchi]

js toggle with switching between bootstrap themes please. I do have a solution where it works, uses localStorage, but there's a flicker if the user has chosen my non-default setting. I could put a little javascript in the head that adds the css tag, but would that be detrimental regarding the speed of the rendering engine?

[@KevinPowell]

Hrm, curious what might cause that flicker. My JS version of this uses local storage

[@mtranchi]

@@KevinPowell Probably the way I implemented it, it's been a while since I built that site. The default CSS tag linked to the standard Bootstrap, then I'd run javascript to switch the href attribute value to a Bootswatch dark theme based on localStorage. Maybe I put the javascript at the bottom of the page. Hope you decide to do the js toggle vid. Would be cool to see a solution that factored in both system preferences and a manual toggle. Thanks for your vids, CSS is definitely not my strong suit!

[@adifeliz]

Thanks 😊

[@LanFeusT23]

Very neat! Does this work on other OS too? Mac/Linux?

[@KevinPowell]

Any OS that supports a dark mode in the system settings, including android and iOS

[@brandonbh04]

What if we already have a light/dark mode toggle, how do we initialize it according to the user's system settings?

[@losmichaelos3508]

please do the js switch as well. keep up the good work!

[@anandtripathi9637]

I made a button in website to switch on and off dark mode 🙂... but this is much cool ...

[@carolmckay5152]

I used Sass colour maps. css variables are cool also of course.

[@KevinPowell]

I love Sass colour maps! It does take more work to create dynamic colour changes though. The JS toggle version I'll do next week would be able to use them though, since it toggles a class on and off.

[@norvisnorvis7592]

Hi Kevin. This is a wonderful tutorial. Is Dark Mode needed for accessibility on the web?

[@KevinPowell]

For accessibility? Nah (at least I don't think so). Just more for user preference.

[@betellopez3939]

I applied the @media query to my project (in this case CSS file) and it is not working. It only works when I click on "Enable automatic dark mode" on the inspector of google chrome and it uses some different color paletes from the ones I specified in the css file. How do you fix that?

[@GrantHawkey]

Nice vid again! JS mode toggle video please!

[@nicklebagkilla]

Can you do a video (or series) on dark mode for email? Thanks.

[@fvgoya]

Nice tutorial!!!! Please, shows to us with JavaScript as well. Thank you!

[@syediqbalahmed3176]

very good ...

[@cthuloox476]

If I'm using scss, should I use scss color variables, or should I change my code to use css :root variables instead?

[@jordan992020]

Can you do a similar tutorial with a project where there is a button that switches the dark theme and where there are in the main html?

[@remkospaans]

Let’s do the switch!

[@KevinPowell]

Seems like everyone wants the switch!

[@SirMorak]

Why are you using var(someVar) instead of $someVar as you're using .scss?

[@MoabeVettore]

Very useful, make video about JS toggle

[@carolmckay5152]

Thing I learnt: you can't combine another media query (ie for size) with the media query for prefers-color-scheme, so I couldn't achieve a particular goal.

[@RoboG0at]

Would love to see the JavaScript version!

[@CyberTechBits]

Can you show this using JavaScript?

[@syediqbalahmed3176]

nice ...

[@tobyflenderson7176]

Please do the js version.

[@blackpilledbuddha4944]

Hi kevin, can you pls do a video on useful keyboard shortcuts and other useful tips for vs code, that you regularly use

[@2ddrewd]

He just did one a few days ago. kzbin.info/www/bejne/p6GynXptd759orM

[@KevinPowell]

As Drew mentioned, that was my video last week!

[@blackpilledbuddha4944]

@@KevinPowell wow .. thanks

[@KevinPowell]

Good timing :D

[@monukumargautam2060]

Can you make micro-interaction tutorial in CSS

[@KevinPowell]

A few people ahve mentioned it lately, I'll look into it for sure! Maybe do a mini-series on it or something :)

[@malangope]

Does this work on the new dark and light modes on iOS devices?

[@KevinPowell]

It should :)

[@bx_h23]

Does this work on Mac aswell?

[@KevinPowell]

Any OS that supports it, so as long as it's up to date, yes. Will work on iOS and Android too.

[@Judas_Is_Fish]

Waiting for toggle, Kevin)

[@mmerle]

Js switch please

[@tbgan6675]

JavaScript version please, thanks 🙏🏼

[@Martin-4D]

Noice :)

[@kshitijnirale2015]

JS toggle pl.

[@KevinPowell]

It's coming tomorrow!

[@chuck_norris]

Dark Green? really

[@KevinPowell]

Haha, I didn't invest too much time figuring out the colour scheme, lol

[@jongirma7273]

toggle, toggle...

[@KevinPowell]

Tomorrow!

[@weshuiz1325]

*how to troll people:* @media(prefers-color-cheme: dark){ body { background: #fff; } } @media(prefers-color-cheme: light){ body { background: #000; } }

[@FordExplorer-rm6ew]

Not real trolling but ok