Overview

Add Dark Mode and High-Contrast Mode to your Mendix app with a single toggle. Enhance UI, accessibility, and user experience instantly.

The module works for both Anonymous users and Logged-in users (User role):

• Anonymous users can use Dark or Contrast Mode during their session, but the theme will reset to Light Mode on page refresh or re-entry.

• Logged-in users will have their selected mode saved automatically, so even if they log out and log back in, the app will remember and restore their preferred theme.

Key Features:

• Light, Dark, and High-Contrast modes.

• Choose which toggle(s) to display – Dark, Contrast, or both.

• Quick integration – no heavy setup required.

• Seamlessly applies to all core UI elements, including containers, text, buttons, data grids, and charts, ensuring a consistent theme across your entire app

Documentation

Typical usage scenario

🌙 1. Dark Mode for Night Users

♿ 2. High-Contrast Mode for Accessibility

💼 3. Corporate or Internal Portals

🎨 4. Brand-Customizable Themes

👥 5. User Personalization

Features and limitations

• Light, Dark, and High-Contrast modes.

• Choose which toggle(s) to display – Dark, Contrast, or both.

• Quick integration – no heavy setup required.

• Seamlessly applies to all core UI elements, including containers, text, buttons, data grids, and charts, ensuring a consistent theme across your entire app.

Configuration 

Enable your security first for User Roles (Anonymous, User).

Go to your app security -> User Roles -> Double click on Anonymous -> Edit module roles -> Marketplace modules -> Administration -> Select User.

Go to your app security -> User Roles -> Double click on Anonymous -> Edit module roles -> Marketplace modules -> XebiaDarkMode ->  Select Anonymous.

Go to your app security -> User Roles -> Double click on User-> Edit module roles -> Marketplace modules -> XebiaDarkMode ->  Select User.

Go to your app security -> User Roles -> Double click on Administrator-> Edit module roles -> Marketplace modules -> XebiaDarkMode ->  Select User.

Now, use the SNIP_XebiaDarkMode snippet on any page or layout where you want to enable the Dark & Contrast Mode functionality.