如何在基于PrimeVue的Vue应用中全局切换明暗主题？

你的当前配置仅实现了跟随系统主题偏好，要支持手动全局切换，还需要补充以下代码和配置调整：

1. 修改PrimeVue主题配置 #

将darkModeSelector从system改为自定义类选择器（比如.dark），这样我们可以通过控制DOM类来切换主题：

// Main.js 中修改PrimeVue配置部分
app.use(PrimeVue, {
  theme: {
    preset: Aura,
    options: {
      prefix: 'p',
      darkModeSelector: '.dark', // 替换为自定义类选择器
      cssLayer: false
    }
  }
});

2. 添加主题切换逻辑 #

在根组件（如App.vue）中实现切换功能，核心是操作document.documentElement的类名，并持久化用户选择：

<template>
  <div>
    <!-- 示例切换按钮 -->
    <button @click="toggleTheme">
      {{ isDark ? '切换为浅色主题' : '切换为深色主题' }}
    </button>
    <!-- 其他页面内容 -->
  </div>
</template>

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

// 初始化主题状态：优先读取本地存储，无则跟随系统设置
const isDark = ref(
  localStorage.getItem('theme') === 'dark' ||
  (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)
);

onMounted(() => {
  // 页面加载时应用保存的主题
  updateThemeClass(isDark.value);
});

// 切换主题的核心函数
const toggleTheme = () => {
  isDark.value = !isDark.value;
  updateThemeClass(isDark.value);
  // 持久化主题选择到本地存储
  localStorage.setItem('theme', isDark.value ? 'dark' : 'light');
};

// 更新DOM类名的辅助函数
const updateThemeClass = (darkMode) => {
  if (darkMode) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
};
</script>

关键说明 #

• 原配置中的darkModeSelector: 'system'仅在应用初始化时读取系统主题偏好，不支持手动切换。改为自定义类后，我们可以通过DOM类的增减来触发PrimeVue主题切换。
• Aura主题原生支持明暗模式，只要正确切换类名，所有PrimeVue组件会自动适配对应主题样式。
• 本地存储的作用是让用户的主题选择在页面刷新后依然保留。

内容的提问来源于stack exchange，提问作者PolakRobak