Dark Mode / Light Mode Toggle sys

This Dark Mode / Light Mode Toggle System is a lightweight snippet that adds a theme switcher to your WordPress site. It allows users to toggle between dark and light aesthetics seamlessly, enhancing accessibility and user experience.

A Dark Mode / Light Mode toggle is a user interface control that lets you switch a device or website’s color scheme between a bright background with dark text (Light Mode) and a dark background with light text (Dark Mode)


function custom_dark_mode_toggle() {
    ?>
    
    <button id="theme-toggle" class="theme-toggle-btn">
        🌙
    </button>

    <?php
}
add_action('wp_footer', 'custom_dark_mode_toggle');
function custom_dark_mode_styles() {
    ?>
    
    <style>

    body {
        transition: background 0.3s ease, color 0.3s ease;
    }

    /* Dark Mode */
    body.dark-mode {
        background: #121212;
        color: #ffffff;
    }

    body.dark-mode a {
        color: #ffffff ;
    }

    body.dark-mode header,
    body.dark-mode footer,
    body.dark-mode .site {
        background: #1e1e1e;
    }

    /* Toggle Button */
    .theme-toggle-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        border: none;
        border-radius: 50%;
        background: #000;
        color: #fff;
        font-size: 22px;
        cursor: pointer;
        z-index: 9999;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }

    body.dark-mode .theme-toggle-btn {
        background: #fff;
        color: #000;
    }

    </style>

    <?php
}
add_action('wp_head', 'custom_dark_mode_styles');
function custom_dark_mode_script() {
    ?>
    
    <script>

    document.addEventListener("DOMContentLoaded", function() {

        const toggleBtn = document.getElementById("theme-toggle");

        // Load saved mode
        if (localStorage.getItem("theme") === "dark") {
            document.body.classList.add("dark-mode");
            toggleBtn.innerHTML = "☀";
        }

        toggleBtn.addEventListener("click", function() {

            document.body.classList.toggle("dark-mode");

            // Save preference
            if (document.body.classList.contains("dark-mode")) {
                localStorage.setItem("theme", "dark");
                toggleBtn.innerHTML = "☀";
            } else {
                localStorage.setItem("theme", "light");
                toggleBtn.innerHTML = "🌙";
            }

        });

    });

    </script>

    <?php
}
add_action('wp_footer', 'custom_dark_mode_script');