# @coralreefventures/theme 中文文档

规范地址：https://npmcn.com/package/%40coralreefventures/theme/

版本：0\.7\.0
npm 元数据更新时间：2026-10-19T22:56:43.601Z
中文译文更新时间：2026-11-11T01:20:23.902Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40coralreefventures/theme
原文对照：https://npmcn.com/package/%40coralreefventures/theme/?lang=original
项目主页：https://coralreefventures.com/
源码仓库：https://github.com/Coral-Reef-Ventures/reef

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

- 包体积（解压后）：10.5 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=24
- 运行依赖：0 个
- peer 依赖：@mantine/core 9\.6\.3
- 首次发布：2026-10-04T20:06:41.872Z
- 最新版本发布：2026-10-19T22:56:43.243Z
- 近 30 天下载量：2304（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

从其品牌符号中构建出产品"曼汀"主题,而CSS变量"曼汀"的样式表会为其注入.

## 安装

```sh
npm install @coralreefventures/theme
```

也可以使用：`pnpm add @coralreefventures/theme`、`yarn add @coralreefventures/theme`、`bun add @coralreefventures/theme`

## README

# @colorreefventures/主题

从其品牌符号中构建一个产品的"曼汀"主题,并生成 CSS 变量的样式表 `MantineProvider` 将会为它注入, 因此一个只让服务器组件仍然得到主题的页面 .

两个珊瑚礁地点都一样 `theme.ts` 财务报告和审定财务报表 `generate-css.ts`,仅在其比额表、主要 颜色和字体变量。 每个产品 `packages/theme` 现在它是它的代号文件 加上这个软件包的调用,并且 它生成的样式表与它之前生成的字节相同 : 这里的测试将构建器运行于两者之上 产品符号文件,并将输出与承诺进行比较 `theme.css`。 。 。 .

```ts
// packages/theme/src/theme.ts in a product
import { createBrandTheme } from "@coralreefventures/theme";
import tokens from "@streamlane/brand/tokens";

export const brand = tokens.color;

export const theme = createBrandTheme(tokens, {
  colors: {
    // Ten shades, each a hex or the name of a brand color: ink is shade 8, ink-soft shade 7.
    ink: ["#EEF4F4", "#D8E5E5", "#B3CBCC", "#8BAFB0", "#669496", "#4A7C7E", "#336567", "ink-soft", "ink", "#0B2728"],
    signal: ["#FEF6EA", "#FCEBD0", "#FADAA5", "signal-soft", "#F4B658", "signal", "#DB9425", "#B97A17", "#94610F", "#704908"],
  },
  black: "text",
  primaryColor: "ink",
  primaryShade: { light: 8, dark: 5 },
  fontVariable: "--streamlane-font-sans",
});
```

```ts
// packages/theme/scripts/generate-css.ts in a product
import { themeCss, writeThemeCss } from "@coralreefventures/theme";
import { cssVariablesResolver, theme } from "../src/theme";

await writeThemeCss(
  new URL("../theme.css", import.meta.url),
  themeCss(theme, { generatedBy: "packages/theme (pnpm --filter @streamlane/theme generate)", resolver: cssVariablesResolver }),
);
```

`resolver` 是一个产品自己的 `CSSVariablesResolver` (Streamlane的通心粉和墨水表面)并留在产品中; 漂流线没有通过. `generatedBy` 是样式表的第一行,它告诉读者要运行什么.

## 出口的东西

-   `createBrandTheme(tokens, config)`页:1 `MantineThemeOverride`。 。 。 . `config.colors` 即天秤, `primaryColor` 财务报告和审定财务报表 `primaryShade` 正如曼汀带他们, `fontVariable` cSS 变量 应用程序设置到其网页字体( Manetine 系统) 堆栈是倒置 `black` 光化学文本颜色,每个颜色一个六分之一或一个品牌颜色的名称.
-   `themeCss(theme, { generatedBy?, resolver? })`:样式表.
-   `writeThemeCss(file, css)`:写作.
-   `brandColor(tokens, nameOrHex)`, (中文(简体) ), `brandFontFamily(variable)`类型 `BrandTokens`, (中文(简体) ), `BrandThemeConfig`, (中文(简体) ), `Scale`, (中文(简体) ), `ThemeCssOptions`。 。 。 .

## 安装

此包件船 TypeScript 源和 `@mantine/core` 9.6.3 是同龄人。 输入密码必须是 转接: 一个产品的主题包运行在下面 `tsx` 和Vest, 由下一个捆绑通过 `transpilePackages`,所有的人处理它。 添加 `@coralreefventures/theme` 改为 `transpilePackages` 产品在哪里 主题已经是.

## 常见问题

### @coralreefventures/theme 是什么？

从其品牌符号中构建出产品"曼汀"主题,而CSS变量"曼汀"的样式表会为其注入\.

### 如何安装 @coralreefventures/theme？

在项目目录运行 npm install @coralreefventures/theme，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@mantine/core（9\.6\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @coralreefventures/theme 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/coralreefventures\_\_theme 是否存在。

### @coralreefventures/theme 支持 ESM 还是 CommonJS？

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

### @coralreefventures/theme 需要什么版本的 Node\.js？

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

### @coralreefventures/theme 可以商用吗？

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

### @coralreefventures/theme 的下载量有多少？

根据 npm 官方下载统计，@coralreefventures/theme 在 2026/10/11 – 2026/11/09 这 30 天内被下载 2,304 次，日均约 77 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @coralreefventures/theme 还在维护吗？

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