带有偏好颜色方案的暗模式开关：暗答案

【问题标题】：Dark mode switch with prefers-color-scheme: dark带有偏好颜色方案的暗模式开关：暗
【发布时间】：2020-05-19 20:06:49
【问题描述】：

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

<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

【问题讨论】：

如果用户的默认方案是深色的，你想改变页面的主题吗？
默认主题为浅色。当用户使用切换/切换主题时，应更改为 prefers-color-scheme: dark。使用 prefers-color-scheme: dark 当用户 pc/laptop/mobile 处于深色模式时，它已经可以工作了。
我已经回复了我认为更适合您的情况的答案。希望对你有帮助

标签： javascript jquery css

【解决方案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');    
    }   
});

【讨论】：

哦，这很整洁。所以我可以省略prefers-color-scheme: dark 我还能自动检测设备/电脑是否处于暗模式？
您可以在 prefers-color-scheme: dark 查询中使用相同的 CSS 变量更改颜色。所以是的，在这种情况下它也可以工作。
我明白了。我会摆弄一下这个。看起来像一个干净的解决方案。
更多信息可以参考这篇文章dev.to/ananyaneogi/…
太棒了，试过了，效果很好！有没有办法记住被切换到暗模式？由于我有多个页面，但浏览时它会恢复正常

【解决方案2】：

我不确定您是否可以创建这样的自定义 CSS 媒体查询。

根据您的灵活性，您可以尝试不同的方法，如下所示：

将所有与主题无关的 CSS 存储在一个文件中（例如，style.css）
将明暗主题 css 存储在其特定文件中（例如，lighttheme.css 和 darktheme.css）
在您的 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";
  }
});

这不是完全你所要求的，但如果你能实现这样的东西它可以工作:)

【讨论】：

是的，我刚刚在某处看到了该解决方案。也许最好走这条路。我的默认主题本身就是轻的。所以我猜我只需要darktheme.css？然后我是否仍然能够检测设备/电脑是否处于暗模式并相应地应用 darktheme.css？
是的，如果它已经只适用于 darktheme.css，那么您不需要 lighttheme.css。您可以停用指向 CSS 的链接，而不是替换 href 值。（例如，您可以尝试将href 替换为空白）