CSS 实现夜间模式和CSS自定义属性（变量）
方法一，基本方法
为每一份主题写一份 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