使用这个简短的 CSS 技巧为您的网站添加暗模式

如今，大多数应用程序都支持暗黑模式：命令行、IDE、浏览器等等。您的网站又有什么不同呢？当访客的浏览器启用暗黑模式时，您的网站也可以变暗。这比您想象的要简单。我会教您如何操作。

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: #ccc;
  }
}

你好，黑暗，我的老朋友。

此 CSS 代码片段会覆盖用户深色主题的样式。值得一提的是，此功能已在 Chrome 76、Firefox 67、Safari 12.1 和 Opera 62 中可用。

您可以选择使用 Javascript 检查浏览器是否支持它。

if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
  console.log('Browser doesn\'t support dark mode');
}

希望这段简短的代码片段能提升你网站的风格。
祝你编程愉快🚀