# 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.