Vue3 + Vite + Css3切换主题

<template>
  <div class="theme-switcher">
    <button @click="toggleTheme">切换主题</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const theme = ref('light');
 
function toggleTheme() {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
  document.body.classList.toggle('theme-light', theme.value === 'light');
  document.body.classList.toggle('theme-dark', theme.value === 'dark');
}
</script>
 
<style>
.theme-light {
  background-color: #fff;
  color: #000;
}
 
.theme-dark {
  background-color: #000;
  color: #fff;
}
</style>

这个简单的Vue 3组件使用Vite创建，包含一个按钮来切换主题。点击按钮时，会更新页面的主题类，从而切换背景和文字颜色。这个例子展示了如何使用Vue 3的<script setup>语法糖以及Vite开箱即用的热重载功能。