← Main site

Dark Mode

The Dark Mode Customizer section is where you enable dark mode support and configure its defaults. Find it at Appearance → Customize → Dark Mode.

🔑

This section requires an active license.

Settings

SettingDefaultDescription
Enable Dark Mode SupportOffMaster switch. Must be on for any dark mode features to load.
Default ModeFollow system preferenceWhat the site looks like on first visit: System (follows prefers-color-scheme), Always Light, or Always Dark.
Show toggle button in headerOnDisplays a sun/moon toggle button in the header. When off, the CSS still loads but visitors cannot switch modes manually.

How it works

For a detailed technical explanation, see the Dark Mode — How It Works article.

In short: when Dark Mode is enabled, the theme loads dark-mode.css and an inline anti-FOUC (flash of unstyled content) script. The script reads the visitor's saved preference from localStorage and applies the correct theme before any CSS renders, preventing a flash of the wrong colors on page load.

User preference

Once a visitor manually toggles dark or light mode, their choice is saved to localStorage under the key tbl-color-scheme. This preference persists across pages and browser sessions until cleared.