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:

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.