Creating a Dark Mode Switcher With CSS and JavaScript

In this short course, you’ll learn how to create a switcher to enable users to switch between dark and light mode on a website.
► Download dark mode scripts and plugins from CodeCanyon: codecanyon.net/search/dark%20...
Nowadays, both macOS and Windows support dark and light UIs; iOS and Android do the same for other devices. And an increasing number of websites allow users to switch between dark and light modes (many people find darker UIs easier on the eyes, and even on energy bills!).
Learn how to create a dark mode switcher using CSS and JavaScript in this video. Here's what we'll cover:
00:00 Welcome to the course!
03:07 The project so far
07:07 Creating and styling the theme switcher
17:12 Adding a dark theme to our page
24:51 Making the Theme Switcher Functional
Relevant Links:
• Source Files: github.com/tutsplus/Creating-...
• Can I Use prefers-color-scheme: caniuse.com/prefers-color-scheme
• Can I Use CSS Variables: caniuse.com/css-variables
• Entypo+ Icon Set: iconset.io/set/entypo
• Ionicons Icon Set: iconset.io/set/ionicons
• How to Create a WordPress Coming Soon Page: webdesign.tutsplus.com/tutori...
• Chair Image: elements.envato.com/chair-JTD...
• Armchair Logo: elements.envato.com/logo-armc...
• modern-normalize: github.com/sindresorhus/moder...
• Poppins Font: fonts.google.com/specimen/Pop...
► Download unlimited photos, fonts, and templates with Envato Elements: elements.envato.com/?...
Read more web design tutorials on Envato Tuts+: webdesign.tutsplus.com/?...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: tutsplus.com/?...
Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: elements.envato.com/?...
► Subscribe to Envato Tuts+ on RUclips: / tutsplus
► Follow Envato Tuts+ on Twitter: / tutsplus
► Follow Envato Tuts+ on Facebook: / tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[@MuhammadjavohirSuratov]

The video was clearly organized, no unnecessary steps, straight to the point. Just yesterday I faced the problem with media query detection using JS. This video was a solution to the problem.

[@muado8900]

I'm really thankful! The tutorial you provided is very detailed, making it great for beginners. The clarity in explaining the concepts is truly impressive. Since I'm new to coding, my coding skills are not very good. But thanks to your videos, I've learned a lot. Your explanations are really easy to understand.🥰

[@user-ur9qj5he6c]

You literally saved my sprint! Thank you so much ;)))

[@000SilaS000]

I was actually looking for a tutorial on how to do this.
Very good video.
Thank you!

[@envatotuts]

Glad I could help!

[@Knards]

Of all the Envato teachers, I like Adi by far the best. And that is not said to denigrate any of the other folks at Envato, who are professionals in their fields

[@Sakinukas]

Thank you very much! Very detailed tutorial which is amazing for early learners and explaining things what we learned is top notch. You are the King Tuts of the webdev tutorials (We have famous live music bar King Tut's down in Glasgow).

[@AmanpreetSingh]

Man! I owe most of my career to you, I admit that in my early career I learned a lot of CSS from your videos. Thanks for being awesome

[@envatotuts]

Happy to help!

[@ob5804]

@@envatotuts Hi. Is it possible for js code that is in css to be in app.js?

[@tuisilva1]

i have a question what is that normalize css file for ??? sry if it is a dumb question its just i never saw something like that.

[@HonestlyPizza]

at 13:14, the background for the sun isn't showing up any idea why?

[@thilothamma1103]

Fan from Pondicherry.......... ❤️❤️

[@DeLaRic]

Nice. Is it possible to use is in a wordpress theme? Thanks a lot to show us this trick.

[@hiddenname9005]

Great

[@ArtByRopri]

Nice sharing my friend... Thumbs up 👍❣️

[@envatotuts]

Thank you! Cheers!

[@husseinabukar7723]

I like dark

[@ashkanmofakham1157]

best

[@aguywithoutaname]

43:42 I prefer dark theme because "Light attracts bugs" 🤦🏿‍♂🤦🏿‍♂🤦🏿‍♂

[@thilothamma1103]

1st comment and 1st view and like also sarath anna

[@hasanhatem1658]

You are talking toooooooooooooooooooooo much, this video can be done in just 10mins OMG