前端 “一鍵換膚“ 的 N 種方案
方式一：
1 把兩種css樣式寫在一個文件里，通過切換body元素的類名切換不同主題。
缺點：
多種主題樣式都要引入，導致代碼量增大
樣式不易管理
查找樣式復雜
開發效率低
拓展性差
方式二：
2 實現多套css主題樣式文件如: light.css; dark.css; 根據用戶切換操作，通過 link 標簽動態加載不同的主題樣式。
export default function setTheme(theme = 'ligth') {
let link = document.querySelector('#theme-link')
let href = "/theme/" + theme + ".css"
if (!link) {
let head = document.querySelector('head')
link = document.createElement('link')
link.id = '#theme-link'
link.rel = "stylesheet"
link.href = href
head.appendChild(link)
} else {
link.href = href
}
}
缺點：
需要重復 CV 多份樣式文件進行單獨修改
沒有單獨提取出可變的樣式部分
需要提前知道打包后的文件路徑，否則可能導致主題樣式引入錯誤
方式三：
3 利用css變量實現，但是css變量的var有兼容性，屬於新屬性。
通過 body.style.setProperty(key, value) 動態修改 body 上的 CSS 變量，使得頁面上的其他部分可以應用最新的 CSS 變量對應的樣式.
document.body.style.setProperty('--background-color','yellow')
//undefined
document.body.style.setProperty('--theme-color','yellow')
//undefined
style="-webkit-tap-highlight-color: transparent; --background-color:yellow; --theme-color:yellow;"
//document.body.style.setProperty('--key','value') 設置key的時候要帶上--否則加不上，只有color，background-color等正確的key才能加上。
//定義全局變量
document.body.style.setProperty('--theme-bg','red')
//用法：引用之前定義的全局變量
#app {
background-color: var(--theme-bg);
}
.father2[data-v-058daaa6] {
display: flex;
justify-content: center;
align-items: center;
height: 120px;
background-color: var(--theme-bg);
}
知識說明：
var()
var()函數可以代替元素中任何屬性中的值的任何部分。var()函數不能作為屬性名、選擇器或者其他除了屬性值之外的值。（這樣做通常會產生無效的語法或者一個沒有關聯到變量的值。）
:root
:root是一個偽類，表示文檔根元素html，非IE及ie8及以上瀏覽器都支持，在:root中聲明相當於全局屬性，只要當前頁面引用了:root segment所在文件，都可以使用var()來引用
:root {
--main-bg-color: pink;
}
body {
background-color: var(--main-bg-color);
}
calc()
可以用於計算css值。