How to code a Theme Switcher with Vanilla JavaScript
Tags: javascript, tutorial, beginners, css
Published: 2019-07-26 21:58:36

---
title: How to code a Theme Switcher with Vanilla JavaScript
published: true
tags: javascript, tutorial, beginner, css
canonical_url: https://web-crunch.com/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 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.

{% youtube oNvQW3k3tvk %}

[View the CodePen](https://codepen.io/webcrunchblog/pen/ZwRmQz)

### More from this series

- [Let’s Build: With JavaScript – DIY Dropdowns and Responsive Menus](https://web-crunch.com/lets-build-with-javascript-diy-dropdowns-responsive-menus/)
- [Let’s Build: With JavaScript – Broadcast Bar with Cookies](https://web-crunch.com/lets-build-with-javascript-broadcast-bar-cookies/)
- [Let’s Build: With JavaScript – Sticky Nav](https://web-crunch.com/lets-build-with-javascript-sticky-nav/)
- [Let’s Build: With JavaScript – Dynamic Tabs](https://web-crunch.com/how-to-create-tabs-with-vanilla-javascript)
- [Let’s Build: With JavaScript – Modals](https://web-crunch.com/lets-build-with-javascript-how-to-code-modal-vanilla-javascript/)
- [Let’s Build: With JavaScript – HTML5 Video Player](https://web-crunch.com/lets-build-with-javascript-html5-video-player/)
- [Let’s Build: With JavaScript – Accordions](https://web-crunch.com/how-to-create-accordion-vanilla-javascript/)
- [Let’s Build: With JavaScript – Skeleton Screen Effect](how-to-create-skeleton-screen-loading-effect)
- [How to Code an Off-Canvas Menu – Let’s Build: With JavaScript](https://web-crunch.com/off-canvas-menu)
- [Show More – Show Less Toggle with JavaScript](https://dev.to/justalever/show-more--show-less-toggle-with-javascript-4ok0-temp-slug-1221609)

### Shameless Plug!

If you liked this post, I have more videos on [YouTube](https://youtube.com/c/webcrunch) and here on my [blog](https://web-crunch.com). Want more content like this in your inbox? [Subscribe to my newsletter](https://web-crunch.com/subcribe) and get it automatically.

#### Check out my course

[![https://i2.wp.com/i.imgur.com/KIaaJEB.jpg?ssl=1](https://i2.wp.com/i.imgur.com/KIaaJEB.jpg?ssl=1)  
](https://hellorails.io)

Want to learn Ruby on Rails from the ground up? Check out my course called [Hello Rails](https://hellorails.io).

The post [How to code a Theme Switcher with Vanilla JavaScript](https://web-crunch.com/how-to-code-a-theme-switcher-with-vanilla-javascript/) appeared first on [Web-Crunch](https://web-crunch.com).