83 lines
2.8 KiB
Markdown
83 lines
2.8 KiB
Markdown
|
<!--
|
||
|
|
Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
|
||
|
|
|
||
|
|
This file is part of a Moko Consulting project.
|
||
|
|
|
||
|
|
SPDX-License-Identifier: GPL-3.0-or-later
|
||
|
|
|
||
|
|
# FILE INFORMATION
|
||
|
|
DEFGROUP: MokoOnyx.Documentation
|
||
|
|
INGROUP: MokoOnyx
|
||
|
|
REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx
|
||
|
|
FILE: docs/MODULE_COLOR_SCHEME.md
|
||
|
|
VERSION: 02.00.00
|
||
|
|
BRIEF: Per-module color scheme override documentation
|
||
|
|
-->
|
||
|
|
|
||
|
|
# 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.
|