vue less 切換主題（面板）

記錄一下基於vue和less的專案是咋切換主題的。這個方法適用於已經在程式碼裡到處都是less全域性變數或mixins，想讓每個變數在不同主題下有不同的值的情況。不相容ie

就以一個顏色舉例：假設我已經在專案裡使用了很多次@dark1-background: #141414，這個全域性變數已經被存放在variables.less裡

1. 寫一個theme.css用於存放所有主題的所有樣式，不同主題下@dark1-background所代表的顏色不同

.dark-theme {
  --dark1-background: #141414;
}
.light-theme {
  --dark1-background: #f4f4f4;
}

2. 在variables.less裡引入theme.css，並修改原來的語句

@import 'theme.css';
// @dark1-background: #141414; 本來是這樣子，改成下面那樣
@dark1-background: var(--dark1-background);

3. 需要切換的時候

document.getElementById('app').className = "dark-theme"
//或者 document.getElementById('app').className = "light-theme"

完成！