检测暗模式 - Javascript

在现代操作系统和浏览器中，暗模式（Dark Mode）已成为一个愈来愈流行的功能。它可以让用户在夜间或低光环境下更轻松地使用设备，也可以减少屏幕对眼睛的刺激。在这篇文章中，我们将介绍如何使用 Javascript 检测暗模式并作出相应的调整。

检测暗模式

在大多数现代浏览器中，可以使用 matchMedia() 函数检测当前是否启用了暗模式。如果是的话，则返回 true，否则返回 false。

const isDarkModeEnabled = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

if (isDarkModeEnabled) {
  // 暗模式已启用
} else {
  // 暗模式未启用
}

我们首先检查浏览器是否支持 matchMedia() 函数。然后，我们使用媒体查询 '(prefers-color-scheme: dark)' 来检测当前是否启用了暗模式，并将其保存在变量 isDarkModeEnabled 中。最后，我们根据该变量的值来作出相应的调整。

改变网页颜色主题

在检测到暗模式启用后，我们可以使用 CSS 样式来改变网页的颜色主题。我们可以设置不同的颜色方案、改变背景颜色或者调整文本颜色。

@media (prefers-color-scheme: dark) {
  /* 在暗模式下使用的样式 */
  body {
    background-color: #222;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  /* 在亮模式下使用的样式 */
  body {
    background-color: #fff;
    color: #333;
  }
}

在上面的 CSS 代码中，我们使用 @media 媒体查询来创建两个不同的样式方案。当检测到暗模式启用时，将使用暗色主题样式。如果未启用，则使用亮色主题样式。

总结

在这篇文章中，我们学习了如何使用 Javascript 检测暗模式并作出相应调整。通过 matchMedia() 函数可以轻松地检测当前是否启用了暗模式，然后使用 CSS 样式来改变网页的颜色主题。这将为用户提供更好的体验，并且可以让网站看起来更加时尚。