---
title: "样式"
description: "ChartStyleRules() 返回图表布局和显示其状态所需的 CSS。"
canonical_url: "https://tiptap.zhcndoc.com/diagrams/guides/styling"
---

# 样式

ChartStyleRules() 返回图表布局和显示其状态所需的 CSS。

## 快速入门

```ts
import { chartStyleRules, flowDiagramStyleRules } from '@tiptap-pro/extension-diagrams'

const style = document.createElement('style')
style.textContent = chartStyleRules() + flowDiagramStyleRules()
document.head.append(style)
```

## 自定义属性

每个 CSS 规则都会读取具有默认值的自定义属性。完整列表位于[类、数据属性和自定义属性](https://tiptap.zhcndoc.com/diagrams/api-reference/selectors.md)。

要重新设计样式，请在 `.tiptap` 或单个 `.tiptap-chart` 上设置属性。不要凌驾于规则之上。默认情况下，深色主题不需要任何内容​​，请参阅[深色主题](https://tiptap.zhcndoc.com/diagrams/guides/styling.md#dark-color-scheme)。要自己选择深色，请设置第二组相同的属性：

```css
.tiptap {
  --tt-chart-series-1: #6a00f5;
  --tt-chart-selected-outline: 2px solid #6a00f5;
}

.dark .tiptap {
  --tt-chart-background: #1d1d23;
  --tt-chart-label-color: #c4c4ce;
  --tt-chart-grid-color: #2c2c35;
}
```

### 从脚本更改颜色

图表在绘制时读取其颜色和字体。从脚本更改它们后（例如切换主题），请调用 `editor.storage.diagrams.refresh()`。导出的文件使用导出时应用于图表的值。

## 样式

样式是一组命名的颜色和字体。图表可以命名样式而不是携带自己的颜色：

```ts
editor.commands.updateChartSpec({ spec: { style: 'ocean' } })
```

为图表提供内置样式之一，或者更改样式并查看命名它的每个图表的更改：

> **Interactive demo:** [DiagramsStyles](https://embed-pro.tiptap.dev/preview/Extensions/DiagramsStyles)

该文档仅存储样式的 id。样式仅适用于图表。图表的外观来自其来源和自定义属性。

### 样式包含的内容

样式为 `{ id, label, palette, appearance? }`。该图表存储 `id`。用户看到 `label`。 `palette` 保存数据系列的颜色，例如条形或线条。可选的 `appearance` 可以设置 `background`、`axisColor`、`gridColor`、`labelColor`、`titleColor`、`fontFamily` 和 `border`。

### 哪个值胜出

图表自身的 `palette`、`background` 和 `border` 胜出样式。两者都没有设置的内容都来自[自定义属性](https://tiptap.zhcndoc.com/diagrams/api-reference/selectors.md)。未注册的 id 会被忽略，图表看起来就像没有命名任何样式。

### 内置样式

该软件包通过 `CHART_STYLES` 导出内置样式：`standard`、`ocean`、`sunset`、`mono`、`pastel`、`high-contrast`、`corporate`、`print` 和 `neon`。显示标签使用标题式大小写，例如“High-contrast”。`print` 样式为白色并带边框；`neon` 样式适用于深色背景。

### 您自己的样式

使用 [`styles`](https://tiptap.zhcndoc.com/diagrams/api-reference/options.md#styles) 选项添加您自己的样式。

| 其中                                                         | 什么                  |
| ---------------------------------------------------------- | ------------------- |
| `editor.storage.diagrams.styles`                           | 每种款式                |
| `describeCapabilities().styles`                            | 每种款式，针对代理商          |
| `editor.storage.diagrams.styleChart(spec, theme, scheme?)` | 绘制图表的规格和主题，用于预览您自己的 |

## 深色配色方案

默认颜色是 `light-dark()` 对，在 `:where(.tiptap)` 上声明，所以你设置的任何值都会获胜。图表或流程图使用它从页面继承的配色方案。页面上的 `color-scheme: dark` 将默认值变暗。 `color-scheme: light dark`遵循系统。

在浅色和深色之间切换页面，观察图表和流程图如下：

> **Interactive demo:** [DiagramsDarkMode](https://embed-pro.tiptap.dev/preview/Extensions/DiagramsDarkMode)

### 深色是如何派生的

扩展程序从其浅色中派生每个深色默认值。它反转 OKLCH 色彩空间中的亮度并保持色调和彩度。 `lightDarkColor` 将相同的规则应用于您自己的颜色：

```ts
import { lightDarkColor } from '@tiptap-pro/extension-diagrams'

editor.view.dom.style.setProperty('--tt-chart-series-1', lightDarkColor('#0b5fff'))
editor.storage.diagrams.refresh()
```

### 当方案更改时

- **当系统方案更改**时，将重新绘制图表和流程图。
- **当页面的方案以其他方式更改**时，例如通过 `<html>` 上的类，调用 `editor.storage.diagrams.refresh()`。
- **导出的文件和 Word 文档**很轻，无论页面显示什么。对于暗文件，将 `scheme: 'dark'` 传递到 `export`。
- **[`colorScheme`](https://tiptap.zhcndoc.com/diagrams/api-reference/options.md#colorscheme) 选项 `'light'`** 使每个图表和流程图保持清晰。

### 深色样式

[style](https://tiptap.zhcndoc.com/diagrams/guides/styling.md#styles) 的颜色按照相同的规则变暗：其调色板、背景及其轴、网格、标签和标题颜色。具有自己的深色背景的样式（例如 `neon`）会保留其颜色。图表规范自行设置的 `palette` 或 `background` 在两种方案中保持相同。

`styleChart(spec, theme, scheme)` 采用 `'light'`（默认）、`'dark'` 或 `'auto'`。 `'auto'` 返回 `light-dark()` 对，然后页面对其进行解析。

### 浏览器支持

`light-dark()` 和相关颜色需要当前浏览器：Chrome 和 Edge 123、Safari 18、Firefox 128。

## 颜色助手

渲染器收到已解析为十六进制值的颜色，而非 `light-dark()`。绘制流程图的沙盒也会收到相同格式的颜色。

| 函数                                                      | 从                                      | 返回                                                                                             |
| ------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------- |
| `darkColor(color)`                                      | `@tiptap-pro/extension-diagrams`       | 黑暗规则如 CSS，`oklch(from <color> calc(0.95 - 0.75 * l) c h)`                                      |
| `lightDarkColor(color)`                                 | `@tiptap-pro/extension-diagrams`       | `light-dark()` 对，用于您自己的颜色                                                                      |
| `resolveColors(element, colors, scheme?)`               | `@tiptap-pro/extension-diagrams/theme` | 您自己的颜色，已解决                                                                                     |
| `resolveChartColors(element, { spec, theme }, scheme?)` | `@tiptap-pro/extension-diagrams/theme` | [`styleChart`](https://tiptap.zhcndoc.com/diagrams/guides/styling.md#your-own-styles) 返回什么，已解决 |