theming

bpmn-js theming

This example showcases the different aspects of theming bpmn-js.

Theming bpmn-js

Custom Renderer

This example uses bpmn-js-sketchy to replace the default renderer. You can also roll your own renderer as shown in the custom elements example or bpmn-js-nyan.

Custom Font

You can specify which font bpmn-js should use:

var bpmnViewer = new CustomBpmnJS({
  // ...
  textRenderer: {
    defaultStyle: {
      fontFamily: '"Nothing You Could Do"'
    }
  }
});

Note: Make sure the font has been loaded before rendering a diagram.

Custom Colors

Customizing the colors is very simple:

var bpmnViewer = new CustomBpmnJS({
  // ...
  bpmnRenderer: {
    defaultFillColor: '#333',
    defaultStrokeColor: '#fff'
  }
});

Custom CSS

bpmn-js comes with a default stylesheet. Of course you can override any of these styles.

Run this example

npm install
npm run all

License

MIT