添加按钮以使用两种首选颜色方案在明暗模式之间切换

Question

我创建了一个具有复杂设计和不同背景颜色的页面，我决定添加一个按钮来让用户在浅色和深色模式之间切换

我用JS尝试了不同的解决方案，但没有成功。我当前使用的解决方法是在 CSS 文件中添加两个媒体。基本上，如果我的网站外观设置为深色，页面也会加载深色风格的主题，并加载浅色浏览器浅色外观。

@media screen and (prefers-color-scheme: dark)
@media screen and (prefers-color-scheme: light)

问题是：如何让用户使用普通 Javascript 通过按钮手动在暗光颜色方案之间进行更改？ （不带复选框） 附注也许我可以用 CSS 中的 var(--rule) 来实现这个，但我对这个东西还是新手，而且我的 JS 知识几乎为零

例如：

@media screen and (prefers-color-scheme: dark) {
    p, h2 {
        color: #e7e7e7;
    }
@media screen and (prefers-color-scheme: light) {
    p, h2 {
        color: #333333;
    }

html 按钮（i 类/按钮是占位符）

<div class="dark-mode-container">
  <div id="dark-mode-btn">
  <button class="theme-switch">test</button>
  <i class="fa-solid fa-moon" title="Switch to Dark mode"></i>
</div>

这是粘性导航中的按钮，我打算用它来切换模式

Answer 1

我会说使用 javascript，创建一个按钮和一个 javascript 函数 onclick。

document.body.classList.toggle("dark-mode");

此函数会在 body 上切换类 dark-mode，因此对于 darkmode 样式，请在所有 CSS 选择器前面添加 body.dark-mode。

Answer 2

const btn = document.getElementById('btn');
        btn.addEventListener('click', function () {
            var elmWitchChange = document.getElementsByClassName('light')
            for (var i = 0; i < elmWitchChange.length; i++) {
                elmWitchChange[i].classList.toggle('dark')
            }
        })

  .dark {
            background-color: black;
            color: white;
        }

 <header class="light">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, dolor?
    </header>
    <br>
    <div class="light">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus facilis qui magnam quidem facere autem maiores
        necessitatibus, hic maxime eum.
    </div>
    <br>
    <span class="light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, recusandae?</span>
    <br>
    <div>
        this div does not have a light class therefore it won't be effected
    </div>
    <br>
    <button class="light" id="btn">toggle</button>

在我看来： 如果您想让多个元素对您的操作做出反应，您可以创建一个公共类并使用它，以便您可以更改它们的样式

Answer 3

如果您想要一个可以切换亮/暗模式并更改页面多个元素的样式的按钮，您可以执行 .classList 属性和toggle() 方法

const element = document.body;
const divEl = document.getElementById("div");

function myFunction() { 
   element.classList.toggle("dark-mode");
   divEl.classList.toggle("another-dark-mode");
   // add more classes here you need toggled
}