スキニング機能を実装するためのCSS変数

/** css 
 * :root内部は、すべてのCSSセレクタが使用できるグローバルCSS変数の設定である。 
 */
 
:root{
 --theme:#fff;
}
/** 
 * もちろん、css変数をローカルに宣言することも可能である。
 * css変数をvar()で使用する
 */
 
.main{
 --color:red;
 background-color:var(--theme);
 color:var(--color)
}

<!-- ヴューに基づく -- 。>
<div class="main" @click="handleChangeTheme">クリックして剥がす</div>

// js 
methods:{
 handleChangeTheme(){
 // css変数は括弧の中にあり、その後に変更されたプロパティの値が続く。
 document.body.style.setProperty('--theme','#000'); 
 }
}