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 CSS rule reads a custom property that has a default value. The full list is on Classes, data attributes and custom properties.

To restyle, set the properties on .tiptap, or on a single .tiptap-chart. Do not override 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

A chart reads its colors and fonts when it is drawn. After you change them from script, for example to switch a theme, call editor.storage.diagrams.refresh(). An exported file uses the values that apply to the chart at the moment of the export.

Styles

A style is a named set of colors and fonts. 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 only the style's id. Styles apply to charts only. A diagram's look comes from its source and from the custom properties.

What a style holds

A style is { id, label, palette, appearance? }. The chart stores the id. The user sees the label. The palette holds the colors of the data series, such as the bars or lines. The optional appearance may set background, axisColor, gridColor, labelColor, titleColor, fontFamily and border.

Which value wins

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

Built-in styles

The package exports the built-in styles as CHART_STYLES: standard, ocean, sunset, mono, pastel, high-contrast, corporate, print, neon and earth. Each label is its id in title case, such as High Contrast. print is on white with a frame. neon is on a dark background.

Your own styles

Add your own styles with the styles option.

Dark color scheme

The default colors are light-dark() pairs, declared on :where(.tiptap), so any value you set wins. A chart or a diagram uses the color scheme it inherits from the page. 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 extension derives each dark default from its light color. It inverts the lightness in the OKLCH color space and keeps the hue and the chroma. lightDarkColor applies the same rule to a color of your own:

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

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

When the scheme changes

• When the system's scheme changes, the charts and diagrams are drawn again.
• When the page's scheme changes in another way, such as through 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 a background that the Chart Spec sets itself stays the same in both schemes.

styleChart(spec, theme, scheme) takes 'light' (the default), 'dark' or 'auto'. 'auto' returns light-dark() pairs, which the page then resolves.

Browser support

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

Color helpers

A Renderer gets the colors already resolved, as hex values, never as light-dark(). The sandbox that draws a diagram gets them the same way.