bun + vite7 的结合，孕育的 Robot Admin 【靓仔出道】（十三）

主题定制

📖 阅读时间：7 分钟 | 🎯 等级：进阶

前言

Robot_Admin应用程序具有灵活的主题系统，支持浅色、深色和基于系统的模式，以及程序化的主题定制。本指南介绍了如何在开发工作中使用和扩展主题功能。

一、主题系统概述

Robot_Admin的主题系统建立在NaiveUI的主题功能之上，并进行了自定义扩展。它由以下几个关键组件组成：

• 主题配置 - 定义主题颜色、样式和特定组件的覆盖
• 主题存储 - 管理主题状态、持久性和过渡
• 主题UI组件 - 提供用于切换主题的用户界面
• 全局主题提供者 - 在整个应用程序中应用主题

系统支持三种主题模式：

1. 浅色模式 - 默认浅色外观
2. 深色模式 - 适用于低光环境的深色外观
3. 系统模式 - 自动与用户的系统偏好同步

来源：theme.ts, App.vue

二、使用主题切换器

应用程序包含一个内置的主题切换器组件，允许用户循环切换可用的主题模式。该组件默认包含在应用程序头部：

<!-- 主题切换器自动循环切换模式 -->
<C_Theme />

主题切换器根据当前模式显示不同的图标：

• 🌞 浅色模式 - 太阳图标
• 🌙 深色模式 - 月亮和星星图标
• ☀️🌙 系统模式 - 太阳-月亮-星星图标

来源：C_Theme/index.vue, C_Header/index.vue

三、主题配置结构

主题配置在src/config/theme.ts中定义，遵循扩展NaiveUI主题系统的结构化格式。

基本主题结构

interface GlobalThemeOverrides {
  // 应用到整个主题的通用属性
  common?: {
    primaryColor?: string
    primaryColorHover?: string
    // 其他通用属性
  }
  
  // 特定组件的主题属性
  Menu?: {
    itemTextColor?: string
    itemColorActive?: string
    // 其他菜单属性
  }
  
  Button?: {
    // 按钮特定属性
  }
  
  // 其他组件覆盖
}

此结构允许您自定义全局主题属性和特定组件的样式。

来源：theme.ts

默认主题

应用程序附带了预配置的浅色和深色主题：

// 浅色主题示例（简化）
export const themeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: '#2080f0',
    primaryColorHover: '#4098fc',
    // 其他通用属性
    bodyColor: '#0d1425',
  },
  Menu: lightMenuConfig,
}
 
// 深色主题示例（简化）
export const darkThemeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: '#2080f0',
    primaryColorHover: '#4098fc',
    // 其他通用属性
  },
  Menu: darkMenuConfig,
}

来源：theme.ts

四、程序化主题管理

您可以使用主题存储来程序化管理主题。这在您需要自定义主题或响应组件中的用户偏好时非常有用。

访问主题存储

import { useThemeStore } from '@/stores/theme'
 
// 在您的组件设置中
const themeStore = useThemeStore()

读取主题信息

// 检查是否为深色模式
const isDarkMode = themeStore.isDark
 
// 获取当前主题模式（'light'、'dark'或'system'）
const currentMode = themeStore.mode
 
// 访问主题覆盖
const themeConfig = themeStore.themeOverrides

更改主题模式

// 切换到深色模式
themeStore.setMode('dark')
 
// 切换到浅色模式
themeStore.setMode('light')
 
// 跟随系统偏好
themeStore.setMode('system')

setMode方法包括主题之间的平滑过渡，以增强用户体验。

来源：theme/index.ts

自定义主题

您可以在运行时自定义主题属性：

// 更新主颜色
themeStore.updateThemeOverrides({
  common: {
    primaryColor: '#ff0000',  // 更改为红色
    primaryColorHover: '#ff3333'
  }
})
 
// 重置为默认主题
themeStore.resetThemeOverrides()

自定义主题设置会自动持久化到localStorage，因此当用户返回时会被恢复。

来源：theme/index.ts

五、全局主题应用

主题通过NaiveUI的NConfigProvider在应用程序根目录应用：

<template>
  <NConfigProvider
    :theme="themeStore.currentTheme"
    :theme-overrides="themeStore.themeOverrides"
    :locale="zhCN"
    :date-locale="dateZhCN"
    class="global-config-provider"
  >
    <!-- 应用程序内容 -->
  </NConfigProvider>
</template>

这确保了所有组件之间的一致性主题。

来源：App.vue

六、主题过渡

主题存储包括内置过渡，以实现平滑的主题切换。调用setMode()时，它会自动：

1. 为相关元素添加过渡样式
2. 应用不透明度过渡以减少视觉闪烁
3. 等待过渡完成后再清理

// 主题过渡代码（简化）
const setMode = async (newMode: ThemeMode) => {
  // 创建过渡样式
  const transitionStyle = document.createElement('style')
  transitionStyle.textContent = `
    /* 全局过渡效果 */
    .layout-container :deep(.n-layout .n-layout-scroll-container),
    .layout-sider, .n-menu, .layout-header, .layout-footer {
      transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
  `
  document.head.appendChild(transitionStyle)
  
  // 设置新模式
  mode.value = newMode
  localStorage.setItem(THEME_MODE_KEY, newMode)
  
  // 过渡后清理
  setTimeout(() => {
    document.head.removeChild(transitionStyle)
  }, 750)
}

来源：theme/index.ts

七、扩展主题系统

为了进行更多自定义，您可以：

1. 添加新的主题属性

更新theme.ts中的GlobalThemeOverrides接口，以包含您的自定义属性：

export interface GlobalThemeOverrides {
  common?: {
    // 现有属性
    primaryColor?: string
    
    // 您的自定义属性
    accentColor?: string
    cardBackground?: string
  }
  
  // 添加新的组件覆盖
  YourComponent?: {
    backgroundColor?: string
    textColor?: string
  }
}

2. 创建主题定制UI

您可以创建一个专用的主题定制组件，允许用户调整主题属性：

<template>
  <div class="theme-customizer">
    <h3>主题定制器</h3>
    
    <div class="color-picker-group">
      <label>主颜色</label>
      <input 
        type="color" 
        v-model="primaryColor"
        @change="updateTheme"
      />
    </div>
    
    <!-- 其他定制控件 -->
    
    <button @click="resetTheme">重置为默认</button>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue'
import { useThemeStore } from '@/stores/theme'
 
const themeStore = useThemeStore()
const primaryColor = ref('#2080f0')
 
onMounted(() => {
  // 初始化当前主题值
  primaryColor.value = themeStore.themeOverrides.common?.primaryColor || '#2080f0'
})
 
const updateTheme = () => {
  themeStore.updateThemeOverrides({
    common: {
      primaryColor: primaryColor.value,
      // 自动派生其他颜色
      primaryColorHover: lightenColor(primaryColor.value, 10),
      primaryColorPressed: darkenColor(primaryColor.value, 10)
    }
  })
}
 
const resetTheme = () => {
  themeStore.resetThemeOverrides()
  primaryColor.value = '#2080f0'
}
</script>

结论

Robot_Admin主题系统为创建视觉吸引力和可定制的用户界面提供了坚实的基础。通过利用内置的主题存储和配置系统，您可以创建尊重用户偏好的应用程序，同时保持一致的设计语言。

对于大多数用例，默认主题模式（浅色/深色/系统）将足够。对于更高级的场景，程序化API允许完全自定义主题属性，以满足您的特定需求。

💡 提示：如果你觉得这篇文章对你有帮助，欢迎点赞、收藏和关注，我会持续分享更多前端开发的实战经验。

🏷️ 标签：#前端开发 #Vue3 #NaiveUI #主题定制 #暗黑模式
 

  期待共建！

如果这套组件系统对你的开发工作有所启发或帮助，请不要吝啬你的 Star！每一个 ⭐ 都是对我最大的鼓励和支持。

👉 点击这里 Star 支持项目 （🧧行大运摸大票💰）

🔗 探索更多资源

非常期待听到你的想法！