1、使用偽元素實(shí)現(xiàn)

使用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事件動(dòng)態(tài)改變主題變量，使用css變量替換

    let isDark = false;
    /*根據(jù) isDark 值， 使用給html標(biāo)簽綁定 theme 進(jìn)行切換 白天黑夜模式*/
    listener() {
      // 獲取html根元素標(biāo)簽
      let html = document.documentElement;
      if (!isDark) {
        // html添加theme 屬性值
        html.setAttribute("theme","")
      } else {
        // html添加theme 屬性值
        html.setAttribute("theme","dark")
      }　
    }

還可以將每次切換以后將當(dāng)前主題名稱保存至本地 避免下次打開頁(yè)面主題丟失,初次加載的時(shí)候設(shè)置一個(gè)默認(rèn)主題。

2、使用filter

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

CSS filter 屬性將模糊或顏色轉(zhuǎn)移等圖形效果應(yīng)用到元素上。濾鏡通常用于調(diào)整圖像、背景和邊框的渲染。

對(duì)于這種黑暗模式，我們將使用兩個(gè)濾鏡，即 invert 和 hue-rotate

invert濾鏡可以幫助反轉(zhuǎn)應(yīng)用程序的顏色方案，因此，黑色變成了白色，白色變成了黑色，所有顏色也是如此。因此，黑變白，白變黑，所有顏色也是如此。

hue-rotate濾鏡可以幫助我們處理所有其他非黑白的顏色。將色調(diào)旋轉(zhuǎn)180度，我們確保應(yīng)用程序的顏色主題不會(huì)改變，而只是減弱它的顏色。

！！！這個(gè)方法唯一的問題是，它也會(huì)反轉(zhuǎn)你應(yīng)用程序中的所有圖像。因此，我們將對(duì)所有圖像添加相同的規(guī)則來反轉(zhuǎn)效果。

比如給圖片，視頻或者一些特定的類名加上相同的規(guī)則，

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

給HTML元素添加一個(gè)過渡，確保過渡更絲滑

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