1、CSS 滤镜反转颜色

/* 代码实现全网站暗黑模式 */
@media (prefers-color-scheme: dark) {
    html {
        background-color: #fff !important;
        color: #000 !important;
    }

    html {
        /* 反转180度颜色 */
        filter: invert(1) hue-rotate(180deg) !important;
    }

    /* 图片、视频等元素不需要处理，可继续添加可以不用处理的元素 */
    img,
    video,
    iframe {
        /* 再反转180度变成原来颜色 */
        filter: invert(1) hue-rotate(180deg) !important;
    }
}

2、JS 库添加蒙板

<script src="https://cdnjs.cloudflare.com/ajax/libs/Darkmode.js/1.5.7/darkmode-js.min.js"></script>
<script>
    // 监听系统暗黑模式变化
    let darkmode = new Darkmode()
    window
        .matchMedia('(prefers-color-scheme: dark)')
        .addEventListener('change', (event) => {
            if (event.matches) {
                // 切换暗黑模式
                if (!darkmode.isActivated()) {
                    darkmode.toggle()
                }
            } else {
                // 切换亮色模式
                if (darkmode.isActivated()) {
                    darkmode.toggle()
                }
            }
        })
</script>

3、CSS 伪类:not() 选择器

/* 代码实现全网站暗黑模式 */
@media (prefers-color-scheme: dark) {
    /* 排除的 a 和 code 元素 */
    html *:not(a, code *) {
        background-color: #000000 !important;
        color: #ffffff !important;
    }

    /* a元素单独设置颜色 */
    a {
        color: #4caf50 !important;
    }
}

4、CSS media 媒体查询

HTML <link> media 属性定义和用法

media 属性规定目标资源针对什么媒体/设备进行了优化。

media 属性指定了被链接文档将显示在什么设备上。

该属性主要与 CSS 样式表一起使用，为不同的媒体类型指定不同的样式。

media 属性可以接受多个值。

<!-- 只在亮色模式下生效 -->
<link
    rel="stylesheet"
    media="(prefers-color-scheme: light)"
    href="/assets/css/light.css"
/>

<!-- 只在暗黑模式下生效 -->
<link
    rel="stylesheet"
    media="(prefers-color-scheme: dark)"
    href="/assets/css/dark.css"
/>