日常我們使用換膚時，一般采用以下方案之一；
1，常見用法，以elemntui為例，是換了一個引入的css主題文件
2，使用less或者sass這樣的css預(yù)處理器，在主less文件中寫入變量，使用的時候也使用變量繼承
3，后端保存樣式，通過接口返回給前端，前端重新渲染
4，其他……
本次主要針對第三種方案進行了研究，也使用方案2的精神
搜索html，var() ，很多教程都提示要寫在:root選擇器下，其實并不是，根據(jù)我的測試結(jié)果，理論上來說任意標簽都可以，寫在:root、html或者body下，只是為了更好的全局使用，畢竟這些選擇器優(yōu)先級很高。
95cb9962c3ea7ad4bb00c4407ca314cf_9137.png
寫法1：在app.vue中注冊一個變量，我這里選擇注冊在id="app"上
b6f6fb053b23e305ea4f5381e2191db.png
fd38282d0fa31949911274aff844994.png
cce648fdf7f8693fdb623428811ffee.png
e8f132c948b78991b7b07f877ee5335.png
72301bedcc8f879c33c7c8265852aea.png
image.png
寫法2：使用document.body.style.setProperty注冊屬性在body上
這個方法有一個好處，在其他頁面，如果需要在js(不是css)中獲取某些顏色時，可以用getPropertyValue拿到
bdbc32b3d27f9e3ecf6d2308efb55af.png
78ed647149cb4cb98e8341d6d02208c.png
image.png
擴展：
var可以支持兩個屬性，如上文未注冊testColor，但是使用了，可以多設(shè)置一個默認顏色。
image.png
image.png
image.png
