Dark Mode
Dark mode is seamlessly integrated into Cwicly and requires minimal user intervention.
The user’s system preferences are automatically detected but a switch action is provided for manual selection.
Cwicly global colours support light and dark mode.
Light mode colours are applied by default.
Light/Dark Mode
A toggle is provided so that you can easily switch between light and dark modes.
In the Editor, navigate to the Cwicly Header Toolbar.
Click the Light/Dark Mode toggle to switch between Light and Dark modes.
Apply Light Mode
You can apply a light mode value to a Global Colour.
Select a global colour.
Click the Light/Dark toggle in the Cwicly Header Toolbar to change to light mode.
Choose a suitable colour.
Apply Dark Mode
You can apply a dark mode value to a Global Colour.
Select a global colour.
Click the Light/Dark toggle in the Cwicly Header Toolbar to change to dark mode.
Choose a suitable colour.
Dark Mode Switch Actions
The Dark Mode switch actions enables you to offer a user-initiated, accessibility focused switch between light and dark display modes for your website visitors.
User preference is remembered.
Ready-made Toggle
You can use the ready-made toggle provided.
The URL link below will take you to a Discourse page where you can download the button.
Drag and drop on to your page.
It should look something like this:
Custom Toggle
Or create your own.
Select an appropriate block.
Open the link settings.
Set Type to Action.
Set Action to Toggle (Dark Mode).
Force Colour Scheme
You can force a specific mode on a block irrespective of the mode currently applied.
Select a block.
In the Block Inspector, hover over the Force Colour Scheme icon.
Apply the desired mode.
Whether light or dark mode is selected, the forced mode will override.
Last updated
