主题定制

简约蓝组件库提供了灵活的主题系统，支持多套设计系统和深度定制。

默认主题

组件库默认提供"简约蓝"主题，采用清新的蓝色调，适合数据仪表盘场景。

使用主题

基础用法

在应用启动时设置主题：

import { createApp } from 'vue';
import App from './App.vue';
import SimpleBlueUI, { ThemeManager, simpleBlueTheme } from '@simple-blue/components';

const app = createApp(App);
app.use(SimpleBlueUI);

// 设置主题
const themeManager = ThemeManager.getInstance();
themeManager.setTheme(simpleBlueTheme);

app.mount('#app');

动态切换主题

可以在运行时动态切换主题：

<template>
  <div>
    <a-button @click="switchTheme">切换主题</a-button>
  </div>
</template>

<script setup lang="ts">
import { ThemeManager, simpleBlueTheme } from '@simple-blue/components';

const themeManager = ThemeManager.getInstance();

const switchTheme = () => {
  themeManager.setTheme(simpleBlueTheme);
};
</script>

自定义主题

创建自定义主题

import type { ThemeConfig } from '@simple-blue/components';

export const customTheme: ThemeConfig = {
  name: 'custom-theme',
  colors: {
    primary: '#1890ff',
    success: '#52c41a',
    warning: '#faad14',
    error: '#f5222d',
    info: '#1890ff',
  },
  typography: {
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
    fontSize: {
      xs: '12px',
      sm: '14px',
      base: '16px',
      lg: '18px',
      xl: '20px',
    },
  },
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '32px',
  },
};

应用自定义主题

import { ThemeManager } from '@simple-blue/components';
import { customTheme } from './theme';

const themeManager = ThemeManager.getInstance();
themeManager.setTheme(customTheme);

CSS 变量

主题系统基于 CSS 变量实现，你可以直接覆盖 CSS 变量来定制主题：

:root {
  --color-primary: #2196f3;
  --color-success: #52c41a;
  --color-warning: #faad14;
  --color-error: #f5222d;
  --color-info: #1890ff;
}

下一步

• 简约蓝主题 - 了解默认主题
• 自定义主题 - 深入学习主题定制