Dark mode in Signocore Slate lets visitors switch your site between two color palettes: the one your site normally uses and a dark palette you prepare. It does not invent dark colors for you. The result looks as good as the palette you give it.
How it works
Your site's colors come from the global palette, which holds up to three palettes. See Global color palette. When a visitor switches to dark mode, palette colors 1 to 9 (accents, text and backgrounds) change to the colors of the palette you chose as the dark palette. Colors 10 to 15 stay the same.
Everything that uses palette colors follows the switch: the header, the footer, buttons, links and blocks where you picked a palette color. A color typed in as a hex code stays the same in both modes, so use palette colors in your content if it should adapt.
Prepare a dark palette
Out of the box, Palette 3 holds a dark version of the default colors and Palette 2 is a copy of Palette 1. Check Palette 3 against your own colors before you turn dark mode on.
- Go to Appearance → Customize → Colors & Fonts → Colors.
- Under Global Palette, click Palette 3. The preview switches to it.
- Adjust the colors. Keep the same roles as in your light palette, only reversed: colors 3 to 6 are text and need to be light, colors 7 to 9 are backgrounds and need to be dark.
- Click Palette 1 again to make your light palette the active one.
- Click Publish.
Important: The palette you have selected when you click Publish becomes your site's normal palette. Always switch back to your light palette before you publish.
Turn on dark mode
- Go to Appearance → Customize → General → Color Switch (Dark Mode).
- Turn on Enable Color Palette Switch (Dark Mode)?.
- Set Dark Color Palette to the palette you prepared, for example Palette 3.
- Click Publish.
| Setting | Default | What it does |
|---|---|---|
| Enable Color Palette Switch (Dark Mode)? | Off | Turns dark mode and all its switches on |
| Default Color Palette | Light | What first-time visitors see: Light or Dark |
| OS Aware | Off | Starts first-time visitors in the mode their device uses. See Follow the visitor's device setting |
| Dark Color Palette | Palette 3 | The palette used in dark mode: Palette 1, Palette 2 or Palette 3 |
Note: The default Dark Color Palette is Palette 3, the dark version of the default colors. Sites that saved Palette 2 keep it. If dark mode looks the same as light mode, set it to Palette 3 or change the colors of Palette 2.
A different logo in dark mode
A dark logo on a dark background disappears. In the same section, turn on Different Logo for Dark Mode? and upload a light version under Dark Mode Header Logo. Turn on Different Logo for Mobile? to set a separate dark logo for the mobile header. These options show when your header displays a logo image.
Add a switch
Visitors change the mode with a switch. You can offer it in four places, and use more than one.
Floating switch
The floating switch sits in a corner of the screen on every page. It is on by default once dark mode is enabled. Its settings are under Fixed Switch in Appearance → Customize → General → Color Switch (Dark Mode):
| Setting | Default | What it does |
|---|---|---|
| Show Fixed Switch? | On | Shows or hides the floating switch |
| Switch Type | Icons | Icons, Text or Icons and Text |
| Switch Style | Switch | Switch shows a toggle. Button shows only the mode you can switch to |
| Switch Align | Right | Bottom Left or bottom Right corner |
| Side Offset, Bottom Offset | 30 px | Distance from the side and the bottom of the screen |
| Light Mode Icon, Dark Mode Icon | Sun, moon | The icons for each mode |
| Icon Size, Switch Colors, Text Label Font | The look of the switch | |
| Light Palette Title, Dark Palette Title | Light, Dark | The text labels for each mode |
| Enable Tooltip? | Off | Shows the label as a tooltip. For the Button style with Icons |
| Visibility | Desktop and tablet | Devices that show the floating switch. It is hidden on phones by default |
Switch in the header
- Go to Appearance → Customize → Header.
- Add Dark Mode Toggle to a zone in the builder. See Header and footer builder.
- Switch to the Tablet / Mobile tab and add Dark Mode Toggle there too if phone visitors should have it.
- Click the gear icon on the element to set its Switch Type, Switch Style, icons, colors, labels and Margin.
The header switch and the mobile header switch have their own settings, both in a section named Color Switch (Dark Mode) inside the Header panel. If dark mode is off, the section shows *You must Enable Dark Mode and the switch does not appear on the site.
A common setup is a switch in the header on all devices, with Show Fixed Switch? turned off.
Switch in the footer
Go to Appearance → Customize → Footer and add Dark Mode Toggle to a footer column. Its settings are in Color Switch (Dark Mode) inside the Footer panel, with the same options as the header switch plus Content Align and Content Vertical Align.
Switch in your content
Add the [slate_dark_mode] shortcode to a page, a post or a widget, for example with a Shortcode block. The switch uses the Switch Type, Switch Style, icons and labels of the floating switch. Add show_title="false" to leave out the text labels and show only the icons: [slate_dark_mode show_title="false"].
The shortcode prints the switch only while dark mode is enabled and Show Fixed Switch? is on.
How the visitor's choice is stored
When a visitor clicks a switch, Signocore Slate saves the choice in a cookie in the visitor's browser. The cookie holds only light or dark and lasts 300 days. Its name starts with a short code based on your site address and ends in -paletteCookie, so two sites on the same domain keep separate choices. On the next visit the page loads in the saved mode.
The cookie is only set when a visitor clicks a switch. If you list cookies in your cookie policy, add this one as a preference cookie.
Note: With page caching, a cached page can be delivered in the other mode first. The theme's script then applies the saved choice as soon as the page has loaded.
Follow the visitor's device setting
With OS Aware on, a visitor who has not clicked a switch yet gets dark mode when their device is set to dark mode, and light mode in every other case. The device setting then takes the place of Default Color Palette, which only decides how the page looks before the check runs.
- The check runs when the page has loaded, so a visitor whose device uses dark mode can see the light colors for a moment on the first page.
- A visitor who clicks a switch overrides the device setting, and the saved choice wins on later visits.
- The device setting is read when a page loads. If the visitor changes it while a page is open, the page changes at the next page load.
LearnDash Focus Mode
With LearnDash in Focus Mode, lessons use LearnDash's own header. To offer dark mode there, go to Appearance → Customize → LearnDash → Lesson Layout and turn on Enable Dark Mode Switch in LearnDash Focus Mode Header?. Only show dark mode in Lessons? limits dark mode to lesson pages, and LearnDash Focus Mode Dark Mode Logo sets the logo for the dark Focus Mode header. These options appear when dark mode is enabled and LearnDash Focus Mode is on.