Styling

Quick start

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

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

Custom properties

Every rule reads a custom property with a default. The full list is on Classes, data attributes and custom properties.

• Restyle by setting the properties on .tiptap, or on a single .tiptap-chart, rather than by overriding the rules.
• A dark theme needs nothing by default, see Dark color scheme.
• To choose the dark colors yourself, set a second set of the same properties.

.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;
}

Changing colors from script

• The colors and fonts a chart is drawn with are read when it is drawn.
• After changing them from script, for example when switching a theme, call editor.storage.diagrams.refresh().
• An exported file is drawn with the values that apply to the chart at that moment.

Dark color scheme

The default colors are light-dark() pairs, declared on :where(.tiptap), so any value you set wins. A chart or diagram is drawn in the color scheme it inherits.

• color-scheme: dark on the page turns the defaults dark.
• color-scheme: light dark follows the system.

Switch the page between light and dark and watch charts and diagrams follow:

How a dark color is derived

The dark color of a default is derived from the light one: its OKLCH lightness turned round, with hue and chroma kept. Black becomes light, and an accent stays recognizable.

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

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

Resolved colors

A Renderer receives the colors resolved, as hex, never light-dark(). So does the sandbox a diagram is drawn in.

When the scheme changes

• The system's scheme changes: the charts and diagrams draw again.
• The page's scheme changes in another way, such as a class on <html>: call editor.storage.diagrams.refresh().
• An exported file and a Word document are light, whatever the page shows.
• For a dark file, pass scheme: 'dark' to export.
• The colorScheme option 'light' keeps every chart and diagram light.

Styles in the dark

• The colors of a style turn dark by the same rule: its palette, its background and its axis, grid, label and title colors.
• A style with a dark background of its own, such as neon, keeps its colors.
• A palette or background the spec names itself stays as it is in both schemes.
• styleChart(spec, theme, scheme) takes 'light' (the default), 'dark' or 'auto'. 'auto' returns light-dark() pairs to resolve against the page.

Browser support

light-dark() and relative colors need a current browser: Chrome and Edge 123, Safari 18, Firefox 128.

Styles

A chart can name a style instead of carrying its own colors:

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

Give a chart one of the built-in styles, or change a style and see every chart that names it change:

The document stores the id only. Styles apply to charts; a diagram's look comes from its source and from the custom properties.

What a style holds

A style is { id, label, palette, appearance? }.

Which value wins

• The chart's own palette, background and border win over the style.
• Whatever neither sets comes from the custom properties.
• An id that is not registered is ignored, so the chart looks as if it named none.

Built-in styles

The built-in styles, exported as CHART_STYLES:

Your own styles

Add your own with the styles option.