Skip to main content

CSS and JavaScript Light/Dark Theme Toggle - #69


Like what you see, support the channel.

Published: August 09, 2021


Estimated Reading Time
2 minutes
Video Duration
1:00:38 minutes

Learn how to make your website easier on the eyes using the dark mode trend. In this tutorial, we will learn how to build a and Light/Dark theme toggle. It is easy to add and can help your visitors enjoy your website more.

This fun project uses Vanilla JS and CSS variables to make the switch easy and effective. This tutorial will cover JS and CSS variables, SASS + CSS var() attributes, and some image manipulation that you may be looking for.

00:00 Intro

00:53 Setting Up Our Files

01:38 Building the HTML

08:28 Creating CSS Variables

11:53 Building the JavaScript

21:40 Adding Additional Content + CSS

37:20 Making White Images from PNGs

57:51 Final Look

59:02 What Else You Can Do

Download the tutorial files here: https://github.com/thedevdrawer/dark-mode-js

Become a Patreon to show support and get exclusive access to content: https://www.patreon.com/devdrawer

Applications Used

Visual Studio Code v1.43: https://code.visualstudio.com/

WAMP v3.2.0: http://www.wampserver.com/en/

WordPress: https://wordpress.org

Computer Hardware:

Windows 10 Pro: https://amzn.to/3q5TyZw (Amazon)

Samsung 500GB External SSD: https://amzn.to/2ViAAAF (Amazon)

Samsung 970 EVO Plus SSD 1TB - M.2 NVMe: https://amzn.to/36jDwDy (Amazon)

Rosewill Hive-750S R750W PSU: https://amzn.to/36jiDbs (Amazon)

Phanteks Eclipse Tempered Glass Case: https://amzn.to/39qou0B (Amazon)

MSI Arsenal Gaming AMD Ryzen Motherboard: https://amzn.to/36hpAKm (Amazon)

MSI Gaming GeForce RTX 2060 Super 8GB: https://amzn.to/36hMyRm (Amazon)

LG 34UM69G-B 34-Inch 21:9 UltraWide IPS Monitor: https://amzn.to/2HSRxyI (Amazon)

Corsair 64GB (4 x 16GB) DDR4 Memory: https://amzn.to/3mlmQkI (Amazon)

AMD Ryzen 7 2700X Processor: https://amzn.to/3qdQIBF (Amazon)

Dell XPS 15 9500 15.6" Laptop / Windows: https://amzn.to/3fKEz2w (Amazon)

Lenovo ThinkPad T15 15.6" Laptop / Linux: https://amzn.to/2Jnmn33 (Amazon)

Camera:

Fujifilm X-T3: https://amzn.to/3llKBb5 (Amazon)

Fujinon XF18-55mmF2.8-4: https://amzn.to/3mfTkNb (Amazon)

Audio:

Audio Technica AT2020: https://amzn.to/2VgxU6K (Amazon)

Blue Snowball iCE: https://amzn.to/3lo1jGC (Amazon)

DISCLAIMERS:

I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.