html一键换肤，vue多主题风格切换

废话不多说直接上代码主要就是：[data-theme="light"]{....} 直接的css起作用，通过 html的自定义属性data-theme=“light”，切换light的主题，没整明白是不是 html5的新特性，但是我照猫画虎能用，（--text-color）这个用法就是 var(--text-color) 这样去用的其他自己尝试

app.vue的代码

		<script setup lang="ts">
	
		// This starter template is using Vue 3 <script setup> SFCs
	
		// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
	
		const handelClick = (t:boolean) => {
	
		      const body = document.documentElement as HTMLElement;
	
		      if (!t) body.setAttribute('data-theme', 'dark');
	
		      else body.setAttribute('data-theme', 'light');
	
		    };
	
		</script>
	
		<template>
	
		<button type="submit" style="background-color: var(--text-color);" @click="handelClick(true)">true</button>
	
		<button type="submit" style="background-color: var(--text-color);" @click="handelClick(false)">false</button>
	
		</template>

main.js的代码

		import { createApp } from 'vue'
	
		import './style.css'
	
		import './assets/dark.css'
	
		import './assets/light.css'
	
		import App from './App.vue'
	
		createApp(App).mount('#app')

light.css的代码，

		[data-theme="light"] {
	
		    --body-background: #efefef;
	
		    --text-color:  #333;
	
		    --primary-color: #3D79C4;
	
		    --danger-color: #E3524E;
	
		    --warning-color: #ffa94e;
	
		  }