@king-design/themes

面向 King-Design UI 的主题配置库，提供开箱即用的内置主题与可扩展的 Theme 结构，帮助业务在不同品牌/视觉风格下快速完成主题切换与统一设计落地。

为什么要用这个库

• 统一管理颜色、尺寸、组件级样式变量，避免样式分散
• 通过主题对象集中维护视觉规范，降低多产品线维护成本
• 支持按需导入，减小业务侧引入体积
• 同时兼容 ESM / CommonJS，适配不同工程体系

安装

npm install @king-design/themes

快速开始

1. 引入内置主题

import { scubablue } from '@king-design/themes';

// scubablue 即可作为你的主题配置对象使用
console.log(scubablue.color.primary); // #5370FF

2. 按需引入（推荐在追求包体积时使用）

import scubablue from '@king-design/themes/scubablue';

3. 在 @king-design 组件库中注入主题（业务接入示例）

import { setTheme } from '@king-design/vue';
import { scubablue } from '@king-design/themes';

setTheme(scubablue);

你的组件库/应用框架只需要约定“如何消费 theme 对象”，即可完成主题接入。

内置主题

scubablue（深海蓝）

• 更丰富的色彩体系（如 purple、teal、yellow 等扩展色）
• 包含 table 等组件级主题变量
• 适合有品牌色表达和更多业务场景的系统

TypeScript 支持

库导出 Theme 类型，可用于自定义主题扩展与静态校验：

import type { Theme } from '@king-design/themes';

export const customTheme: Theme = {
    color: {
        primary: '#1f6fff',
        success: '#23D464',
    },
    button: {
        radius: 6,
    },
};

Theme 为递归结构，支持以下值类型：

• string
• number
• Theme（嵌套对象）

API 参考

根入口导出

• Theme 类型
• scubablue 主题对象

子路径导出

• @king-design/themes/scubablue

开发与构建

# 构建
npm run build

发布命令（维护者）

# patch 版本发布
npm run release

# minor 版本发布
npm run release-minor

# beta 版本发布
npm run release-beta

产物说明

构建输出目录：dist/

• dist/index.js：ESM 入口
• dist/index.cjs.js：CommonJS 入口
• dist/index.d.ts：类型声明
• dist/themes/*：主题按文件拆分后的 ESM/CJS/类型声明

最佳实践建议

• 业务侧不要直接硬编码颜色，优先从主题变量读取
• 按“语义变量”命名（如 primary、warning），避免与具体色值强绑定
• 新增主题时尽量保持变量结构一致，降低组件适配成本
• 可在应用启动时注入主题，在用户切换品牌时动态替换主题对象

License

MIT