Version: 4.3

Theming

@joint/react and @joint/react-plus ship their own styles file styles.css, which exposes a --jj-* CSS variable surface as well as additional CSS classes for library components.

These styles provide default visuals for your diagrams as well as some basic interactivity (hover states, cursors etc.) out of the box. You can customize the look and feel of your diagrams by overriding the CSS variables and classes in your own stylesheets or using CSS libraries like Tailwind.

JointJS
JointJS+

Here is how you can import our styles and use them in your project:

@import '@joint/react/styles.css';

note

If you are using Tailwind CSS, import @joint/react/styles.css into the components layer so that utility classes take precedence over @layer joint. Without this, the joint layer is declared after Tailwind's layers and may have higher cascade priority than utilities.

@import 'tailwindcss';
@import '@joint/react/styles.css' layer(components);

Customization with CSS

All built-in styles are declared inside CSS @layer joint. The CSS cascade rule is that any style outside a layer wins over any style inside one, regardless of selector specificity, so your CSS classes will take precedence. Layers declared later in the cascade also override earlier layers, so take this into account when importing JointJS styles into an existing project that already has its own CSS layers or when using CSS libraries like Tailwind.

CSS Variables

Our styles use CSS variables for colors, radiuses, and other design tokens. You can override these variables in your own stylesheets to customize the look and feel of your diagrams.

In styles.css, the --jj-* variables are defined on :root for easy global access and customization. They follow normal CSS variable inheritance: set them on :root for a global palette, or override the same variables on any ancestor element to scope a change to a single component or section.

You can look at the list of all the --jj-* variables in the CSS variable reference section below.

The example below lets you override the --jj-box-* and --jj-link-* variables live. The CSS variables are set on the wrapper element containing the Paper, so they scope only to that diagram:

Open Sandbox

className property

As usual for React components, you can use the className prop to add your own classes to any component. Several JointJS primitives have multiple className props for different parts of the component, so check the documentation for each component to find out where to apply your styles. Links, ports, and labels each carry their own className on the cell record:

link style.className (line) and style.wrapperClassName (area around the line)
port portStyle.className (body) and portStyle.labelClassName (port label)
link label labelStyle.className (text) and labelStyle.backgroundClassName (label background)

For example, for JointJS links there are the following class props in the Link Record:

{
  style: {
    targetMarker: linkMarkerArrow({
      className: `my-link-arrow`, // class for the arrow marker
    }),
    className: 'my-link-line', // class for the link line
    wrapperClassName: 'my-link-wrapper', // class for the link wrapper
  },
  labelStyle: {
    className: `my-link-label`, // class for the link label text
    backgroundClassName: `my-link-label-bg`, // class for the link label background
  }
};

As a standalone React component Paper accepts a className too, which is useful for the paper background.

Examples

Light and dark themes

Here is a simple example of theming using only CSS variables. The example below shows a toggle between light and dark themes that switches the body class and applies the corresponding styles automatically:

Open Sandbox

In that example:

the demo uses HTMLBox, which adds the .jj-box class and picks up --jj-box-* automatically
links inherit --jj-link-*
link labels inherit --jj-link-label-*
declarative ports inherit --jj-port-*
the paper background and grid inherit --jj-paper-*; highlighters inherit --jj-highlighter-*

Also note that the --jj-* variables are defined on :root and overridden on .dark to switch the theme. You can also override them on any ancestor element to scope a change to a single component or section.

Additionally, when toggled, the --jj-transition-duration variable is set to 0s for one frame to suppress CSS transitions during the switch.

Tailwind example

Using Tailwind CSS, you can theme the whole diagram with utility classes instead of writing your own CSS. This is possible thanks to className support on JointJS components. The example below shows a toggle between different themes that switches the wrapper class and applies the corresponding styles automatically.

Open Sandbox

Here are the Tailwind classes used for port styling in the example:

const PORT_STYLE = {
  width: 13,
  height: 13,
  className: `
    fill-slate-300       stroke-white
    forest:fill-emerald-400  forest:stroke-emerald-950
    ocean:fill-sky-400       ocean:stroke-sky-950
    sunset:fill-amber-400    sunset:stroke-amber-50
    hover:fill-slate-500
    forest:hover:fill-emerald-300
    ocean:hover:fill-sky-300
    sunset:hover:fill-orange-400
  `,
  labelClassName: `
    fill-slate-400
    forest:fill-emerald-500
    ocean:fill-sky-400
    sunset:fill-amber-500
  `,
} as const;

