---
title: "Styling"
description: "chartStyleRules() returns the CSS a chart needs to lay out and to show its state, and flowDiagramStyleRules() the same for a diagram."
canonical_url: "https://tiptap.dev/docs/diagrams/guides/styling"
---

# Styling

chartStyleRules() returns the CSS a chart needs to lay out and to show its state, and flowDiagramStyleRules() the same for a diagram.

## 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 rule reads a custom property with a default. The full list is on
[Classes, data attributes and custom properties](https://tiptap.dev/docs/diagrams/api-reference/selectors.md).

- **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](https://tiptap.dev/docs/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

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

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

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

| Function                | From                             | Returns                                                          |
| ----------------------- | -------------------------------- | ---------------------------------------------------------------- |
| `darkColor(color)`      | `@tiptap-pro/extension-diagrams` | The 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                  |

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

| Function                                                | From                                   | Resolves                  |
| ------------------------------------------------------- | -------------------------------------- | ------------------------- |
| `resolveColors(element, colors, scheme?)`               | `@tiptap-pro/extension-diagrams/theme` | Colors of your own        |
| `resolveChartColors(element, { spec, theme }, scheme?)` | `@tiptap-pro/extension-diagrams/theme` | What `styleChart` returns |

### 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`](https://tiptap.dev/docs/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.dev/docs/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 `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:

```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 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? }`.

| Field        | Description                                                                                           |
| ------------ | ----------------------------------------------------------------------------------------------------- |
| `id`         | What the chart stores                                                                                 |
| `label`      | The name shown to a person                                                                            |
| `palette`    | The series colors                                                                                     |
| `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.
- **Whatever neither sets** comes from the [custom properties](https://tiptap.dev/docs/diagrams/api-reference/selectors.md).
- **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`:

| id              | Label                        |
| --------------- | ---------------------------- |
| `standard`      | Standard                     |
| `ocean`         | Ocean                        |
| `sunset`        | Sunset                       |
| `mono`          | Mono                         |
| `pastel`        | Pastel                       |
| `high-contrast` | High Contrast                |
| `corporate`     | Corporate                    |
| `print`         | Print, on white with a frame |
| `neon`          | Neon, on a dark background   |
| `earth`         | Earth                        |

### Your own styles

Add your own with the [`styles`](https://tiptap.dev/docs/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 |