---
title: "Styling"
description: "chartStyleRules() returns the CSS that a chart needs for its layout and for showing its state."
canonical_url: "https://tiptap-docs.lin52025i.qzz.io/diagrams/guides/styling"
---

# Styling

chartStyleRules() returns the CSS that a chart needs for its layout and for showing its state.

## Quick start

```ts
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](https://tiptap-docs.lin52025i.qzz.io/diagrams/api-reference/selectors.md).

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](https://tiptap-docs.lin52025i.qzz.io/diagrams/guides/styling.md#dark-color-scheme). To
choose the dark colors yourself, set a second set of the same properties:

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

### 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:

```ts
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:

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

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](https://tiptap-docs.lin52025i.qzz.io/diagrams/api-reference/selectors.md). 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`](https://tiptap-docs.lin52025i.qzz.io/diagrams/api-reference/options.md#styles) option.

| Where                                                      | What                                                                |
| ---------------------------------------------------------- | ------------------------------------------------------------------- |
| `editor.storage.diagrams.styles`                           | Every style                                                         |
| `describeCapabilities().styles`                            | Every style, for an agent                                           |
| `editor.storage.diagrams.styleChart(spec, theme, scheme?)` | The spec and theme a chart is drawn with, for a preview of your own |

## 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:

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

### 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:

```ts
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`](https://tiptap-docs.lin52025i.qzz.io/diagrams/api-reference/options.md#colorscheme) option `'light'`** keeps every chart and
  diagram light.

### Styles in the dark

The colors of a [style](https://tiptap-docs.lin52025i.qzz.io/diagrams/guides/styling.md#styles) 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.

| Function                                                | From                                   | Returns                                                                                                                |
| ------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| `darkColor(color)`                                      | `@tiptap-pro/extension-diagrams`       | The dark rule as CSS, `oklch(from <color> calc(0.95 - 0.75 * l) c h)`                                                  |
| `lightDarkColor(color)`                                 | `@tiptap-pro/extension-diagrams`       | The `light-dark()` pair, for colors of your own                                                                        |
| `resolveColors(element, colors, scheme?)`               | `@tiptap-pro/extension-diagrams/theme` | Colors of your own, resolved                                                                                           |
| `resolveChartColors(element, { spec, theme }, scheme?)` | `@tiptap-pro/extension-diagrams/theme` | What [`styleChart`](https://tiptap-docs.lin52025i.qzz.io/diagrams/guides/styling.md#your-own-styles) returns, resolved |