Themes

JointJS+ provides a setTheme function that enables the ability to set the built-in theme globally.

Installation

Import setTheme in your application, and set your preferred theme.

import { setTheme } from '@joint/plus';

setTheme('material');

If using a UMD version of JointJS+

Include joint-plus.js in your HTML:

index.html

<script src="joint-plus.js"></script>

Access setTheme through the joint namespace:

index.js

joint.setTheme('material');

How does setTheme work?

JointJS+ now comes with a variety of themes ("material", "modern", "dark", and the default theme). It is possible to set the theme globally (applied to all UI components), and to set a different theme for each UI component individually.

Setting the theme globally:

import { setTheme } from '@joint/plus';

setTheme('material');

This will update the theme for all the components currently rendered, as well as for any components that are rendered from now on.

Setting the theme for an individual component:

import { ui } from '@joint/plus';

const colorPalette = new ui.ColorPalette({
    theme: 'material',
    options: [
        { content: '#90C3D4' },
        { content: '#D4A190' },
        { content: '#A1D490' },
        { content: '#ffffff' }
    ]
});

document.body.appendChild(colorPalette.render().el);

And to change the theme of a component that has already been rendered:

colorPalette.setTheme('modern');