@lovince /主题
Lovince UI的光明和黑暗主题。主题将原语映射为
@lovince/tokens 到语义角色(表面，前景，线，
口音，危险…)，所以组件要求 颜色是用来做什么的永远不会
是颜色。
状态:
0.3.0、实验。 角色名称以前可能会更改1.0.
bun add @lovince/themes @lovince/tokens
使用它
纯CSS:
@import '@lovince/tokens/tokens.css';
@import '@lovince/themes/themes.css';
.card {
background: var(--lovince-color-surface-raised);
color: var(--lovince-color-fg);
border: 1px solid var(--lovince-color-line);
box-shadow: var(--lovince-shadow-md);
}
顺风v4。 这带来了两个页，一个顺风主题，基本样式，
输入/退出动画，以及 dark: 后面的变体 [data-theme]：
@import 'tailwindcss';
@import '@lovince/themes/tailwind.css';
实用程序使用shadcn词汇表(bg-primary， text-muted-foreground，
border-input， ring-ring)映射到Lovince角色上，所以是阴影风格
组件是主题化的，不能进行编辑。类型按角色划分： text-title-md，
text-body-sm.
打字稿:
import { themes, SEMANTIC_COLORS } from '@lovince/themes'
切换主题
Light是默认的。 prefers-color-scheme: dark 自动切换，除非
data-theme="light" 是集。集 data-theme="dark" 在 <html>，或在任何
子树，来强制它。派生值（悬停色调、阴影、对焦环）为
在每个内部重新解析 [data-theme] 子树，浅色页面上的深色面板
全黑了。
担保
- 每个角色都是由每个主题定义的。
- WCAG AA对比在两个主题中测试每个文本/表面配对： 文本为4.5:1，焦点环和边框为3:1。
danger是一个填充和danger-ink是为了文字和边框，因为没有单 在深色表面上，红色通过AA。- 主题表中没有原始颜色，只有对标记的引用。
编辑
来源是 src/. css/themes.css 和 css/tailwind.css 生成:
运行 bun run generate 从存储库根目录。
许可证
麻省理工学院