vue3实现全局主题切换

分享俩种切换全局主题颜色方法

1.provide inject和使用vue3新特性动态css

在入口文件App.vue中定义好一个响应式变量，通过provide传递给后代组件，后代组件通过inject注入变量，在css中使用v-bind使用该变量

App.vue文件

后代组件

2，使用css全局变量:root

在App.vue中定义了一个挂载到html上的css变量，其余组件可通过var获取该变量

App.vue

通过document.documentElement.style.setProperty设置定义在html上的变量，并存到本地进行持久化，变换主题后，刷新浏览器也不会改变

在组件中通过var设置颜色

以上是简单演示如何切换全局主题颜色，扩展需自己填充，文章仅用于学习交流。