// Element record
{
  // ...,
  portStyle: PORT_STYLE,
},

CSS variable reference

Theme variables

Base design tokens

These variables form the palette that all component-specific --jj-* variables reference. Override them on :root to change everything at once, or override individual component variables instead.

Dark color scale

Variable	Value
`--jj-color-dark-100`	`#131e29`
`--jj-color-dark-200`	`#1a2733`
`--jj-color-dark-300`	`#202f3e`
`--jj-color-dark-400`	`#253544`
`--jj-color-dark-500`	`#293a49`
`--jj-color-dark-600`	`#344351`
`--jj-color-dark-700`	`#425567`
`--jj-color-dark-800`	`#566c81`
`--jj-color-dark-900`	`#6f859b`

Light color scale

Variable	Value
`--jj-color-light-100`	`#f5f6f8`
`--jj-color-light-125`	`#f3f6f8`
`--jj-color-light-150`	`#f0f4f7`
`--jj-color-light-200`	`#eaf0f4`
`--jj-color-light-300`	`#e4ebf1`
`--jj-color-light-400`	`#dde6ed`
`--jj-color-light-500`	`#cfdbe4`
`--jj-color-light-600`	`#c1cfda`
`--jj-color-light-700`	`#a6b6c5`
`--jj-color-light-800`	`#8a9eb0`
`--jj-color-light-900`	`#6f859b`

Status colors

Variable	Value
`--jj-color-success`	`#36a18b`
`--jj-color-destructive`	`#e03131`
`--jj-color-valid`	`#566c81`
`--jj-color-invalid`	`#868e96`

Semantic tokens

Variable	References	Resolves to
`--jj-color-primary`	`--jj-color-dark-500`	`#293a49`
`--jj-color-primary-contrast`	`--jj-color-light-100`	`#f5f6f8`
`--jj-color-surface`	`--jj-color-light-100`	`#f5f6f8`
`--jj-color-shape-surface`	`--jj-color-light-150`	`#f0f4f7`
`--jj-color-shape-border`	`--jj-color-light-800`	`#8a9eb0`
`--jj-color-link`	`--jj-color-light-800`	`#8a9eb0`
`--jj-color-tool`	`--jj-color-light-100`	`#f5f6f8`
`--jj-color-tool-border`	`--jj-color-light-900`	`#6f859b`
`--jj-color-text`	`--jj-color-dark-200`	`#1a2733`
`--jj-color-border`	`--jj-color-light-500`	`#cfdbe4`
`--jj-color-border-subtle`	`--jj-color-light-200`	`#eaf0f4`

Radii

Variable	Value
`--jj-radius-sm`	`2px`
`--jj-radius-md`	`3px`
`--jj-radius-lg`	`4px`

Spacing

Variable	Value
`--jj-space-xs`	`2px`
`--jj-space-sm`	`4px`
`--jj-space-md`	`6px`
`--jj-space-lg`	`10px`

Stroke and transition

Variable	Value	Description
`--jj-stroke-width`	`2px` (`1.5px` at ≥1.5dppx)	Stroke width for various components
`--jj-transition-duration`	`0.2s`	Duration of default transitions

Cursors

Variable	Value	Description
`--jj-drag-cursor`	`move`	Cursor when hovering over a draggable element
`--jj-dragging-cursor`	`move`	Cursor while dragging an element
`--jj-port-drag-cursor`	`crosshair`	Cursor when hovering over an available port
`--jj-port-dragging-cursor`	`crosshair`	Cursor while dragging a link from the port

Component variables

JointJS
JointJS+

@joint/react component variables

Box (HTML element) variables

These apply to .jj-box, the default class used by HTMLBox and the default renderer. HTMLHost does not apply this class.

Variable	Default	Affects
`--jj-box-color`	`--jj-color-shape-surface`	Element background
`--jj-box-fg-color`	`--jj-color-text`	Element text color
`--jj-box-border-width`	`2px`	Element border width
`--jj-box-border-color`	`--jj-color-shape-border`	Element border color
`--jj-box-border-radius`	`4px`	Element border radius
`--jj-box-padding`	`8px 12px`	Element padding
`--jj-box-font-size`	`14px`	Element font size
`--jj-box-font-family`	`sans-serif`	Element font family
`--jj-box-hover-border-color`	`--jj-color-primary`	Border color on hover
`--jj-box-available-border-color`	`--jj-color-valid`	Border color when the element is marked as an available connection target

