# @domternal/theme 中文文档

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

版本：1\.8\.1
npm 元数据更新时间：2026-11-08T11:29:00.857Z
中文译文更新时间：2026-11-12T15:59:24.799Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：458 kB，42 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：0 个
- 首次发布：2026-03-21T22:01:30.764Z
- 最新版本发布：2026-11-08T11:29:00.675Z
- 近 30 天下载量：3278（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：47（近 12 个月 47 个）

## 中文简介

Domternal 丰富文本编辑器的浅暗 CSS 主题

## 安装

```sh
npm install @domternal/theme
```

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

## README

# @ 命题/ 主题

[![Version](https://img.shields.io/npm/v/@domternal/theme.svg)](https://www.npmjs.com/package/@domternal/theme) [![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/domternal/domternal/blob/main/LICENSE)

默认样式 [永远](https://domternal.dev/) 编辑器、工具栏、菜单、, 拾取器和文档内容。 包括轻而暗的主题, CSS 自定义 用于定制的属性,以及打印样式。 此软件包包含 CSS 和 Sass 源, 没有 JavaScript 运行时间 .

## 安装

```bash
pnpm add @domternal/theme
```

软件包宣布Node.js 22或以后用于工具化,并且没有对等的依赖性. 对主题、编辑器和框架包装器使用1.8.1版本,从而标记组件 和样式保持一致.

## 使用量

在应用程序的切入点中导入一次 :

```ts
import '@domternal/theme';
```

对于Sass管道,使用源入点:

```scss
@use '@domternal/theme/scss';
```

反应、 Vue 和 Angular 组件添加编辑器 `.dm-editor` 课。 与 `@domternal/core` 或者说 `@domternal/vanilla`,在主机上添加该类.

## 光和暗模式

光是默认值. 在编辑器及其共同祖先中添加主题类 UI 这样的兄弟式工具栏和菜单接收相同的调色板 :

```html
<div class="dm-theme-dark">
  <div class="dm-toolbar">...</div>
  <div class="dm-editor">...</div>
</div>
```

使用 `dm-theme-auto` 遵循系统偏好,或 `dm-theme-light` 强迫 a 浅色调色板。 在运行时切换课程而不创建编辑器 . 对于无边框文档布局,请使用 `preset: 'notion'`; 见 [逗号模式](https://domternal.dev/v1/guides/notion-mode/)。 。 。 .

## 自定义主题

在主题后加载覆盖 。 默认在组件中存在, 所以目标 `.dm-editor` 财务报告和审定财务报表 `.dm-toolbar` 而不是只在祖先上设置变量:

```css
.my-app .dm-editor,
.my-app .dm-toolbar {
  --dm-accent: #e11d48;
  --dm-accent-hover: #be123c;
  --dm-accent-surface: rgba(225, 29, 72, 0.1);
}

.my-app .dm-editor {
  --dm-editor-bg: #fefce8;
  --dm-editor-border-radius: 0.5rem;
}
```

这个 [主题指南](https://domternal.dev/v1/guides/theming/) 覆盖自定义调色板, 单独挂载的 UI、滚动、 Sass 和完整 [CSS 财产参考](https://domternal.dev/v1/guides/theming/#css-custom-properties-reference)。 。 。 .

## 渲染和打印行为

-   打印样式隐藏编辑器控件并使用一个光调色板,包括当 屏幕主题为黑暗。 将编辑器从您的应用程序周围隔离 UI,请使用 [打印扩展名](https://domternal.dev/v1/extensions/print/)。 。 。 . 打印需要的色彩覆盖 `!important` 一会儿 `@media print` 规则; 见 [打印](https://domternal.dev/v1/guides/theming/#printing)。 。 。 .
-   核心、表格和主题 1.6.0 支持合格的多行打印头 打印扩展名和标准表格节点视图。 仅打印页眉组 保留文档 JSON 和选择不变;浏览器 pagination 仍然适用. Core 的可选资源准备可等待现场图像和字体 命令驱动打印。 见 [可选打印准备](https://npmcn.com/package/%40domternal/core/README.md#optional-print-preparation)。 。 。 .
-   高亮和阴影的表格单元格保留了作者的背景. 在现场 编辑器,没有作者颜色的文本会适应这个背景. 这种行为 不序列化为 `getHTML()`; 使用只读编辑器显示已保存 包含相同的对比处理。 见 [保留背景的文本](https://domternal.dev/v1/guides/theming/#text-on-kept-backgrounds) 用于自定义主题、浏览器倒置和实验语调帮助.
-   核心和主题 1.5.0 也保留文字全宽的段落和标题 填补 `BlockColor`,包括空块。 默认文本使用可读文本 已知背景的音色; 选定对比度后有明确的文字颜色 政策。 见 [块背景](https://npmcn.com/package/%40domternal/core/README.md#full-block-backgrounds)。 。 。 .
-   待处理的图像文件显示本地化加载状态, 并减少动作 支助。 该指示器为只取景并被隐藏于平面. 自定义主题应当 样式 `.domternal-image-uploading` 联 合 国 `__spinner` 财务报告和审定财务报表 `__label` 孩子们.
-   核心和主题 1.4.0 加 `TextColor.configure({ contrast: 'auto' })` 用于文字颜色。 默认关闭; 启用 Core 扩展名 . 活编辑器仅在其测量对比度时调整不透明字面颜色 在已知的坚实背景上,低于4.5:1。 原始颜色保留在存储中 内容、 HTML、剪贴板输出、导出和打印。 指针、半透明文本和 不确定的油漆没有变化。 见 [核心读取](https://npmcn.com/package/%40domternal/core/README.md#readable-literal-colors) 用于支持的油漆、自定义标记视图和样式表要求.
-   核心1.8.0暴露 `TextColorStorage.preview(root, marks)` 文字颜色 使用相同的主题样式表在孤立的 DOM 预览中进行调整。 见 [只读预览](https://npmcn.com/package/%40domternal/core/README.md#read-only-previews) 用于所需加价 并预览生命周期.
-   当地人 `hidden` 属性隐藏主题元素; [`hidden="until-found"` 保持其浏览器行为](https://domternal.dev/v1/guides/theming/#hiding-an-element)。 。 。 .
-   样式表包含 [粘贴清除反馈](https://domternal.dev/v1/extensions/paste-cleanup/) 财务报告和审定财务报表 [浮动菜单描述](https://domternal.dev/v1/extensions/floating-menu/)。 。 。 . 装入相应的扩展或组件以启用这些特性.

## 入境点

| 导入 | 目录 |
| --- | --- |
| `@domternal/theme` | 编译的 CSS, 或 Sass 源与 Sass- 意识分辨率 |
| `@domternal/theme/css` | 明确汇编的CSS |
| `@domternal/theme/scss` | Sass 来源 |

## 常见问题

### @domternal/theme 是什么？

Domternal 丰富文本编辑器的浅暗 CSS 主题

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

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

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

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

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

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

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

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

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

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

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

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

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

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