方法一，基本方法

为每一份主题写一份 CSS 文件，批量替换颜色，例如 style.css、style.dark.css。如果需要切换模式的花，只需要 改变 link 指向的 CSS 文件路径。

方法二，使用 SCSS 等工具引入颜色变量

在方法一的基础上，生成多个 CSS 文件路径。

方法三，使用CSS自定义属性（变量）

CSS 原生变量支持，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。

属性名需要以两个减号（--）开始，大小写敏感，属性值可以是任何有效的CSS值。和其他属性一样，自定义属性也是写在规则集之内的，一般定义在根伪类 :root 下：

element {
 --main-bg-color: brown;
}
:root {
 --main-bg-color: brown;
}

# 使用局部变量时用 var() 函数包裹
element {
 background-color: var(--main-bg-color);
}

自定义属性备用值：

.one {
    color: var(--my-var, red); /* Red if --my-var is not defined */
    background-color: var(--my-var, var(--my-background, pink)); /* pink if --my-var and --my-background are not defined */
    background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */
}

在 JavaScript 中获取或者修改 CSS 变量和操作普通 CSS 属性是一样的：

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");
// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");
// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);

方法四，只使用JavaScript

这种方法太敷衍了

/* -------------------------------------------------------------------------- *
 * 夜间模式
 */
function setDark() {
  var dark = [
    'img',
    'video',
    'iframe',
    'embed',
    'object',
    '[style*="background:url"]',
    '[style*="background-image:url"]',
    '[style*="background: url"]',
    '[style*="background-image: url"]',
    '[style*="background-image"][style*="image-set"]'
  ];
  dark = 'body,' + dark.join(',') + '{filter:invert(100%);}'
    + dark.map(function (p) { return dark.map(function (p2) { return p + ' ' + p2 }).join(',') }).join(',') + '{filter:invert(0%);}'
    + 'body{background-color:rgba(0,0,0,0.9382)!important;}:root,html{background-color:rgba(0,0,0,0)!important;}';


  var css = document.createElement('style');
  css.classList.add('dark-style');
  css.innerHTML = dark;
  document.body.appendChild(css);
  setCookie("isDark", "yes");
}


// 判断是否已经设置过暗黑模式
var isDark = getCookie("isDark");
if (isDark == "yes") {
  setDark();
  document.querySelector('.dark-switch-button').classList.add("dark");
}


document.querySelector('.dark-switch-button').addEventListener("click", function () {
  if (this.classList.contains("dark")) {
    document.querySelector(".dark-style") && document.querySelector(".dark-style").remove();
    setCookie("isDark", "no");
  } else {
    setDark();
  }
  this.classList.toggle("dark");
});

备注：图片可以使用CSS 滤镜 CSS3 filter brightness()降低暗度，https://javascript.net.cn/article?id=682

参考：

https://developer.mozilla.org/zh-CN/docs/Web/API/CSSRule

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