覆盖本机配色方案设置

随着各种操作系统的广泛采用，实现黑暗模式变得至关重要。虽然本机浏览器支持通过 CSS 媒体规则 @media (prefers-color-scheme: dark) 存在，但它可能无法完全满足用户偏好或迎合 Microsoft Edge 等不受支持的浏览器。

解耦系统设置来自网站主题

为了提供最佳的用户控制，允许用户覆盖系统的颜色方案设置至关重要。这确保他们可以为特定网站选择他们喜欢的主题。为此，需要结合使用 CSS 变量和 JavaScript。

CSS 配置

CSS 变量定义主题参数：

:root {
  --font-color: #000;
  --link-color: #1C75B9;
  --link-white-color: #fff;
  --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
  --font-color: #c1bfbd;
  --link-color: #0a86da;
  --link-white-color: #c1bfbd;
  --bg-color: #333;
}

在整个样式表中使用变量以确保灵活性：

body {
  color: #000;
  color: var(--font-color);
  background: rgb(243,243,243);
  background: var(--bg-color);
}

JavaScript 实现

JavaScript 在检测用户偏好和主题之间切换方面发挥着关键作用：

function detectColorScheme() {
  let theme = "light";

  if (localStorage.getItem("theme") == "dark") {
    theme = "dark";
  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    theme = "dark";
  }

  if (theme == "dark") {
    document.documentElement.setAttribute("data-theme", "dark");
  }
}

detectColorScheme();

toggleTheme函数处理主题切换：

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

此 JavaScript 确保自动主题检测，并允许用户使用复选框覆盖它：

结论

通过结合 CSS 变量和 JavaScript，我们使用户能够控制网站的配色方案，无论其系统设置如何。这种方法可确保增强的用户体验，满足个人喜好和各种浏览器的限制。