#1962·bpmn-js

Support dark modes with user-defined colors

Author: nikkuCreated Oct 4, 2023Updated Jul 29, 2026
Labelsenhancementbacklogspring cleaning

Is your feature request related to a problem? Please describe.

As a toolkit we allow users to choose the colors of their diagram elements. Under the hood we use the bpmn-in-color vendor extension to support it in a cross-vendor fashion. This implies that we use fixed color codes, tailored towards a particular environment (i.e. light mode).

In the inverted environments (dark mode) they tend to look odd, because pairing darker border + brighter background does not work then:

image

Describe the solution you'd like

Depending on the mode we want to be able to swap fill and stroke:

  • in bright mode, on a light background, fill is brighter, stroke is darker
  • in dark mode, on a dark background, fill is darker, stroke is brighter

This is a good practice and i.e. also how carbon design is doing it.

Describe alternatives you've considered

  • Be able to define a separate color codes (deviate from bpmn-in-color spec)
  • ...

Additional context

Brought up in this conversation.