<< Back

Adding themes to your site

Have you ever felt split about what colors to choose? Ever wanted to have multiple styles for your site but wanted to keep things consistent? Turns out you can!

Website themes are not really such a new thing, but it is in recent years that they have become so widespread with nearly every popular website having a "dark mode" and a "light mode".

There are lots of ways to go about theming your site, from dynamically loading up CSS stylesheets to enabling and disabling preloaded ones. In this tutorials I'll show you how to do the latter.

First of all, get your CSS theme into a separate file. What I did with mine is I put all the color specific data into a new file and added variables so I could tweak the theme easier. Of course, you can change as many styles as you want, your themes are not limited to just color changes only.

  1. Here is what my template theme looked like:

    Hint: the style tags are just an example, you should put the code into a separate .css file.
  2. Now, on every page that you want to make your theme available, include the theme after your main CSS file. Make sure that you add the disabled attribute, and a data-theme attribute with the theme's name. Your code should look something like this:

  3. Next, lets add the buttons to enable our site visitors to choose the themes! All you have to do is give the buttons a class and a data attribute, like so:

    Hint: the default theme button acts like a reset switch, disabling all additional theme files. I recommend keeping it's data-style attribute as "default". Also, you can use the selected class to show the user which theme is currently active.
  4. Finally, all we have left to do is add some JS. Make sure you include this code on every page where you want your themes to work!

    Hint: we are saving the theme name to the browser's cache so that your website remembers what theme was selected across all your pages.

And we're done! You can add as many themes to your site as you want, although, don't add too many unless you want your site to get slow. This is a pretty simple solution, but if you're looking for something more performance oriented you could look up how to load and add stylesheets dynamically.

I hope this article was of use! If you have trouble setting the code up and want me to help, or if you found some typos or errors, please let me know! Thanks for reading!