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:
<script src="joint-plus.js"></script>
Access setTheme
through the joint
namespace:
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');