当前位置：首页 > VUE

vue主题切换实现

2026-02-19 09:56:17VUE

实现 Vue 主题切换的方法

使用 CSS 变量动态切换主题

定义全局 CSS 变量，通过修改变量值实现主题切换。在根元素（如 :root）中定义主题相关变量：

:root {
  --primary-color: #42b983;
  --bg-color: #ffffff;
  --text-color: #333;
}

.dark-theme {
  --primary-color: #646cff;
  --bg-color: #242424;
  --text-color: rgba(255, 255, 255, 0.87);
}

在 Vue 组件中通过 document.documentElement.classList 切换主题类：

vue主题切换实现

const toggleTheme = () => {
  document.documentElement.classList.toggle('dark-theme');
};

使用 Vuex/Pinia 管理主题状态

通过状态管理工具存储当前主题，结合计算属性动态应用样式：

// Pinia 示例
import { defineStore } from 'pinia';

export const useThemeStore = defineStore('theme', {
  state: () => ({
    isDark: false
  }),
  actions: {
    toggleTheme() {
      this.isDark = !this.isDark;
      document.documentElement.classList.toggle('dark-theme', this.isDark);
    }
  }
});

结合 Tailwind CSS 实现

配置 tailwind.config.js 启用暗色模式：

vue主题切换实现

module.exports = {
  darkMode: 'class',
  // ...
}

在模板中通过类名切换：

<button @click="toggleTheme">切换主题</button>
<div :class="{ 'dark': isDark }">
  <!-- 内容 -->
</div>

持久化主题选择

使用 localStorage 保存用户选择，避免刷新后重置：

const saveThemePreference = (isDark) => {
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
};

const loadThemePreference = () => {
  return localStorage.getItem('theme') === 'dark';
};

完整组件示例

<template>
  <button @click="toggleTheme">
    {{ isDark ? '浅色模式' : '深色模式' }}
  </button>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const isDark = ref(false);

const toggleTheme = () => {
  isDark.value = !isDark.value;
  document.documentElement.classList.toggle('dark-theme', isDark.value);
  localStorage.setItem('theme', isDark.value ? 'dark' : 'light');
};

onMounted(() => {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme === 'dark') {
    isDark.value = true;
    document.documentElement.classList.add('dark-theme');
  }
});
</script>