Переключение темы моего сайта

Question

Я хочу позволить пользователям переключать всю цветовую схему моего сайта нажатием кнопки.

У меня есть 2 отдельных файла .less с одинаковыми глобальными переменными, но разными цветами.Проблема кажется довольно простой .. "Поменять файл .less на другой".Но как мне на самом деле это сделать?

Конечно, я мог бы изменять весь сайт элемент за элементом в .js в зависимости от состояния синглтона, но это похоже на решение для клейкой ленты..

Answer 1

Одно возможное решение на примере: скажем, у вас есть элемент div, который вы хотите по-разному окрашивать в каждой теме.Загрузите оба файла .less и отредактируйте их следующим образом (добавьте класс темы к элементу body, охватывающему весь документ):

theme-1.less

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

theme-2.less

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

Затем предоставьте пользователю механизм изменения темы (например, раскрывающееся меню).Когда пользователь выбирает из меню - скажем, например, изменяя с theme-1 на theme-2 - введите этот JS:

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

Как правило, вы можете сделать это несколькими способами:

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

или

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