Vue3自定义Hooks一键换肤教程

核心
1.使用CSS变量, 准备两套CSS颜色, 一套是在 light模式下的颜色,一套是在dark模式下的颜色
2.dark模式下的 CSS 权重要比 light 模式下的权重高, 不然当我们给html添加自定义属性[data-theme=‘dark’]的时候, dark模式权重比light低,会一直不起效果
3.当我们点击 dark 模式的时候, 给 html 设置自定义属性[data-theme=‘dark’]
4.当我们点击 light 模式的时候, 给 html 设置自定义属性[data-theme=‘light’]
5.在 dark 模式下, 会匹配到html[data-theme=‘dark’]选择器下的样式
6.在 light 模式下,由于我们没有设置html[data-theme=‘light’]的方案, 那么他就匹配:root(即html)下的样式
两套样式代码大概如下(列了一部分):

:root {
   
   
  --color-body-bg: #ffffff;
  --color-text: #000;
  --color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
}

html[data-theme='dark'] {
   
   
  --color-body-bg: #222222;
  --color-text: #ffffff;
  --color-primary-bg-for-transparent: rgba(255, 255, 255, 0.12);
}

然后我们点击的时候,通过

 let theme = 'light'            // light / dark  
 document.documentElement.