Hi Camunda! Are there any plans to release this trendy-like IDE’s dark UI in Modeler? If this not expected soon it would be highly appreciated to draft mini how-to guide of customizing current version into the dark theme here. Thanks.
I would love this - In fact i recently added a Dracula theme to the forum, so I’m very much on board with the trendy dark mode.
I know that Dark Mode for cockpit is pretty easy to implement so that might be a good place to start, maybe @martin.stamm could point you in the direction of some code.
@nik.nixon Dark mode is not on our short term bucket list yet.
How familiar are you with extending the Modeler?
I’m actually working on a BA side, so I’ve planned to transfer the task for my team’s developers with at least a bit detalaised how-to description with your help.
All right then.
So generally speaking, there is two aspects regarding the dark mode editor:
- The editor contents: can be themed via CSS. That theming may be provided via a plug-in provided style
- The editor itself: May not be dark mode aware at the moment. But that would be an easy one to provide by us, if you guys make your dark mode theme publicly available
The third aspect is theming the actual diagrams. bpmn-js has theme support. dmn-js, our DMN editor does not have theme support yet.
A quick and dirty dark mode may be created via a single line of CSS, too. That however will not yield the joy and happiness of a properly implemented dark mode.
This resource may also be relevant regarding certain aspects of dark modes (and how they are not simple CSS filters in most cases 
).
3 Likes
Thank you for a such detailed response, will try work it out! 
Any updates? 
My solution is very simple:
Wrap and apply css filter: invert(1)
HTML
<div class="bpmn-container">
... your bpmnjs here...
</div>
css:
.bpmn-container {
filter: invert(1);
}
.bpmn-container .djs-context-pad.open>.group>.entry {
background-color: black
}