# @formkit/theme-creator 中文文档

规范地址：https://npmcn.com/package/%40formkit/theme-creator/

版本：2\.0\.0
npm 元数据更新时间：2025-12-12T19:39:21.329Z
中文译文更新时间：2026-11-15T09:09:00.823Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：90.2 kB，15 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：7 个
- 首次发布：2023-10-05T14:09:14.133Z
- 最新版本发布：2025-12-12T19:39:21.118Z
- 近 30 天下载量：10961（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 1 个）

## 中文简介

QQ FormKit 主题的官方主题创建者

## 安装

```sh
npm install @formkit/theme-creator
```

也可以使用：`pnpm add @formkit/theme-creator`、`yarn add @formkit/theme-creator`、`bun add @formkit/theme-creator`

## README

# FormKit 主题创建者

[![CI](https://github.com/formkit/theme-creator/actions/workflows/ci.yml/badge.svg)](https://github.com/formkit/theme-creator/actions/workflows/ci.yml)

使用此软件包来构建自己的FormKit主题并(可选)与世界共享.

## 来做

-   [ ] 为变量添加分/ 最大值以锁定一个范围内的值.
-   [ ] 在变量中添加自定义缩放 .

## 使用量

主题使用 `createTheme` 与 [尾风](https://tailwindcss.com/) 分类,并输出一个可以导入到窗体Kit配置中的主题文件——或者自动生成语义样式表 _从_ 您定义的尾风类 .

### 创建主题

```ts
import { createTheme } from '@formkit/theme-creator';

export default createTheme({
  // Define your theme details here:
  meta: {
    name: 'Midnight blizzard',
    description: 'A cold and blustery theme for FormKit',
    formkitVersion: '^1.2.0',
    darkMode: true,
    supportedInputs: ['text', 'textarea', 'select']
    author: 'Justin Schroeder',
    authorLink: 'https://x.com/jpschroeder'
  },
  variables: {
    borderColor: {
      // Allow the theme editor to modify this variable with the "color" widget.
      editor: 'color', 
      // Only use tailwind base colors for editable variables.
      value: 'slate'
    },
    darkModeBorderColor: {
      // Allow the theme editor to modify this variable with the "color" widget.
      editor: 'color', 
      // Only use tailwind base colors for editable variables.
      value: 'white'
    },
    spacing: {
      editor: 'spacing',
      // Use tailwind spacing scale for editable variables.
      value: '2'
    },
    // This variable is not editable by GUI theme editor, but can be changed
    // by a user who wants to manually configure the theme.
    errorColor: 'red-500',
  },
  // Define your theme styles here for each input type.
  inputs: {
    text: {
      // Use the variables defined above in your styles by prepending a `$`.
      // These will be directly replaced in your class list.
      inner: 'p-$spacing bg-white/10 rounded-md border-$borderColor-100 dark:border-$darkModeBorderColor-50',
    }
  }
})
```

### 使用主题

一旦创建了您的主题, 用户可以导入并使用它生成自己的主题 类列表,也可以使用自动生成的语义样式表. 它们也可以在生成前配置主题.

```ts
// formkit-theme.config.ts
import midnightBlizzard from 'formkit-theme-midnight-blizzard'

export default midnightBlizzard({
  errorColor: 'red-300'
}, {
  // Users can change some of your classes here, they can even use the variable
  // names. These classes will be merged with the theme’s classes using
  // tailwind-merge.
  inputs: {
    text: {
      // Here they want the darkmode border color to be a bit stronger:
      inner: 'dark:border-$darkModeBorderColor-100'
    }
  }
})
```

### 发布主题

在向 npm 发布主题时, 您应该使用 `formkit-theme-` 前缀。 这将允许用户通过搜索轻松找到您的主题 `formkit-theme-` 时间npm.

## 常见问题

### @formkit/theme-creator 是什么？

QQ FormKit 主题的官方主题创建者

### 如何安装 @formkit/theme-creator？

在项目目录运行 npm install @formkit/theme-creator，或使用 pnpm add / yarn add / bun add。

### @formkit/theme-creator 支持 TypeScript 吗？

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

### @formkit/theme-creator 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @formkit/theme-creator 可以商用吗？

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

### @formkit/theme-creator 的下载量有多少？

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

### @formkit/theme-creator 还在维护吗？

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