# @lovince/themes 中文文档

规范地址：https://npmcn.com/package/%40lovince/themes/

版本：0\.3\.0
npm 元数据更新时间：2026-11-01T18:04:21.277Z
中文译文更新时间：2026-11-01T18:55:33.361Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40lovince/themes
原文对照：https://npmcn.com/package/%40lovince/themes/?lang=original
项目主页：https://github.com/Mac254/Lovince_product_journey#readme
源码仓库：https://github.com/Mac254/Lovince_product_journey

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：49.9 kB，10 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=18
- 运行依赖：1 个
- 首次发布：2026-10-15T18:45:32.673Z
- 最新版本发布：2026-11-01T18:04:21.126Z
- 已发布版本数：4（近 12 个月 4 个）

## 中文简介

Lovince UI的浅色和深色主题- @lovince/令牌上的语义颜色角色，作为CSS自定义属性和Tailwind v4主题发出。

## 安装

```sh
npm install @lovince/themes
```

也可以使用：`pnpm add @lovince/themes`、`yarn add @lovince/themes`、`bun add @lovince/themes`

## README

# @lovince /主题

Lovince UI的光明和黑暗主题。主题将原语映射为 [`@lovince/tokens`](https://npmcn.com/package/%40lovince/tokens) 到语义角色(表面，前景，线， 口音，危险…)，所以组件要求 _颜色是用来做什么的_永远不会 是颜色。

> **状态: `0.3.0`、实验。** 角色名称以前可能会更改 `1.0`.

```bash
bun add @lovince/themes @lovince/tokens
```

## 使用它

**纯CSS:**

```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]`：

```css
@import 'tailwindcss';
@import '@lovince/themes/tailwind.css';
```

实用程序使用shadcn词汇表(`bg-primary`， `text-muted-foreground`， `border-input`， `ring-ring`)映射到Lovince角色上，所以是阴影风格 组件是主题化的，不能进行编辑。类型按角色划分： `text-title-md`， `text-body-sm`.

**打字稿:**

```ts
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` 从存储库根目录。

## 许可证

麻省理工学院

## 常见问题

### @lovince/themes 是什么？

Lovince UI的浅色和深色主题- @lovince/令牌上的语义颜色角色，作为CSS自定义属性和Tailwind v4主题发出。

### 如何安装 @lovince/themes？

在项目目录运行 npm install @lovince/themes，或使用 pnpm add / yarn add / bun add。

### @lovince/themes 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @lovince/themes 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @lovince/themes 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @lovince/themes 可以商用吗？

@lovince/themes 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @lovince/themes 还在维护吗？

最新版本 0\.3\.0 发布于 2026/11/02（1 天前）；至今共发布 4 个版本，其中过去 12 个月发布了 4 个；首次发布于 2026/10/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。