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