100city-theme

@100city/theme

100 City 多项目主题配色方案。

可用主题

每个主题都包含亮色和暗色两套配色。

安装

# monorepo 内部项目
pnpm add 100city-theme --workspace

# 外部独立项目
pnpm add 100city-theme

使用

方式一：直接引入 CSS（推荐）

/* 引入基础变量（字体、圆角、过渡） */
@import "@100city/theme/shared/base.css";

/* 引入主题配色（二选一） */
@import "@100city/theme/presets/clarity/theme.css";
@import "@100city/theme/presets/aurora/theme.css";

方式二：SCSS 项目

@import "@100city/theme/shared/base.css";
@import "@100city/theme/presets/aurora/theme.css";

在组件中使用

// 背景色
<div style={{ backgroundColor: "var(--bg-card)" }}>

// 文字色
<h1 style={{ color: "var(--text-heading)" }}>标题</h1>
<p style={{ color: "var(--text-muted)" }}>描述</p>

// 品牌色
<button style={{ backgroundColor: "var(--brand-primary)" }}>按钮</button>

// 阴影
<div style={{ boxShadow: "var(--shadow-card)" }}>卡片</div>

暗色模式

给 <html> 或任意父元素加 .dark 或 data-theme="dark" 即可切换：

<html class="dark">

变量命名规则

--{类别}-{用途}

类别：bg / text / border / brand / icon / status / shadow / interactive
用途：primary / secondary / muted / light / dark / hover / ...

开发

# 修改 tokens.json 后重新生成 CSS
cd packages/theme
node build.js

新增主题

1. 复制 presets/clarity/ 为新目录
2. 修改 tokens.json 中的颜色值
3. 运行 node build.js
4. 新主题的 theme.css 自动生成