Dark mode and the theme switcher
In the Theme tab’s General section:
- Theme system - the master on/off switch for light/dark mode.
- Control type - how visitors switch: Switch (a Light/Dark toggle), Radios (Light/Dark/System), or None (no visible control).
- Default choice - the theme shown before a visitor chooses one: System (follows the device setting), Light, or Dark.
- Auto dark - optionally switch to dark automatically by time of day.
A floating theme button can be shown or hidden under Theme Toggle UI. Each visitor’s choice is remembered on their device and, for accessibility, bridged to Bootstrap’s data-bs-theme and ARIA attributes so assistive tech is aware of the active theme. To design your own light and dark colours, see Custom Colour Themes.
Accessibility toolbar
The Accessibility section adds a front-end toolbar (bottom-right) that lets visitors adapt the page to their needs. Each control can be enabled independently:
- Text resize - increase or decrease the text size.
- Colour inversion - invert the page colours.
- High contrast - a high-contrast mode.
- Highlight links - make every link stand out.
- Readable font - switch to a more legible typeface.
- Pause animations - stop CSS animations and motion.
Use the master Accessibility toolbar switch to turn the whole toolbar on or off. Each visitor’s choices are remembered on their device. The same accessibility toolbar is also available inside the Joomla administrator via the Admin Extender plugin.