如何使用按钮或开关更改整个css文件？ [重复]

Question

这个问题在这里已有答案：

• Switching between css stylesheets 1回答

假设我有2个样式表，dark.css和light.css。我想允许用户在主页中切换这两个主题，并将其设置为其他页面的默认值。我的网站还包含许多其他css文件，两个主题几乎相同（否则这将是一个问题!!）

Answer 1

我们永远不应该切换或卸载css文件来执行此类操作。最好在html或body元素中切换一个类。

例如 - 首先加载两个css样式文件。然后对于dark.css，将所有样式包装在根类dark下，如下所示 -

.dark .style1{
 ...
}

.dark .style2{
  ...
}

light.css也是如此

.light .style1{
 ...
}

.light .style2{
  ...
}

然后使用下面的JavaScript切换body标记类 -

<button id="dark">Dark theme</button>
<button id="light">Light theme</button>

let body = document.body;

let darkBtn = document.getElementById('dark');
let lightBtn = document.getElementById('light');

darkBtn.addEventListener('click', () => {
    body.classList.remove('light');
    body.classList.add('dark');
});

lightBtn.addEventListener('click', () => {
    body.classList.remove('dark');
    body.classList.add('light');
});

生活在行动 - https://jsitor.com/3xKxgP8Ow