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:

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:
• Can I Use prefers-color-scheme:
• Can I Use CSS Variables:
• Entypo+ Icon Set:
• Ionicons Icon Set:
• How to Create a WordPress Coming Soon Page:
• Chair Image:
• Armchair Logo:
• modern-normalize:
• Poppins Font:

► Download unlimited photos, fonts, and templates with Envato Elements:

Read more web design tutorials on Envato Tuts+:

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill:

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:

► Subscribe to Envato Tuts+ on YouTube:
► Follow Envato Tuts+ on Twitter:
► Follow Envato Tuts+ on Facebook:
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –