Theme Toggle for BPMN Viewer / Modeler in React Application

Developers
1

Hi,

I’m attempting to integrate the BPMN Viewer (and eventually the Modeler) in a React application where I need to support both a light and dark theme that can be toggled by users.

I’m able to set the default fill and stroke colors when creating the Viewer. However, all of my attempts so far to update these colors when the theme changes have failed. More specifically, the bpmnRenderer or defaultFillColor / defaultStrokeColor are always undefined when I attempt an update.

You can find an example of one attempted approach here:

Does anyone know how to go about accessing / updating these properties? Or would there be a better approach altogether for this use case?

Thanks for any advice.

2

Hello @pookni,

At the moment, it is not possible to change the default colors of the diagram after its creation.

You can tackle the light/dark mode on your side by using the defaultFillColor and defaultStrokeColor properties together with CSS operations.

Alternatively, you can use modeling.setColor to set the color of shapes (eg.: here):

const modeling = modeler.get('modeling');
modeling.setColor(shapes, {
     fill,
     stroke,
});
3

defaultFillColor / defaultStrokeColor are always undefined when I attempt an update

these values are not public variables and can’t be accessed during runtime.

Currently, the only way to modify them is to re-render the viewer when the theme changes. This has some side effects, like resetting the viewport, but those can be cached and reset with canvas.viewbox() on the rerender.

here is an example of re-rendering the Viewer on theme change:

4

Thank you both for the insight. It’s very much appreciated.

I’ve updated my initial CodeSandbox link with the above solution + my attempt to cache and reset the viewbox to avoid repositioning the diagram on rerender. It seems to be working, so hopefully I have done that part decently well.

Thanks again!