使用 prefers-color-scheme: dark 实现暗黑模式切换

Question

我有一个切换开关，用于启用暗黑模式。

<div class="one-quarter d-flex justify-content-center" id="switch">
  <input type="checkbox" class="checkbox" id="chk" />
    <label class="switch-label" for="chk">
      <i class="fas fa-moon"></i>
      <i class="fas fa-sun"></i>
      <div class="ball"></div>
    </label>
</div>

使用一些 JavaScript，我能够为元素创建一个开关。

const chk = document.getElementById('chk');

chk.addEventListener('change', () => {

});

然后将所有的暗色样式放入：

@media (prefers-color-scheme: dark) {

}

如何使切换工作以启用 prefers-color-scheme: dark

- Mark

---

如果用户的默认主题是暗色，您是否想要更改页面的主题？ - Zain Zafar

默认主题是亮色。当用户使用切换/切换主题时，应将主题更改为prefers-color-scheme: dark。当用户的个人电脑/笔记本电脑/移动设备处于暗黑模式时，已经可以使用prefers-color-scheme: dark来实现。 - Mark

我已经回复了一个我认为对你的情况更合适的答案。希望能有所帮助。 - Zain Zafar

Answer 1

一个简单的方法是使用CSS变量，这样您就不必全部加载新的CSS文件，而且这很流畅。

 :root {
    --primary-color: #302AE6;
    --secondary-color: #536390;
    --font-color: #424242;
    --bg-color: #fff;
    --heading-color: #292922;
}

[data-theme="dark"] {
    --primary-color: #9A97F3;
    --secondary-color: #818cab;
    --font-color: #e1e1ff;
    --bg-color: #161625;
    --heading-color: #818cab;
}

body {
  background-color: var(--bg-color);
  color: var(--font-color);
  width: 100%;
}

h1 {
    color: var(--heading-color);
    font-family: "Sansita One", serif;
    font-size: 2rem;
    margin-bottom: 1vh;
}

使用JS可以切换它

const chk = document.getElementById('chk');

chk.addEventListener('change', (e) => {
 if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
    }
    else {        
      document.documentElement.setAttribute('data-theme', 'light');    
    }   
});

- Zain Zafar

---

哦，那很好。所以我可以省略 prefers-color-scheme: dark 吗？ 那么我还能自动检测设备/电脑是否处于暗模式吗？ - Mark

你可以使用相同的CSS变量在prefers-color-scheme: dark查询中更改颜色。所以是的，在那种情况下也可以工作。 - Zain Zafar

我明白了。我会稍微调试一下这个。看起来是一个简洁的解决方案。 - Mark

你可以参考这篇文章获取更多信息：https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8 - Zain Zafar

太棒了，我试过了，很有效！还有没有办法记住切换到暗模式？因为我有多个页面，但在浏览时它会自动切回正常模式。 - Mark

Answer 2

我不确定你能够像那样创建自定义的CSS媒体查询。

根据你的灵活性，你可以尝试另一种方法，像这样：

1. 将所有与主题无关的CSS存储在一个文件中（比如，style.css）
2. 将浅色/深色主题的CSS分别存储在它们各自的文件中（比如，lighttheme.css和darktheme.css）
3. 在你的HTML中，像这样放置一个指向你的CSS的链接：

<!-- General CSS -->
<link rel="stylesheet" href="style.css" />

<!-- Theme-specific CSS (Note the ID attribute!) -->
<link id="theme_css" rel="stylesheet" href="lighttheme.css" />

将您的主题CSS文件中的href属性更改为以下内容：

$('#chk').click(function() {
  if ($(this).is(':checked')) {
    // Set dark theme
    $("#theme_css").href = "darktheme.css";
  } else {
    // Set light theme
    $("#theme_css").href = "lighttheme.css";
  }
});

---

那不完全是你要求的，但如果你能实现类似这样的东西，可能会有用 :)

- Invizio

---

是的，我刚刚在某个地方看到了那个解决方案。也许这样做会更好。我的默认主题本身就是浅色的。所以我只需要darktheme.css吗？如果设备/电脑处于暗模式，我还能检测到并相应地应用darktheme.css吗？ - Mark

如果它已经可以正常运行，只使用 darktheme.css 的话，那就不需要 lighttheme.css。你可以将链接到 CSS 的部分禁用，而不是替换 href 的值。（例如，你可以尝试将 href 替换为空白） - Invizio