给博客增加深色主题支持

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就是你网站的暗色主题