给博客增加深色主题支持

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