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 Size: Choose a pre-defined size for the floating toggle switch, or select Custom to define your own size.
3. Custom Switch Size: Set a custom value to resize the floating switch.
4. Switch Background: Set the background colors of the switch for both Light Mode and Dark Mode.
5. Switch Icon Color: Define separate icon colors for Light Mode and Dark Mode.
6. Switch Border: Customize the border width, border color (Light and Dark), and corner radius of the switch.

Tooltips #

7. Tooltip on Floating Switch: Enable this option to show a tooltip (hint text) when users hover over the floating 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 act 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 (posts, pages, widgets, Elementor, Gutenberg, etc.).
    • The shortcode supports customization options such as size, colors, icon colors, and border styles.
    • Example:

[darkify switch="1" light_mode_bg="#121116" dark_mode_bg="#ffffff" light_mode_color="#ffffff" dark_mode_color="#121116" border="0px" border_light_color="#121119" border_dark_color="#ffffff" border_radius="7px" switch_size="100"]

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.