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) {

}

如何使开关起作用以启用Preferreds-Color-Scheme：Dark

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');    
    }   
});

Answer 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";
  }
});

这不是您真正要求的，但如果您可以实现类似的功能，它就可以工作：）

具有首选颜色方案的暗模式开关：暗

2 个答案: