Pages
Contents
2. Theme Switcher
The theme package automatically detects how many themes are allowed (theme.allow in xpulse.json).
Behaviour by Configuration
| Number of allowed themes | Behaviour |
|---|---|
| 1 theme | No switcher is shown |
Exactly 2 themes (dark + light) |
Elegant moon/sun toggle switch |
| More than 2 themes | Dropdown with theme names |
Example: Toggle Switch (dark + light)
| {% themeSwitcher() %} |
Visual Result
A minimal slider with moon on the left and sun on the right. A tooltip appears on hover.
Configuration in `xpulse.json`
| { |
| "theme": { |
| "default": "dark", |
| "allow": ["dark", "light", "my-theme"] |
| } |
| } |
Anti-FOUC Protection
The theme is applied in the <head> before CSS loads. No flash of unstyled content on page load.