Andy from Webcrunch

Subscribe for email updates:

Portrait of Andy Leverenz
Andy Leverenz

February 15, 2019

Last updated November 5, 2023

How to code a Theme Switcher with Vanilla JavaScript

Welcome to another Let's Build: with JavaScript tutorial. In this installment, we'll take a look at building a theme switcher for different parts of a web page using CSS variables and vanilla JavaScript.

Building a theme switcher has never been easier since the introduction of modern CSS variables. If you've been a Sass advocate you likely understand the point of a variable in your CSS code.

In my own work, I use variables to keep my code as DRY (don't repeat yourself) and consistent as possible. With Sass, you can't quite hook into the same code with JavaScript as you can with CSS variables.

Declaring variables on given elements in your regular CSS allows you to traverse the CSS for those handy variables. In this video guide, I'll show you have to use some modern techniques in both JavaScript and CSS to achieve this awesome result.

View the CodePen

More from this series

Shameless Plug!

Hello Rails Course

I have a new course called Hello Rails. Hello Rails is modern course designed to help you start using and understanding Ruby on Rails fast. If you're a novice when it comes to Ruby or Ruby on Rails I invite you to check out the site. The course will be much like these builds but a super more in-depth version with more realistic goals and deliverables. View the course!

Link this article
Est. reading time: 2 minutes
Stats: 3,768 views



Part of the Let's Build: With JavaScript collection