Yes, I know the title seems a bit too good to be true. Every web app has a lot of custom styling and company branding that needs to be considered when designing a dark theme. Normally, this process takes a lot of time. You have to pick the right color palette, then refactor the CSS to support two different color themes. As a consequence almost the entire CSS has to be rewritten, because honestly nobody truly plans for such scenarios in advance.
So how can all of this possibly be done in just five minutes? Easy, follow the steps:
I went through these steps for the app store app, Atlas UI Resources. You can find the results at https://darkreader-sandbox.mxapps.io/. This is a great sample app for a dark theme since it has all Mendix components. You can easily see how they all look in a dark theme mode.
Hopefully you find this module useful, and it helps you build better Mendix apps.
Wait, wait... you must be asking how this module is actually working. The answer is simple:
<aside> 🧙🏻 Magic.
Hmm. It seems like you really want to know. Ok, brace yourselves this might get technical.
Let me tell you the full story.