切换时加载附加的CSS文件w/切换开关

Question

一旦通过切换开关启用，我还有一个额外的css文件要加载。&相反，允许它取消设置，并在取消切换时恢复到默认的.css文件。

我似乎在成功添加这个时遇到了一些麻烦，因为编写java脚本有时对我来说有点棘手。因此，我呼吁社会各界提供他们的意见；他们将如何增加这种能力。提前感谢大家的光临；阅读

以下是该网站的URL：(https://phpstack-726541-2423367.cloudwaysapps.com/)你可以在的右上角看到切换开关

如果能找到最简单的解决方案，我们将不胜感激：(

????

Bootstrap toggle switch, so no custom or additonal css to include. 
The path for the intended css file is 'assets/css/dark-theme.css'

<div class="custom-control custom-switch" style = "display: inline-block; padding: 0px 10px 0px 10px;">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1"></label>
</div>

Answer 1

TL；DR.切换CSS类以控制颜色主题

您可能需要查看此答案：https://stackoverflow.com/a/63087710/7216508

我知道您正在使用Bootstrap，因此下面的代码片段可能无法通过简单的复制粘贴来使用。但希望它能让你大致了解如何实现这一目标。

在坚果壳中，您可以在CSS变量中指定主题颜色，并根据用户的选择覆盖它们的值。在您的情况下，您可能希望合并这两个CSS文件，并对结构进行一些重构。

document.querySelector('.switch').addEventListener('click', () => {
document.body.classList.toggle('dark');
});

:root {
--bg-nav: #333;
--bg-body: #f0f0f0;
--text-nav: #fff;
--text-body: #202020;
}
body {
margin: 0;
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
background-color: var(--bg-body);
color: var(--text-body);
}
body.dark {
--bg-nav: #112200;
--bg-body: #333;
--text-nav: #fff;
--text-body: #fff;
}
main {
flex: 1;
padding: 15px;
}
header, footer {
background-color: var(--bg-nav);
color: var(--text-nav);
padding: 10px;
}

<header>Header Nav</header>
<main>
<h1>Test Page</h1>
<p>Here is a sample page</p>
<button class="switch">Switch theme</button>
</main>
<footer>Footer Nav</footer>