Overview

Dynamic Theme Switcher

Overview

The Dynamic Theme Switcher module enables runtime theme switching in Mendix applications using a database-driven approach.

It allows developers and end-users to dynamically change UI themes (e.g., Dark, Light, Custom Branding) without modifying code.

This module is designed to be plug-and-play, reusable, and easily configurable for enterprise-grade applications.

Features

• •  Dynamic theme switching at runtime
  •  Database-driven theme configuration
  •  Ready-to-use UI snippet for theme selection
  •  Reusable microflows and logic
  •  Supports multiple themes (Dark, Blue, Green, Red)
  •  Easy integration into existing Mendix apps
  •  Scalable for multi-brand applications

Domain Model

Entity: Theme

Attribute

Type

Description

Name

String

Display name of the theme

ClassName

String

CSS class applied to the UI

IsDefault

Boolean

Marks default theme

Microflows

Microflow Name

Description

ACT_ApplyTheme

Applies selected theme dynamically

ACT_SetDefaultTheme

Sets default theme

DS_GetThemes

Returns list of available themes

UI Components

Snippet: SNIP_ThemeSelector

• • Dropdown for selecting themes
  • Calls ACT_ApplyTheme on change
  • Can be placed in:
  • Navigation bar
  • Settings page
  • Header

Installation Guide

Step 1: Import Module

• • Download and import the module (.mpkg) into your Mendix application

Step 2: Add Snippet to UI

• • Open your page (e.g., Homepage)
  • Drag and drop:

SNIP_ThemeSelector

Step 3: Configure Themes in Database

Add records in Theme entity:

Name

ClassName

IsDefault

Light

theme-light

true

Dark

theme-dark

false

Blue

theme-blue

false

Step 4: Add CSS Styling

Navigate to:

theme/web/custom-variables.scss

Example:

[data-theme="theme-dark"] {

--background-color: #121212;

--text-color: #ffffff;

}

[data-theme="theme-light"] {

--background-color: #ffffff;

--text-color: #000000;}

Step 5: Apply Theme on Load (Optional)

Call microflow:

ACT_ApplyTheme

• • On login
  • On page load
  • After user preference retrieval

How It Works

• • User selects a theme from dropdown
  • ACT_ApplyTheme is triggered
  • Theme class is applied to the UI
  • CSS variables update dynamically
  • UI reflects selected theme instantly

Customization

You can extend the module to support:

🔹 User Preferences

• • Store selected theme per user
  • Apply automatically on login

🔹 System Theme Detection

• • Detect device theme mode
  • Apply theme accordingly

License

Recommended: Apache 2.0

Support

For issues or enhancements, feel free to raise a request or contact the author.

Version History

v1.0.0

• • Initial release
  • Dynamic theme switching
  • Database-driven configuration
  • UI snippet included

Future Enhancements

• • Theme preview before selection
  • Animation transitions
  • Advanced branding engine
  • Theme import/export

Documentation

Dynamic Theme Switcher

Overview

The Dynamic Theme Switcher module enables runtime theme switching in Mendix applications using a database-driven approach.

It allows developers and end-users to dynamically change UI themes (e.g., Dark, Light, Custom Branding) without modifying code.

This module is designed to be plug-and-play, reusable, and easily configurable for enterprise-grade applications.

Features

• •  Dynamic theme switching at runtime
  •  Database-driven theme configuration
  •  Ready-to-use UI snippet for theme selection
  •  Reusable microflows and logic
  •  Supports multiple themes (Dark, Blue, Green, Red)
  •  Easy integration into existing Mendix apps
  •  Scalable for multi-brand applications

Domain Model

Entity: Theme

Microflows

UI Components

Snippet: SNIP_ThemeSelector

• • Dropdown for selecting themes
  • Calls ACT_ApplyTheme on change
  • Can be placed in:
  • Navigation bar
  • Settings page
  • Header

Installation Guide

Step 1: Import Module

• • Download and import the module (.mpkg) into your Mendix application

Step 2: Add Snippet to UI

• • Open your page (e.g., Homepage)
  • Drag and drop:

SNIP_ThemeSelector

Step 3: Configure Themes in Database

Add records in Theme entity:

Step 4: Add CSS Styling

Navigate to:

theme/web/custom-variables.scss

Example:

[data-theme="theme-dark"] {

--background-color: #121212;

--text-color: #ffffff;

}

[data-theme="theme-light"] {

--background-color: #ffffff;

--text-color: #000000;}

Step 5: Apply Theme on Load (Optional)

Call microflow:

ACT_ApplyTheme

• • On login
  • On page load
  • After user preference retrieval

How It Works

• • User selects a theme from dropdown
  • ACT_ApplyTheme is triggered
  • Theme class is applied to the UI
  • CSS variables update dynamically
  • UI reflects selected theme instantly

Customization

You can extend the module to support:

🔹 User Preferences

• • Store selected theme per user
  • Apply automatically on login

🔹 System Theme Detection

• • Detect device theme mode
  • Apply theme accordingly

License

Recommended: Apache 2.0

Support

For issues or enhancements, feel free to raise a request or contact the author.

Version History

v1.0.0

• • Initial release
  • Dynamic theme switching
  • Database-driven configuration
  • UI snippet included

Future Enhancements

• • Theme preview before selection
  • Animation transitions
  • Advanced branding engine
  • Theme import/export