# @dzgrid/theme 中文文档

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

版本：1\.11\.0
npm 元数据更新时间：2026-11-11T14:55:48.902Z
中文译文更新时间：2026-11-13T05:00:19.022Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：323 kB，76 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=22
- 运行依赖：0 个
- 首次发布：2026-10-28T07:17:40.181Z
- 最新版本发布：2026-11-11T14:55:48.614Z
- 近 30 天下载量：2260（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 13 个）

## 中文简介

DzGrid的可选样式表:tzslot的调色板,光和暗,对比更强烈,强迫颜色;两个展示主题;通向Tailwind CSS 3和4以及Bootstrap 5.3. (原始内容存档于2018-09-29). Plain CSS.

## 安装

```sh
npm install @dzgrid/theme
```

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

## README

# @dzgrid/主题

可选样式表 [兹格里德](https://github.com/plinthworks/dzgrid): 颜色、间距和 交互状态(标题、徘徊、选择、焦点、过滤、弹出)、光和暗等 对比,强迫颜色。 平地 CSS,无JavaScript. 网格的布局 CSS 由 `@dzgrid/dom`;这个包只使其具有可呈现性。 检查每个文本和部分的对比度 .

## 导入

```ts
import '@dzgrid/theme';             // the same file as '@dzgrid/theme/dzgrid.css'
import '@dzgrid/theme/contrast.css'; // optional: more contrast (see below)
```

从 CSS : `@import "@dzgrid/theme/dzgrid.css";`与萨斯, `@use "@dzgrid/theme/dzgrid"` 给 来源 `$tz-palette` 地图可以被覆盖 `with (...)`。 。 。 .

在角中,添加 `node_modules/@dzgrid/theme/dzgrid.css` 页:1 `styles` 联 合 国 `angular.json`。 。 。 .

## 显示大小写主题

两个可选的主题, 每个导入更多( 或者一个区域上的属性) :

```ts
import '@dzgrid/theme';
import '@dzgrid/theme/midnight.css'; // dark elegant, with a light twin
// or '@dzgrid/theme/clinic.css';    // light medical, with a dark twin
```

导入, 页面每个网格的主题样式; `data-dzg-skin="midnight"` (或 `"clinic"`在任意 容器样式只包含此区域, 因此两者可以并排( 最后导入的文件主题为 页:1 光和暗跟随系统或 `data-theme`,见下文。 每种颜色都是用手给的 检查对比度; 对比度( 下方) 更高 .

## 尾风 CSS 和靴子

一个桥将网格的颜色,字体和角映射到您框架的变量,包括暗模式. CSS文件中的 Tailwind CSS 4 构建:

```css
@layer theme, base, dzgrid, components, utilities;
@import "tailwindcss";
@import "@dzgrid/theme";
@import "@dzgrid/theme/tailwind.css";
```

尾风 CSS 3: `@dzgrid/theme/tailwind3.css` (通太平风所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出未出所出所出所出所出所出所出所出所出所出. 鞋带 5.3: `@dzgrid/theme/bootstrap.css` (以下为) `data-bs-theme`) (中文(简体) ). 桥梁胜过展示 主题:带桥,网格会穿戴您框架的颜色;要显示 MidnigHt或 Clinic,装入无桥. 每个设置, 和类 网格需要 (`cellClass`, (中文(简体) ), `rowClass`, (中文(简体) ), `headerClass`, (中文(简体) ), `badge({ classes })`),单位 [`docs/theme-in-3-lines.md`](https://github.com/plinthworks/dzgrid/blob/main/docs/theme-in-3-lines.md)。 。 。 .

## 叠加层

主题的规则坐落在阶梯层 `dzgrid` (每个文件打开方式 `@layer dzgrid.layout, dzgrid.theme, dzgrid.skin, dzgrid.bridge, dzgrid.contrast;`),布局也一样 `@dzgrid/dom` 注射剂 你自己的班级胜过网格的外观 `!important`。如果您将您的 拥有 CSS, 命名顺序一次, 首先: 例如 . `@layer theme, base, dzgrid, components, utilities;`。 。 。 .

如果一个未分层的重置(Tailwind 3's preflight Flight, Bootstrap's Reboot)将击败分层 网格,导入 `@dzgrid/theme/dzgrid.unlayered.css` (和 `contrast.unlayered.css`相反:相同的规则 层外.

## CSS 变量

调色板是tzslot's:一个以tzslot为主题的主题网格的页面. 每种颜色都是 `light-dark()` 声明的对 `:root`。 。 。 .

| 变量 | 用于 |
| --- | --- |
| `--tz-bg`, (中文(简体) ), `--tz-bg-raised` | 网格的表面、信头和弹出 |
| `--tz-fg`, (中文(简体) ), `--tz-fg-muted` | 文本,辅助文本 |
| `--tz-border` | 单元格间行,弹出 |
| `--tz-accent`, (中文(简体) ), `--tz-accent-fg` | 焦点、 选择、 主按钮 |
| `--tz-danger`, (中文(简体) ), `--tz-warning`, (中文(简体) ), `--tz-success` | 错误、 拒绝编辑、 徽章 |

网格的衍生物可以设置在任何祖先身上 `.dzg` (每个都有一个倒背 在调色板上): `--dzg-font`, (中文(简体) ), `--dzg-radius`, (中文(简体) ), `--dzg-row-height`, (中文(简体) ), `--dzg-cell-padding-inline`, (中文(简体) ), `--dzg-header-bg`, (中文(简体) ), `--dzg-row-hover-bg`, (中文(简体) ), `--dzg-row-selected-bg`, (中文(简体) ), `--dzg-focus-ring`, (中文(简体) ), `--dzg-stale-fg`, (中文(简体) ), `--dzg-refused-bg`, (中文(简体) ), `--dzg-flash`, (中文(简体) ), `--dzg-flash-color`, (中文(简体) ), `--dzg-line` (规则宽度), `--dzg-pill-radius`, (中文(简体) ), `--dzg-header-size`, (中文(简体) ), `--dzg-header-tracking` (没有阿拉伯语), `--dzg-select-bar` (选定行栏) 开始时,默认为0 `fresh-rows.css`数字 : `--dzg-fresh-color`, (中文(简体) ), `--dzg-fresh-bg`, (中文(简体) ), `--dzg-fresh-bar` (新设) 线的锡和吧.

```css
:root {
  --tz-accent: light-dark(#0f766e, #5eead4);
  --dzg-row-height: 2.25rem;
}
```

## 光和暗

默认情况下,网格遵循系统(`color-scheme: light dark`) (中文(简体) ). 要强制一个,设定 `data-theme="light"` 或者说 `data-theme="dark"` 在网格的根或任何祖先上。 桥梁 跟着尾风走 `.dark` 班级和靴子 `data-bs-theme`。 。 。 .

## 对比度和强制颜色

`contrast.css` 当系统要求更具对比性时切换到高相通调色板 (单位:千美元)`prefers-contrast: more`或低于 `data-contrast="more"`· ; `data-contrast="normal"` 在树根上 选择退出。 在强迫色彩模式(Windows high Controlst)中,主题使用系统的颜色.

## 许可证

麻省理工学院. 见 [自由主义](https://npmcn.com/package/%40dzgrid/theme/LICENSE)。 。 。 .

## 常见问题

### @dzgrid/theme 是什么？

DzGrid的可选样式表:tzslot的调色板,光和暗,对比更强烈,强迫颜色;两个展示主题;通向Tailwind CSS 3和4以及Bootstrap 5\.3\. \(原始内容存档于2018-09-29\)\. Plain CSS\.

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

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

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

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

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

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

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

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

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

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

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

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

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

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