如何在Vue3中创建动态主题切换功能

npm init vite@latest my-vue3-app --template vue
cd my-vue3-app
npm install

body {
    background-color: #ffffff;
    color: #333333;
}
header {
    background-color: #f0f0f0;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

body {
    background-color: #1e1e1e;
    color: #f0f0f0;
}
header {
    background-color: #444444;
    padding: 10px;
    border-bottom: 1px solid #666;
}

<template>
  <div>
    <header>
      <h1>动态主题切换示例</h1>
      <button @click="toggleTheme">{{ currentTheme === 'light' ? '切换到暗色主题' : '切换到亮色主题' }}</button>
    </header>
    <main>
      <p>欢迎使用我们的网站！您可以选择您喜欢的主题模式。</p>
    </main>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
// 主题状态
const currentTheme = ref('light');
// 切换主题功能
const toggleTheme = () => {
  currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light';
};
// 监听主题变化，添加相应的CSS类
watch(currentTheme, (newTheme) => {
  document.body.className = newTheme; // 更换body的class
  // 动态引入CSS文件
  const linkElement = document.getElementById('theme-style') || createLinkElement();
  linkElement.href = newTheme === 'light' ? '/src/assets/light.css' : '/src/assets/dark.css';
});
// 创建链接元素
const createLinkElement = () => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.id = 'theme-style';
  link.href = '/src/assets/light.css'; // 默认主题
  document.head.appendChild(link);
  return link;
};
// 在组件挂载时执行
document.body.className = currentTheme.value; // 默认使用亮色主题
</script>
<style scoped>
main {
    padding: 20px;
}
button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
</style>

<template>
  <div id="app">
    <ThemeToggle />
  </div>
</template>
<script setup>
import ThemeToggle from './components/ThemeToggle.vue';
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

npm run dev