如何为网站添加暗黑模式

2021-02-26

方法1：prefers-color-scheme

用于检测用户是否有将系统的主题色设置为亮色或者暗色。

@media (prefers-color-scheme: dark) {
  /* all your styles for dark mode here */
  body {
    background: #000;
  }
}

@media (prefers-color-scheme: light) {
  /* all your styles for light mode here */
  body {
    background: #fff;
  }
}

方法2：使用CSS滤镜

1、css文件

html[theme="dark-mode"] {
  filter: invert(1) hue-rotate(180deg);
}

html[theme="dark-mode"] img {
  filter: invert(1) hue-rotate(180deg);
}

html {
  transition: color 300ms;
  background-color 300ms;
}

2、js文件

document.addEventListener("DOMContentLoaded", () => {
  var html = document.querySelector("html");
  var toggle = document.querySelector("#toggle");

  if (localStorage.getItem("theme") === "dark-mode") {
    html.setAttribute("theme", "dark-mode");
  }

  toggle.addEventListener("click", () => {
    var theme = html.getAttribute("theme") || "";
    if (theme && theme === "dark-mode") {
      html.setAttribute("theme", "");
    } else {
      html.setAttribute("theme", "dark-mode");
    }
    localStorage.setItem("theme", html.getAttribute("theme"));
  });
});

方法3：准备两个样式文件

1、html文件

<html>
  <head>
    <link id="theme" rel="stylesheet" type="text/css" href="light-theme.css" />
  </head>
  <body>
    <button id="toggle">Toggle</button>
  </body>
</html>

2、js文件

document.addEventListener("DOMContentLoaded", () => {
  const theme = document.getElementById("theme");
  const toggle = document.getElementById("toggle");
  toggle.addEventListener("click", () => {
    if (theme.href.includes("light")) {
      theme.href = "dark-theme.css";
    } else {
      theme.href = "light-theme.css";
    }
    localStorage.setItem("theme", theme.href);
  });
});

More

prefers-color-scheme
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme

Can I use prefers-color-scheme?
https://caniuse.com/?search=prefers-color-scheme

CSS filter
https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

给网站添加暗黑模式
https://www.cnblogs.com/kreios/p/14399932.html

adding-darkmode-to-website
https://w3layouts.com/adding-darkmode-to-website/