Switching theme of my website

Question

I wish to allow users to switch the entire color-scheme of my site with a buttonpress.

I have 2 separate .less files with the same global variables, but different colors. The problem seems quite simple.. "swap 1 .less file for the other". But how do I actually accomplish this?

Of course, I could alter the entire site element-by-element in the .js based on the state of a singleton, but that seems like a duct-tape-solution.

Answer 1

One possible solution by example: say you have a div element that you wish to color its background differently in each theme. Load both .less files and edit them like this (add the theme class to the body element that wraps the whole document):

theme-1.less

body.theme-1 {
    div.address {
        background-color: yellow;
    }
}

theme-2.less

body.theme-2 {
    div.address {
        background-color: fuchsia;
    }
}

Then provide a mechanism for the user to change the theme (e.g. drop-down menu). When the user selects from the menu - say for example changing from theme-1 to theme-2 - issue this JS:

document.getElementsByTagName("body")[0].classList.replace("theme-1", "theme-2");

Generically you can do it in more than one way:

document.getElementsByTagName("body")[0].classList.replace(<currently-selected-theme>, <newly-selected-theme);

or

document.getElementsByTagName("body")[0].classList.remove(<currently-selected-theme>).add(<newly-selected-theme>);