Enabling Dark Mode

Dark mode is disabled by default and requires an active license to configure. Follow the steps below to turn it on.

Step-by-step

1. Go to Appearance → Customize → Dark Mode.
2. Check Enable Dark Mode Support. The dark mode CSS and anti-FOUC script will now load on every page.
3. Choose a Default Mode:
   • Follow system preference — dark mode activates automatically for visitors whose operating system or browser is set to dark mode.
   • Always light — the site always starts in light mode regardless of system settings.
   • Always dark — the site always starts in dark mode.
4. Leave Show toggle button in header checked if you want visitors to switch between modes manually.
5. Click Publish.

Hiding the toggle button

If you uncheck Show toggle button in header, the toggle button is removed from the header but dark mode CSS still loads. This is useful if you want to default to dark mode for all visitors without giving them the option to switch.

Testing dark mode

After enabling, open your site in a browser and click the sun/moon toggle in the header. The page should switch themes instantly without reloading. Your preference is preserved when you navigate to other pages.

To test the anti-FOUC behavior: enable dark mode, set the toggle to "Always dark," clear localStorage in DevTools (Application → Local Storage → Clear All), and do a hard refresh (Ctrl+Shift+R). The page should open in dark mode immediately, without any white flash.

Customizing dark mode colors

The dark color palette is defined in assets/css/dark-mode.css in the theme folder. To modify the colors without editing the parent theme, copy dark-mode.css to your child theme and enqueue the child version with a higher priority, or override specific CSS custom properties in your child theme's style.css using the [data-theme="dark"] selector.