2. Switcher

Switcher Customization #

The Switcher Customization settings let you control the look and behavior of the Dark Mode toggle switch that appears on your website.

Switch Appearance #

1. Switch Toggler: Choose from multiple switch designs (Classic, Expand, Inner Moon, Around, Dark Side, Horizon, etc.) to match your site’s style.
2. Switch Background: Set the background colors of the switch for both Light Mode and Dark Mode.
3. Switch Size: Adjust the width and height of the floating switch.
4. Switch Border: Customize the border size, color (light and dark), and corner radius of the switch.
5. Switch Icon Color: Define separate icon colors for Light Mode and Dark Mode.
6. Switch Icon Size: Set the size of the switch icon (in pixels).

Tooltips #

7. Tooltip on Floating Switch: Enable this option to show a tooltip (hint text) when users hover over the switch.
8. Tooltip Position: Choose where the tooltip appears: Left, Right, Top, or Bottom.
9. Tooltip Text: Enter custom text for the tooltip (e.g., “Toggle Dark Mode”).
10. Tooltip Color: Define the background and text color for the tooltip.

Advanced Options #

11. Alternative Dark Mode Switch: Enter comma-separated CSS selectors (class or ID) of elements you want to treat as dark mode switches. Example: .custom-switch, #header-toggle.
12. Switcher Shortcode: Use the generated shortcode to place the Dark Mode switch anywhere on your site (e.g., in posts, pages, or widgets).
    • The shortcode supports all customization attributes such as size, icon size, colors, and border styles.
    • Example:

[darkify switch="1" width="60px" height="60px" border="0px" border_radius="7px"
light_mode_bg="#121116" dark_mode_bg="#ffffff" light_mode_color="#ffffff" dark_mode_color="#121116"]

Switcher Positioning #

The Switcher Positioning settings let you control where the Dark Mode toggle switch appears on the screen for both desktop and mobile devices.

1. Switch Position: Choose the screen position of the floating switch: Bottom Right, Bottom Left, Top Right, or Top Left.
2. Margin from Position: Adjust the horizontal and vertical margins (in pixels) from the chosen corner. This ensures the switch does not overlap with other site elements.
3. Different Switch Position on Mobile: Enable this if you want the switch to appear in a different position on mobile devices.
4. Switch Position in Mobile: Select where the switch should appear on mobile (Bottom Right, Bottom Left, Top Right, Top Left).
5. Margin on Mobile: Adjust the margins for the switch when displayed on mobile devices.
6. Absolute Switch Position: When enabled, the switch remains fixed relative to the page content and moves with scrolling.
   • If disabled, the switch stays in a fixed position on the screen regardless of scrolling.
7. Draggable Position Change: Allow users to drag the switcher and reposition it anywhere on the screen.