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:
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.
Source: bpmn-io/bpmn-js