如何使用偏色方案媒体查询创建暗模式

介绍

暗模式（Dark Mode）是最近很受欢迎的一个设计趋势，它可以在降低屏幕对眼睛的刺激，有助于节约电池寿命。在实现暗模式时，我们通常会使用偏色方案媒体查询（prefers-color-scheme），该媒体查询会检测用户的系统主题设置（暗色和亮色），以此决定应用程序的配色方案。

实现步骤

1. 在CSS中使用偏色方案媒体查询

可以使用以下 CSS 代码应用暗色主题：

@media (prefers-color-scheme: dark) {
  /* 暗色主题样式 */
  body {
    background-color: #1a1a1a;
    color: #ebebeb;
  }
}

上述代码中的@media规则将在用户设置暗色主题时应用暗色样式。

类似地，以下样式将在用户设置亮色主题时应用亮色主题样式：

@media (prefers-color-scheme: light) {
  /* 亮色主题样式 */
}

2. 使用JavaScript切换主题

可以使用JavaScript切换应用程序的配色方案：

const toggleSwitch = document.querySelector('.toggle-switch');

toggleSwitch.addEventListener('change', switchTheme, false);

function switchTheme(event) {
  if (event.target.checked) {
    document.documentElement.setAttribute('data-theme', 'dark');
    localStorage.setItem('theme', 'dark');
  } else {
    document.documentElement.setAttribute('data-theme', 'light');
    localStorage.setItem('theme', 'light');
  }    
}

上面的代码使用了 HTML5 data-* 属性设置了一个 data-theme 属性，然后将其设置为“暗”或“亮”主题，然后使用本地存储将当前主题存储起来，以便下次访问时使用。

3. 使用CSS变量实现主题切换

可以使用CSS变量轻松切换主题，前提是需要使用自定义属性来定义颜色：

html {
  --background-color: #fff;
  --text-color: #000;
}

[data-theme="dark"] {
  --background-color: #333;
  --text-color: #fff;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

在上面的代码中，我们定义了两个自定义属性，然后在不同的 data-theme 中定义不同的值。在选择器中使用 var() 函数，就可以很方便地应用不同的值。整个样式表只需定义一次，就可以实现自动切换主题。

总结

使用偏色方案媒体查询来创建暗模式是一项简单而有效的技术，在现代 Web 应用程序中非常流行。以上是使用偏色方案媒体查询创建暗模式的介绍，希望可以帮助到您。