MokoOnyx/docs/MODULE_COLOR_SCHEME.md

Per-Module Color Scheme

Force any module into dark or light mode regardless of the site's current theme.

Usage

1. Open the module in Content > Site Modules
2. Go to the Advanced tab
3. In Module Class Suffix, enter theme-dark or theme-light
4. Save

The module will render in the specified color scheme — even if the rest of the page uses the opposite theme.

Examples

Dark module on a light page

Set Module Class Suffix to theme-dark:

Module Class Suffix: theme-dark

The module gets a dark background with light text, using the same dark palette variables defined in your theme.

Light module on a dark page

Module Class Suffix: theme-light

Combining with other suffixes

You can combine theme-dark or theme-light with other CSS classes:

Module Class Suffix: theme-dark shadow-lg rounded-3

How It Works

1. CSS variables are scoped to [data-bs-theme] (not just :root), so they apply to any element with the attribute — including module wrappers
2. JavaScript scans for .theme-dark and .theme-light classes on page load and adds data-bs-theme="dark" or data-bs-theme="light" to those elements
3. Bootstrap 5.3+ natively supports data-bs-theme on any element, so all Bootstrap components inside the module (buttons, cards, alerts, etc.) also switch automatically

Supported Module Types

All module types work — the feature operates at the HTML class level, not the module override level. This includes:

• Custom HTML modules
• Menu modules
• Article modules
• Login modules
• Third-party modules (VirtueMart, DPCalendar, Community Builder, etc.)
• Any module using the card layout chrome

Custom Palettes

If you use custom color palettes (light.custom.css / dark.custom.css), the module will inherit those custom variables when themed. No additional configuration needed — the same palette files apply to both page-level and module-level theming.

Technical Notes

• The data-bs-theme attribute is set via JavaScript after DOM load
• CSS selectors use [data-bs-theme="dark"] without :root prefix, enabling nested scoping
• Themed modules get background-color: var(--body-bg) and color: var(--body-color) automatically
• The theme toggle (light/dark switch) only changes :root — it does not override module-level data-bs-theme attributes. Modules with an explicit suffix always stay in their specified scheme.