随着现代Web开发的进步，用户体验变得愈发重要。在这方面，实现动态主题切换功能无疑是提高用户体验的有效方式。通过动态主题切换，用户可以根据自己的喜好选择明亮的主题或暗色主题，提供了更个性化、更舒适的使用体验。今天，我们将通过一个简洁的示例来展示，如何在Vue 3中实现动态主题切换功能，使用setup语法糖来优化我们的代码。

项目准备

首先，确保你的开发环境中已经安装了Vue 3。你可以使用Vue CLI或Vite来创建一个新的项目。这里我们使用Vite来启动一个新项目。

<code>npm init vite@latest my-vue3-app --template vue

cd my-vue3-app

npm install

安装完成之后，打开项目，使用你的代码编辑器准备进行接下来的步骤。

主题样式

我们将在src/assets下创建两个基本的主题样式文件：light.css和dark.css。

light.css

body {

background-color: #ffffff;

color: #333333;

}

header {

background-color: #f0f0f0;

padding: 10px;

border-bottom: 1px solid #ddd;

}

dark.css

body {

background-color: #1e1e1e;

color: #f0f0f0;

}

header {

background-color: #444444;

padding: 10px;

border-bottom: 1px solid #666;

}

创建动态主题切换功能

现在我们已经定义了基本的样式，接下来在src/components目录下创建一个新的组件ThemeToggle.vue，用于实现主题切换功能。

<template>

<div>

<header>

<h1>动态主题切换示例</h1>

<button @click="toggleTheme">{ { currentTheme === 'light' ? '切换到暗色主题' : '切换到亮色主题' }}</button>code>

</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>

代码详解