How to Use a Custom Dark Mode Switch (Advanced)

With WP Dark Mode you can use a unique floating switch icon to toggle between light mode and dark mode. 

Insert the following HTML snippet into your webpage where you want the custom dark mode switch to appear:

<div class="wp-dark-mode-switch">
    <div class="light">Show Dark</div> 
    <div class="dark">Show Light</div> 
</div>

You can customize the appearance and behavior of the dark mode switch to suit your website’s design and requirements.

1. Text-Based Dark Mode Switch: With the following code, you can display “Light Mode” text when the website is in light mode and “Dark Mode” text when the website is in dark mode.

<div class="wp-dark-mode-switch">
    <div class="light">Light Mode</div> 
    <div class="dark">Dark Mode</div> 
</div>

2. Image-Based Dark Mode Switch: With the following code, you can use multiple images for the dark mode switch based on your website’s appearance (dark mode/light mode).

<div class="wp-dark-mode-switch">
    <div class="light"><img src="light-mode-icon.png" alt="Light Mode"></div> 
    <div class="dark"><img src="dark-mode-icon.png" alt="Dark Mode"></div> 
</div>

3. SVG-Based Dark Mode Switch: With the following code, you can multiple SVG images for the dark mode switch based on your website’s appearance (dark mode/light mode).

<div class="wp-dark-mode-switch">
    <div class="light">
        <svg>...</svg> <!-- SVG for light mode -->
    </div> 
    <div class="dark">
        <svg>...</svg> <!-- SVG for dark mode -->
    </div> 
</div>