1、使用伪元素实现

使用css3中的:root伪类选择器和var变量

在全局css文件中定义主题变量

/* 白天颜色 */
:root {
    --comment-color: #f1f2f3;
    --grey-0: #fff;
    --grey-1: #fdfdfd;
    --grey-2: #f7f7f7;
    --grey-3: #eff2f3;
    --grey-4: #ccc;
    --grey-5: #999;
    --grey-6: #666;
    --grey-7: #333;
    --grey-8: #222;
    --grey-9: #000;
    --grey-1-a0: rgba(253, 253, 253, 0);
    --grey-1-a7: rgba(253, 253, 253, 0.7);
    --grey-1-a5: rgba(253, 253, 253, 0.5);
    --grey-1-a3: rgba(253, 253, 253, 0.3);
    --grey-9-a1: rgba(0, 0, 0, 0.1);
    --grey-9-a5: rgba(0, 0, 0, 0.5);
    --grey-2-a0: rgba(247, 247, 247, 0);
    --color-pink-light: #ffe6fa;
    --color-cyan-light: #e3fdf5;
    --color-red: #e9546b;
    --color-pink: #ed6ea0;
    --color-orange: #ec8c69;
    --color-yellow: #eab700;
    --color-green: #0a7426;
    --color-aqua: #3e999f;
    --color-blue: #49b1f5;
    --color-purple: #9d5b8b;
    --color-grey: #869194;
    --color-red-a1: rgba(233, 84, 107, 0.1);
    --color-red-a3: rgba(233, 84, 107, 0.3);
    --color-pink-a3: rgba(237, 110, 160, 0.3);
    --color-pink-light-a3: rgba(255, 230, 250, 0.3);
    --color-pink-light-a5: rgba(255, 230, 250, 0.5);
    --color-pink-light-a7: rgba(255, 230, 250, 0.7);
    --body-bg-shadow: var(--grey-2);
    --box-bg-shadow: var(--grey-9-a1);
    --text-color: var(--grey-7);
    --header-text-color: var(--grey-0);
    --primary-color: var(--color-red);
    --nav-bg: linear-gradient(-225deg, var(--color-cyan-light) 0, var(--color-pink-light) 100%);
    --footer-bg: linear-gradient(-45deg, #ec8c69, #e9546b, #38a1db, #23d5ab);
    --note-border: #cda0c7;
    --note-bg: #fdf8ff;
    --note-text: #8a51c0;
    --note-hover: #f14668;
    --comment-btn: #ed9abb;
}

/* 黑夜颜色 */
[theme="dark"]:root {
    --comment-color: var(--grey-1);
    --grey-0: #222;
    --grey-1: #21252b;
    --grey-2: #363636;
    --grey-3: #444;
    --grey-4: #666;
    --grey-5: #aaa;
    --grey-6: #ccc;
    --grey-7: #ddd;
    --grey-8: #eee;
    --grey-9: #f7f7f7;
    --grey-1-a7: rgba(34, 34, 34, 0.7);
    --grey-1-a5: rgba(34, 34, 34, 0.5);
    --grey-1-a3: rgba(34, 34, 34, 0.3);
    --grey-1-a0: rgba(34, 34, 34, 0);
    --grey-9-a1: rgba(51, 51, 51, 0.1);
    --grey-2-a0: rgba(54, 54, 54, 0);
    --color-pink-light: #322d31;
    --color-cyan-light: #2d3230;
    --color-red: rgba(237, 118, 137, 0.9);
    --color-pink: rgba(241, 139, 179, 0.8);
    --color-orange: rgba(240, 163, 135, 0.8);
    --color-yellow: #ffe175;
    --color-green: #86c59d;
    --color-aqua: #97d3d6;
    --color-blue: #9cd0ed;
    --color-purple: #cfacc5;
    --color-grey: #c3c8ca;
    --body-bg-shadow: #000;
    --box-bg-shadow: #000;
    --text-color: var(--grey-5);
    --header-text-color: var(--grey-9);
    --note-bg: rgba(48, 49, 50, 0.8);
    --note-text: rgba(109, 164, 219, 0.8);
    --note-hover: rgba(168, 49, 72, 0.8);

    img {
        filter: brightness(0.8);
    }
}

在组件中使用主题颜色
如下

body {
    background-color: var(--theme-color);
    color: var(--theme-text-color);
}

通过js事件动态改变主题变量，使用css变量替换

    let isDark = false;
    /*根据 isDark 值， 使用给html标签绑定 theme 进行切换 白天黑夜模式*/
    listener() {
      // 获取html根元素标签
      let html = document.documentElement;
      if (!isDark) {
        // html添加theme 属性值
        html.setAttribute("theme","")
      } else {
        // html添加theme 属性值
        html.setAttribute("theme","dark")
      }　
    }

还可以将每次切换以后将当前主题名称保存至本地 避免下次打开页面主题丢失,初次加载的时候设置一个默认主题。

2、使用filter

html[theme='dark-mode'] {
  filter: invert(1) hue-rotate(180deg);
}

CSS filter 属性将模糊或颜色转移等图形效果应用到元素上。滤镜通常用于调整图像、背景和边框的渲染。

对于这种黑暗模式，我们将使用两个滤镜，即 invert 和 hue-rotate

invert滤镜可以帮助反转应用程序的颜色方案，因此，黑色变成了白色，白色变成了黑色，所有颜色也是如此。因此，黑变白，白变黑，所有颜色也是如此。

hue-rotate滤镜可以帮助我们处理所有其他非黑白的颜色。将色调旋转180度，我们确保应用程序的颜色主题不会改变，而只是减弱它的颜色。

！！！这个方法唯一的问题是，它也会反转你应用程序中的所有图像。因此，我们将对所有图像添加相同的规则来反转效果。

比如给图片，视频或者一些特定的类名加上相同的规则，

html[theme='dark-mode'] img,video,.image{
  filter: invert(1) hue-rotate(180deg);
}

给HTML元素添加一个过渡，确保过渡更丝滑

html {
  transition: color 300ms, background-color 300ms;
}