样式

快速入门

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

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

自定义属性

每个 CSS 规则都会读取具有默认值的自定义属性。完整列表位于类、数据属性和自定义属性。

要重新设计样式，请在 .tiptap 或单个 .tiptap-chart 上设置属性。不要凌驾于规则之上。默认情况下，深色主题不需要任何内容​​，请参阅深色主题。要自己选择深色，请设置第二组相同的属性：

.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()。导出的文件使用导出时应用于图表的值。

样式

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

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

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

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

样式包含的内容

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

哪个值胜出

图表自身的 palette、background 和 border 胜出样式。两者都没有设置的内容都来自自定义属性。未注册的 id 会被忽略，图表看起来就像没有命名任何样式。

内置样式

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

您自己的样式

使用 styles 选项添加您自己的样式。

深色配色方案

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

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

深色是如何派生的

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

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 选项 'light' 使每个图表和流程图保持清晰。

深色样式

style 的颜色按照相同的规则变暗：其调色板、背景及其轴、网格、标签和标题颜色。具有自己的深色背景的样式（例如 neon）会保留其颜色。图表规范自行设置的 palette 或 background 在两种方案中保持相同。

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

浏览器支持

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

颜色助手

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