Dark Mode

Control how your site appears in light and dark color schemes. Choose between automatic switching based on system preferences or fixed color modes.

Customization Steps#

1. Navigate to ⛭ Settings → Design
2. Click Customize
3. Click Theme
4. Find the Dark mode option
5. Select your preferred mode
6. Click Save

Available Options#

Dark Mode Toggle#

Visitors can manually switch between light and dark modes using the toggle button. To enable this feature:

1. Go to ⛭ Settings → Design → Customize
2. Find the Additional features setting
3. Make sure toggle-dark-mode is included in the list
4. Click Save

See Additional Features for more details.

How It Works#

The theme uses two methods to determine which color scheme to display:

With Toggle Enabled#

When toggle-dark-mode is included in Additional Features:

• Visitors see a toggle button to switch between modes
• Their preference is saved in browser localStorage
• The saved preference overrides the default setting
• Preference persists across visits

Without Toggle#

When toggle-dark-mode is not in Additional Features:

• No toggle button is shown
• The site uses the mode selected in settings (Light, Dark, or Auto)
• Auto mode follows the visitor's system preferences