给博客增加深色主题支持

1. 新建深色主题css文件, 名称随意, 如 dark.css
2. 找到主题颜色的css文件, 将所有关于颜色定义的代码复制到 dark.css 里
3. 编辑 dark.css 文件内的颜色值
4. 在页面任意位置增加一个切换按钮, id随意, 内容随意, 如 <button id="dark-btn">更换主题</button>
5. 增加js代码用于切换

const darkBtn = document.getElementById("切换按钮ID");
darkBtn.addEventListener("click", () => {
  const head = document.getElementsByTagName("head")[0];
  const darkStyle = document.getElementById("dark-style");
  if (darkStyle) {
    head.removeChild(darkStyle);
    document.cookie = "colorScheme=light; path=/; expires=0";
  } else {
    const link = document.createElement("link");
    link.id = "dark-style";
    link.rel = "stylesheet";
    link.href = "深色主题css文件路径(dark.css文件路径)";
    head.appendChild(link);
    document.cookie = "colorScheme=dark; path=/; expires=0";
  }
});
function isDarkMode() {
  const cookies = document.cookie.split(";");
  for (let i = 0; i < cookies.length; i++) {
    let cookie = cookies[i].trim();
    if (cookie.startsWith("colorScheme=")) {
      const value = cookie.substring("colorScheme=".length);
      return value === "dark";
    }
  }
  return false;
}
if (isDarkMode()) {
  darkBtn.click();
}

注意: 该方法需要启用缓存, 不然效果很差

提示: 快速获取网站暗色CSS的方法

1. 安装 DarkReader
2. 打开你的网站，使用DarkReader暗化
3. 打开控制台，运行

[...document.querySelectorAll(".darkreader")]
  .flatMap((stylesheet) => [...stylesheet.sheet.cssRules])
  .map((rule) => rule.cssText)
  .filter(Boolean)
  .join("  ");

然后输出的css就是你网站的暗色主题