vue一键换肤

最新推荐文章于 2025-06-09 11:19:37 发布

原创最新推荐文章于 2025-06-09 11:19:37 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #javascript #开发语言

1.CSS变量方案

优点：

性能好，切换即时生效

实现简单，维护方便

支持动态计算（如色阶）

浏览器原生支持

2. 动态切换 style 标

（1）首先进行变量配置，比如我现在有两个主题：

// 主题配置
export const themeConfig = {
  default: {
    '--primary-color': '#409eff',
    '--primary-bg': '#ffffff',
    '--text-color': '#303133',
    // ... 其他变量
  },
  dark: {
    '--primary-color': '#67c23a',
    '--primary-bg': '#1f1f1f',
    '--text-color': '#ffffff',
    // ... 其他变量
  },
  // ... 其他主题
}

// 切换主题方法
export const changeTheme = (themeName: string) => {
  const theme = themeConfig[themeName]
  if (!theme) return
  
  const root = document.documentElement
  Object.keys(theme).forEach(key => {
    root.style.setProperty(key, theme[key])
  })
  
  // 保存主题设置
  localStorage.setItem('theme', themeName)
}

（2）设置全局scss变量

:root {
  --primary-color: #409eff;
  --primary-bg: #ffffff;
  --text-color: #303133;
  // ... 其他变量
}

2.动态切换style样式方案

export const changeTheme = async (themeName: string) => {
  // 移除已存在的主题样式
  const existingStyle = document.getElementById('theme-style')
  if (existingStyle) {
    existingStyle.remove()
  }

  // 动态加载新主题样式
  try {
    const style = document.createElement('style')
    style.id = 'theme-style'
    
    // 动态导入主题文件
    const themeModule = await import(`@/assets/themes/${themeName}.scss`)
    style.textContent = themeModule.default
    
    document.head.appendChild(style)
    localStorage.setItem('theme', themeName)
  } catch (error) {
    console.error('主题加载失败:', error)
  }
}

3.cssModule方案

跟2类似

<template>
  <div :class="[themeClass.theme]">
    <!-- 应用内容 -->
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const currentTheme = ref('blue')
const themeClass = computed(() => {
  return require(`@/themes/${currentTheme.value}.module.scss`)
})
</script>