@milesight/themes

Milesight Design System Themes - 统一的主题令牌系统

特性

• 🎨 统一变量命名：采用 --ms- 前缀，统一 Milesight 生态系统
• 📦 多平台支持：基于 Style Dictionary，支持 Web、iOS、Android
• 🔄 热更新：Watch 模式支持开发时实时编译
• 🛡 类型安全：完整的 TypeScript 类型定义
• ⚡️ 高性能：基于 CSS 变量的主题切换
• 🌓 深色模式：内置浅色和深色主题

安装

pnpm add @milesight/themes

使用

引入 CSS

import '@milesight/themes/dist/css/index.css';

React Hooks

import { useTheme, ThemeProvider } from '@milesight/themes';

function App() {
    return (
        <ThemeProvider defaultTheme="auto">
            <YourApp />
        </ThemeProvider>
    );
}

function ThemeToggle() {
    const { theme, toggleTheme } = useTheme();
    return <button onClick={toggleTheme}>Current: {theme}</button>;
}

直接使用 CSS 变量

.my-component {
    color: var(--ms-color-primary);
    padding: var(--ms-spacing-4);
    border-radius: var(--ms-border-radius-base);
}

开发

# 安装依赖
pnpm install

# 开发模式（watch）
pnpm dev

# 构建
pnpm build

# 测试
pnpm test

文档

详细文档请查看 packages/docs

License

MIT