Free This module comes in the Free package and also in Pro.
The Webal Colour mode switch shows three buttons: Light, Dark and Auto. Visitors use them to choose how your site looks. Auto follows the visitor's device setting, the "dark mode" switch in their phone or computer. The button for the current choice is marked, and the choice is remembered for next time.
Use it in a header, a footer or a sidebar when you want visitors to pick light or dark colours, and the same buttons can also sit inside the Webal navbar. Every switch on a page stays in step with the others.
Before you start
The switch only appears when the Webal Blocks option Site colour mode is set to Auto with a visitor switch. Open Components, Webal Blocks, Options and choose that value. In any other mode visitors see nothing, because there is nothing for them to change, and you see a short note on the page instead, so you know why.
Tip. Joomla's Cassiopeia template has no dark colours of its own. Turn on Dark styles for Cassiopeia in the Webal Blocks Options (Appearance tab) and the whole page turns dark with the switch, but with that option off, only the Webal parts of the page change.
Add it to a page
- Log in to the Joomla administrator, and in the menu on the left choose Content, then Site Modules.
- Press New, and a list of module types opens so that you can choose from it.
- Choose Webal Colour mode switch from the list of module types, which starts a new module of that kind.
- Type a Title for the module, using a name that tells you what the module is for.
- On the Module tab, choose What is shown: Icons and words, Icons only or Words only.
- Choose the Size of the buttons.
- If you want the words Colour mode in front of the buttons, set Show the name to Yes.
- Stay on the Module tab, then open the Position list in the right-hand column and choose a position. A position is a named place in your template where a module can go.
- Under Title in the same column, choose Show or Hide, because the module prints no heading of its own and either choice works.
- Press Save, and wait until the message "Module saved." appears.
- Open the Menu Assignment tab. In Module Assignment, choose Only on the pages selected, so that the module appears only on the pages that you pick.
- Beside Assign to Menu Items, press None, because every page stays ticked until you do this.
- Type the name of the page in the search box, then tick that page so that the module appears there.
- Press Save & Close, which saves the module once more and closes the editing screen.
- Open that page on your site and look for the module in the position that you chose.
Tip. A header, footer or sidebar position is a good place for the switch. If you use more than one switch on a page, give each module a different title, because the title names the switch for screen readers.
Options
Module tab
| Option | What it does | Default |
|---|---|---|
| What is shown | Icons and words, Icons only (the name is read out by screen readers), or Words only. | Icons and words |
| Size | Standard (2.75 rem, about 44 pixels) or Large (3.25 rem, about 52 pixels). Buttons are never smaller than 44 pixels, so they are easy to press on a phone. | Standard |
| Show the name | Shows the words Colour mode in front of the buttons. Screen readers always hear the name. It is the module title, or "Colour mode" when the title is empty. | No |
Layout tab
This tab has the shared groups General, Spacing, Width and Colour scheme. They are explained once, in Options shared by many modules. A Dark colour scheme is useful for a switch in a dark footer on a light page.
Tip. The wrapper element is Section by default, which is a landmark named by the module title. Choose Plain block (no landmark) when the switch sits inside something that is already a region, such as the footer or a header.
Advanced tab
This tab holds Joomla's own settings, such as Module Class and Caching.
Result
Accessibility
- The switch is three real buttons in a group, and the chosen button is announced as pressed.
- It works with the keyboard: Tab to move, Enter or Space to choose.
- The chosen button is shown by a filled shape and a bar under it, not by colour alone, and in Windows high contrast it uses the system colours.
- Every button is at least 44 pixels across.
- Nothing moves, so there is nothing to turn off for visitors who prefer less motion.
What the switch stores
When a visitor presses Light or Dark, the browser keeps one small item named wbl-theme. It says light or dark, so the site can show the same colours on every page and on the next visit. Pressing Auto removes it. Nothing is stored until a button is pressed. It holds no personal data, it is not a cookie, and it is never sent to your server or to anyone else.
Other languages. List it on your cookie or privacy page as a preference item, with that name and purpose. This is a description, not legal advice.
Accessibility. The buttons need scripts to work. Without them the buttons are hidden completely and the site follows the visitor's device setting instead, so there are never buttons that do nothing.
Other languages
The words on the buttons (Light, Dark, Auto) come from language files. If you show the name, it is the module title, so type it in each language in a module copy for that language and set that copy's Language on the Module tab.
Tips
- If the switch does not show, check Site colour mode first, because it must be Auto with a visitor switch.
- Changing that option clears the Webal module cache by itself.
- Icons only is the tidiest look, and the words stay for screen readers.