主题配置

类型定义

interface ThemeConfig {
  /**
   * 颜色覆盖
   */
  colors?: Partial<ThemeColors>;

  /**
   * 圆角预设
   */
  radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';

  /**
   * 字体覆盖
   */
  font?: {
    sans?: string;
    mono?: string;
  };

  /**
   * 自定义 CSS 变量
   */
  cssVariables?: Record<string, string>;
}

interface ThemeColors {
  primary: string;
  secondary: string;
  background: string;
  foreground: string;
  muted: string;
  mutedForeground: string;
  border: string;
  ring: string;
  accent: string;
  accentForeground: string;
  destructive: string;
  destructiveForeground: string;
}

颜色配置

覆盖主题颜色：

theme: {
  colors: {
    primary: '#3b82f6',         // 主色
    secondary: '#64748b',       // 次要色
    destructive: '#ef4444',     // 危险操作色
  },
},

完整颜色列表

颜色	说明	使用场景
`primary`	主色	按钮、链接、高亮
`secondary`	次要色	次要按钮、辅助信息
`background`	背景色	页面背景
`foreground`	前景色	文本颜色
`muted`	柔和背景	禁用状态、次要区域
`mutedForeground`	柔和前景	次要文本
`border`	边框色	边框、分隔线
`ring`	焦点环	聚焦状态
`accent`	强调色	悬停状态
`accentForeground`	强调前景	强调区域文本
`destructive`	危险色	删除按钮、错误
`destructiveForeground`	危险前景	危险按钮文本

圆角配置

预设圆角大小：

theme: {
  radius: 'md',  // 'none' | 'sm' | 'md' | 'lg' | 'full'
},

值	效果
`none`	无圆角 (0)
`sm`	小圆角 (0.25rem)
`md`	中等圆角 (0.5rem)
`lg`	大圆角 (0.75rem)
`full`	完全圆角 (9999px)

字体配置

自定义字体：

theme: {
  font: {
    sans: '"Inter", "Noto Sans SC", sans-serif',
    mono: '"Fira Code", monospace',
  },
},

CSS 变量

添加自定义 CSS 变量：

theme: {
  cssVariables: {
    '--header-height': '48px',
    '--sidebar-width': '200px',
    '--custom-spacing': '1.5rem',
  },
},

在 CSS 中使用：

.my-component {
  height: var(--header-height);
  margin-left: var(--sidebar-width);
}

明暗模式

基座自动支持明暗模式：

使用 useTheme hook 获取和设置主题
颜色会根据主题自动切换
系统模式跟随操作系统设置

import { useTheme } from '@linch-tech/desktop-core';

function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      <option value="light">浅色</option>
      <option value="dark">深色</option>
      <option value="system">跟随系统</option>
    </select>
  );
}

完整示例

theme: {
  colors: {
    primary: '#8b5cf6',      // 紫色主题
    secondary: '#a78bfa',
    destructive: '#f43f5e',
  },
  radius: 'lg',
  font: {
    sans: '"Inter", sans-serif',
    mono: '"JetBrains Mono", monospace',
  },
  cssVariables: {
    '--header-height': '52px',
  },
},

目录