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.

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:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Рекомендации по теме

Комментарии

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.

MuhammadjavohirSuratov

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.🥰

muado

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

Knards

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

AmanpreetSingh

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

laurabatistaaa

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

SilaS

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).

Sakinukas