切换我网站的主题

Question

我希望允许用户使用buttonpress切换我网站的整个颜色方案。

我有2个单独的.less文件，它们具有相同的全局变量，但颜色不同。问题似乎很简单..＆＃34;交换1。无文件为另一个＆＃34;。但是我该如何实现呢？

当然，我可以根据单例的状态在.js中逐个元素地改变整个站点，但这看起来像是一个管道 - 磁带解决方案。

Answer 1

一个可能的解决方案示例：假设您有一个div元素，您希望在每个主题中以不同方式为其背景着色。加载两个.less文件并像这样编辑它们（将主题类添加到包装整个文档的body元素中）：

<强>主题1.less

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

<强>主题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>);