在項目開發中可能會遇到切換主題色或者換膚的需求，其實有很多的解決方法，現在很多項目css都會使用預處理語言，那么可以利用less，scss或stylus進行預處理。然而前提是你的項目剛好是用less，scss或stylus，而且每種方法的處理方法都不一樣，可能你接手別人項目進行維護修改，用的恰好不是你熟悉的預處理語言，那有沒有通用的方法呢？有的，那就是直接用css來處理，不管你是哪種預處理語言都適用。看看效果先：
下面說的是vue+less項目中利用純css控制方法：
1.在你項目的common樣式表里（應該有通用樣式表吧？要不reset樣式表？）寫一句話：
body { --themeColor: #0ff; }
這句話的作用是設置你的默認主題色。--themeColor是自定義的名字，大家隨意。
2.js調用setProperty進行顏色值的控制，我覺得核心就是這句話：
document.body.style.setProperty('--themeColor', this.$store.state.home.themeColor)
因為項目中在系統設置有個需求是用顏色選擇器選擇顏色點擊確定后立刻更改主題色，所以我將顏色值改變寫在了vuex中，通過dispatch進行更改顏色。這個大家可以根據自己的實際需求來做，有的可能就是指定幾個顏色值進行切換，那就不需要像我這樣用vuex來操作。
3.既然js已經控制了，那我們還需要在css中表達，在組件的style中需要控制的標簽進行變化：
.confirm {
line-height: 40px;
background-color: var(--themeColor);
}
精華在於var()，這個var()是什么意思呢？這個函數用於插入自定義的屬性值，如果這個屬性值在很多地方被使用。這說的不就是我們切換主題色的需求嗎？用他就對了！！！
寫到這里，需求就被完成了，親測有效哦。
如需轉載請注明出處：https://www.cnblogs.com/zishang91/p/12218172.html，以便有錯誤可以及時修改，若有錯漏不足之處，請見諒並且指點，謝謝！！！