无需index.html link标签，基于PrimeVue实现主题切换问题

核心改动思路 #

原代码依赖PrimeVue.changeTheme操作link标签切换主题，但现在主题是通过main.js静态导入的，因此需要改为动态导入主题CSS文件，通过操作DOM替换主题样式，同时保留本地存储记录主题状态、UI切换逻辑。

调整后的Topbar.vue代码 #

脚本部分 #

import { ref, onMounted } from 'vue';
import { usePrimeVue } from 'primevue/config';

const PrimeVue = usePrimeVue();
const currentTheme = ref(localStorage.getItem('theme') || 'lara-light-indigo');

// 组件挂载时初始化主题
onMounted(() => {
  if (currentTheme.value === 'lara-dark-indigo') {
    loadTheme(currentTheme.value);
    toggleIconClass();
  }
});

// 动态加载指定主题的CSS文件
function loadTheme(themeName) {
  // 移除已存在的动态主题样式
  const existingThemeStyle = document.getElementById('dynamic-theme');
  if (existingThemeStyle) {
    existingThemeStyle.remove();
  }

  // 动态导入主题并插入到DOM中
  import(`primevue/resources/themes/${themeName}/theme.css`)
    .then((module) => {
      const style = document.createElement('style');
      style.id = 'dynamic-theme';
      style.textContent = module.default;
      document.head.appendChild(style);
    })
    .catch(err => console.error('主题加载失败:', err));
}

// 主题切换触发逻辑
function toggleTheme() {
  const newTheme = currentTheme.value === 'lara-light-indigo' ? 'lara-dark-indigo' : 'lara-light-indigo';
  
  loadTheme(newTheme);
  currentTheme.value = newTheme;
  localStorage.setItem('theme', newTheme);
  toggleIconClass();
}

// 切换图标样式
function toggleIconClass() {
  const moonElement = document.querySelector('.moon');
  if (moonElement) {
    moonElement.classList.toggle('sun');
  }
}

模板部分 #

<div class="dark" @click="toggleTheme">
  <div class="tdnn" :class="{ 'day': currentTheme === 'lara-light-indigo' }">
    <div class="moon" :class="{ 'sun': currentTheme === 'lara-light-indigo' }"></div>
  </div>
</div>

关键改动说明 #

1. 替换主题切换方式：放弃原PrimeVue.changeTheme对link标签的依赖，改用动态import()加载主题CSS，通过插入/移除DOM样式标签实现主题覆盖。
2. 修复响应式失效问题：原代码直接赋值currentTheme = newTheme会破坏Vue响应式，改为修改currentTheme.value确保UI同步更新。
3. 简化初始化逻辑：用onMounted钩子在组件挂载时加载本地存储的主题，避免原代码中冗余的toggleThemeDark调用。
4. 抽离通用逻辑：将图标样式切换抽为独立方法，减少重复DOM操作代码，提升可维护性。

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