Link variables

These apply to the built-in link line.

Variable	Default	Affects
`--jj-link-color`	`--jj-color-link`	Link stroke color
`--jj-link-width`	`2px`	Link stroke width
`--jj-link-dash`	`none`	Link dash pattern
`--jj-link-line-cap`	`butt`	Link line cap
`--jj-link-hover-color`	`--jj-color-primary`	Link stroke color on hover
`--jj-link-connecting-color`	`--jj-color-link`	Stroke color while drawing a new link
`--jj-link-connecting-width`	`2px`	Stroke width while drawing a new link
`--jj-link-connecting-dash`	`8 4`	Dash pattern while drawing a new link

There are no CSS variables for link markers or linejoin. Set those through Links data instead.

Label variables

These apply to built-in link labels.

Variable	Default	Affects
`--jj-link-label-color`	`--jj-color-text`	Link label text color
`--jj-link-label-font-size`	`10px`	Link label font size
`--jj-link-label-font-family`	`Arial, sans-serif`	Link label font family
`--jj-link-label-bg-color`	`--jj-color-light-200`	Link label background fill
`--jj-link-label-border-color`	`--jj-color-light-700`	Link label background stroke
`--jj-link-label-border-width`	`2px`	Link label background stroke width
`--jj-link-label-border-radius`	`2px`	Link label background corner radius

Background shape, padding, and position stay on Links data.

Port variables

These apply to declarative ports created from portMap.

Variable	Default	Affects
`--jj-port-color`	`--jj-color-surface`	Port fill color
`--jj-port-border-color`	`--jj-color-link`	Port border color
`--jj-port-border-width`	`2px`	Port border width
`--jj-port-label-color`	`--jj-color-light-900`	Port label text color
`--jj-port-label-font-size`	`10px`	Port label font size
`--jj-port-label-font-family`	`Arial, sans-serif`	Port label font family
`--jj-port-hover-color`	`--jj-color-shape-surface`	Port fill on hover (active magnet, not connecting)
`--jj-port-hover-border-color`	`--jj-color-link`	Port border color on hover
`--jj-port-hover-border-width`	`4px`	Port border width on hover
`--jj-port-available-color`	`--jj-color-dark-800`	Port fill while a link is connecting and the port is an available target
`--jj-port-available-border-color`	`--jj-color-dark-800`	Port border color while available
`--jj-port-available-border-width`	`2px`	Port border width while available
`--jj-port-connecting-color`	`--jj-color-primary`	Port fill while it is the active source port during connection
`--jj-port-connecting-border-color`	`--jj-color-primary`	Port border color while connecting
`--jj-port-connecting-border-width`	`2px`	Port border width while connecting

Port size, shape, label placement, and passive stay on Ports data.

Paper variables

These apply to the built-in paper surface and default highlighting.

Variable	Default	Affects
`--jj-paper-color`	`--jj-color-light-300`	Paper background
`--jj-paper-grid-color`	`--jj-color-light-700`	Built-in grid line color
`--jj-highlighter-connecting-color`	`--jj-color-primary`	Highlight stroke while a link is connecting
`--jj-highlighter-embedding-color`	`--jj-color-primary`	Highlight stroke while an element is being embedded

Customization with CSS​

CSS Variables​

className property​

Examples​

Light and dark themes​

Tailwind example​

CSS variable reference​

Theme variables​

Base design tokens​

Dark color scale​

Light color scale​

Status colors​

Semantic tokens​

Radii​

Spacing​

Stroke and transition​

Cursors​

Component variables​

@joint/react component variables​

Box (HTML element) variables​

Link variables​

Label variables​

Port variables​

Paper variables​

Stay in the know

Customization with CSS

CSS Variables

className property

Examples

Light and dark themes

Tailwind example

CSS variable reference

Theme variables

Base design tokens

Dark color scale

Light color scale

Status colors

Semantic tokens

Radii

Spacing

Stroke and transition

Cursors

Component variables

@joint/react component variables

Box (HTML element) variables

Link variables

Label variables

Port variables

Paper variables