DEV Community

Cover image for Switch dynamically between multiple Themes using plain CSS and vanilla Javascript
Go4WebDev
Go4WebDev

Posted on

Switch dynamically between multiple Themes using plain CSS and vanilla Javascript

There are tons of "theming" ways out there. But I found them either too simple or too complicated. Or using a "plugin" of some sort. Close to nothing using plain HTML, CSS and Javascript.

The challenges with theming I found was:

  1. Switching between multiple themes
  2. Saving the theme settings locally
  3. Make it as simple as possible (but not simpler)
  4. Include svg icons in theming

The method I use was to

  1. Put the theme in a dataset in the body tag
  2. Save this setting in localStorage
  3. Using CSS variables connected to the body tag
  4. Saving svg icons as "symbol" to make it dynamic

In this micro site you can see the result. The main parts of the code behind is also included.

Comments and suggestions for improvements are welcome

Top comments (0)