Frontend Controls #

The Frontend Controls section lets you configure how Dark Mode behaves on the public side of your website. These options allow you to set defaults, control how the switcher appears, and automate Dark Mode behavior.

Basic Control Options #

1. Frontend Dark Mode: Enable or disable Dark Mode for the website frontend. When enabled, visitors can switch between light and dark mode.
2. Default Dark Mode: Set your website to load in Dark Mode by default. Visitors can still toggle back if the switcher is available.
3. OS Aware Dark Mode: Automatically matches the visitor’s operating system preference (e.g., macOS/iOS/Windows dark mode).
4. Keyboard Shortcut: Allow users to toggle Dark Mode using the shortcut Ctrl + Alt + D.

Advanced Control Options #

5. Time-Based Auto Dark Mode: Automatically enable Dark Mode based on a visitor’s local time.
6. Pick a Time: Define the time range for auto Dark Mode (e.g., 7:00 PM – 6:00 AM).
7. Hide Dark Mode Switch on Desktop: Option to hide the floating Dark Mode switcher for desktop/laptop users.
8. Hide Dark Mode Switch on Mobile: Option to hide the floating Dark Mode switcher for mobile users.
9. Hide By: Choose how the plugin detects devices when hiding the switcher:
   • User Agent
   • Screen Size
   • Both

Menu Integration #

10. Show Switch in Menu: Add the Dark Mode toggle switch directly into a navigation menu.
11. Select Menu: Choose which WordPress menu should contain the switch.
12. Select Menu Item: Specify the exact menu item where the switch should appear. You can add multiple items.
13. Shortcode for Menu Switch: A shortcode is automatically generated for the menu switch.
    You can customize its appearance using attributes such as:

• icon_size="40px"
• width="60px"
• height="60px"
• border_radius="7px"
• light_mode_bg="#121116"
• dark_mode_bg="#ffffff"
• light_mode_color="#ffffff"
• dark_mode_color="#121116"
• border_light_color="#121119"
• border_dark_color="#ffffff"

14. Menu Position: Choose whether the switcher appears Before or After the selected menu item.

Admin Controls #

The Admin Controls section lets you enable Dark Mode for the WordPress Admin Dashboard and optionally exclude specific pages from using it.

1. Admin Panel Dark Mode: Toggle this option to enable or disable Dark Mode for the WordPress Admin Dashboard.
2. Disallowed Pages: Enter a comma-separated list of admin page slugs where Dark Mode should not apply.
   • Example: darkify-dashboard, elementor
   • This is useful if certain plugins or pages don’t display correctly in dark mode.