Free Colour modes and the dark styles for Cassiopeia are part of the core of Webal Blocks, so they are in the Free package and in Pro.
Webal Blocks can show your whole site in light colours, in dark colours, or in the colours that your visitor's device asks for, and a visitor can also choose for themselves with a colour mode switch. This page explains the choices and how to turn on the dark colours for the Cassiopeia page itself.
The four colour modes
The setting is called Site colour mode, and you find it in Components, Webal Blocks, Options, on the Appearance tab. The starting choice is Light.
| Choice | What visitors see |
|---|---|
| Light | The site is always light. |
| Dark | The site is always dark. |
| Auto (follows the visitor's device) | The site follows the dark or light setting of the visitor's phone or computer. |
| Auto with a visitor switch | The same as Auto, and visitors can pick for themselves once a colour mode switch is on the page. |
Turn on dark colours for the whole page
Your template must have dark styles of its own for the whole page to turn dark. Joomla's Cassiopeia does not have them, so Webal Blocks adds them, and without them, the Webal parts turn dark while the Cassiopeia page itself stays light, which looks broken.
- Open Components, Webal Blocks and press Options, and then choose the Appearance tab.
- Set Site colour mode to Dark, Auto or Auto with a visitor switch.
- Set Dark styles for Cassiopeia to Yes, and note that this option only shows while the colour mode is not Light.
- Press Save & Close.
- If Joomla's caching is on, clear the site cache (a store of finished pages and modules), and then look at your site with your device set to dark.
The dark styles are off by default, and a site whose template already has dark styles of its own does not need them.
Give visitors a switch
Choose Auto with a visitor switch, then put the switch on the page in one of two ways:
- Add the Webal Colour mode switch module. The page Webal Colour mode switch shows how.
- Show the switch inside the Webal navbar. The page Colour switch and buttons in the navbar shows how.
The switch has three buttons: Light, Dark and Auto. The choice is saved in the visitor's browser, on that device only, and nothing is sent to your server. There is no cookie (a small file that a website saves in the visitor's browser) and there is no tracking, and you should list the switch on your privacy page as a preference item.
The Appearance tab colours
| Option | What it does | Starting choice |
|---|---|---|
| Use the template's colours | Yes takes the accent, link and link hover colours from your template, so the modules always match it. No lets you set your own. | Yes |
| Accent colour | The main colour for buttons and highlights. Text on top of it turns black or white by itself so it stays easy to read. | #112855 |
| Link colour | The colour of links in the modules. Pick a dark colour for a light page. | #224faa |
| Link hover colour | The colour of a link while the pointer is over it or it has keyboard focus. | #424077 |
The three colour choices show when Use the template's colours is No, and you should pick colours that are easy to read, because text needs a contrast of 4.5 to 1 against its background.
What the dark styles change
They recolour Cassiopeia's own page: the background and text, links, the header and its menu dropdown, the footer, cards, breadcrumbs, buttons, forms (fields, selects, check boxes, radio buttons and switches), tables, pagination, tabs, accordions, list groups, alert boxes and system messages, Smart Search results, the language switcher and the article voting stars.
A coloured block you made with a module's Colour scheme option keeps working: a Dark block on a dark page is already right, and a Light block on a dark page gets Cassiopeia's normal light colours back inside it, so a button, a table or an alert in that block still reads as light.
What they do not change
- Other extensions' own styles, such as a shop, a forms extension or a gallery, so you should ask the extension, or add the colours to your child theme.
- The editors, date pickers and the administrator area.
- Images, which are never changed.
- Some Bootstrap badge and text colours that Cassiopeia forces. Six text colours and the light background are lifted for the dark page, while the others keep their light colours, which read fine on a dark page for fills with their own background.
How it behaves
- Only when dark. A light page is exactly the normal Cassiopeia page.
- No flash. The page colours are set in the very first paint, so moving from one dark page to the next shows no bright frame.
- Nothing moves. Switching the colour mode changes colours only, and no box changes size or place.
- Without scripts (small programs that run in the browser). A site set to Dark is dark, and a site set to Auto follows the device. Only the visitor's own switch needs a script.
- High contrast and print. In a high-contrast theme the dark styles switch themselves off and the browser's own colours win, and a printed page is always the light page.
- Contrast. Text pairs are measured at 4.5 to 1, and controls and focus rings are measured at 3 to 1.
For your web developer. The file is about 3.7 KB when compressed. It is sent to everybody whenever the option is on and the colour mode is not Light, because only the visitor's browser knows the visitor's choice and Joomla may serve the page from its cache. Every rule in it waits for the dark colour mode, and it loads after the template's styles and before the child theme's user.css, so your own rules win. To change a colour, add a rule that starts with :root[data-wbl-theme="dark"] and sets --wbl-cd-raised (cards, dropdowns and boxes) or --wbl-cd-sunken (form fields). Check any new pair of colours.
Tip. If Joomla's caching is on, clear the site cache after you change the colour mode, the dark styles option or your colours, so that visitors see the change.
Accessibility. The switch is a group of three real buttons, and the chosen one is announced as pressed and is also shown by a filled shape and an underline, not by colour alone. It works with the keyboard, and the targets are 44 pixels or more.
Other languages. The words on the switch buttons come from Joomla's language files in the language of the page, and you can change them for each language in System, Language Overrides.