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:

1. Add the Mendix Dark Theme module from the app store to your Mendix app
2. Add a nanoflow button (or three) to a layout, navigation or page of your choice
3. From the nanoflow call the java script action JSA_ApplyTheme
4. Run your app and see the results.

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.

</aside>

Hmm. It seems like you really want to know. Ok, brace yourselves this might get technical.

The magic

Let me tell you the full story.