How to code a Theme Switcher with Vanilla JavaScript

Hi, My name is Andy Leverenz and I work as a Product Designer at Dribbble. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.

====================

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.

CODE: https://codepen.io/webcrunchblog/pen/ZwRmQz

====================

📰 Subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1

💎🛤 NEW COURSE: HELLO RAILS - Get notified Https://hellorails.io

💻 Previously published at: https://web-crunch.com/how-to-code-a-theme-switcher-with-vanilla-javascript

💻 Check out the blog: https://web-crunch.com

🦄 Check out my personal site: https://justalever.com

🚀 Links: Weekly Newsletter: https://web-crunch.com/subscribe Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever Medium: https://medium.com/the-web-crunch-publication

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting

🌊 Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered. https://m.do.co/c/ee243ee15648

💎 Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it! https://hatchbox.io/?via=andy

☕️ 🙏🏻 Patreon https://www.patreon.com/webcrunch

☕️ Or buy me a coffee https://www.buymeacoffee.com/webcrunch ... https://www.youtube.com/watch?v=oNvQW3k3tvk