dark-mode-shortcodes-and-color-scheme-detection-script.php

<?php

// Dark Mode Shortcode for Main Navigation Menu.

add_shortcode( 'dark-mode-toggle-nav', 'dark_mode_toggle_nav_shortcode' );
function dark_mode_toggle_nav_shortcode() {
    return '<div class="rf-darkmode-toggle">
        <button data-theme-toggle-nav class="container" aria-label="Light mode is active" title="Toggle color mode">
            <img class="sun visible" src="/wp-content/themes/razorfrog/svg/dark-mode/sun-light-mode-toggle-icon.svg" />
            <img class="moon" src="/wp-content/themes/razorfrog/svg/dark-mode/moon-dark-mode-toggle-icon.svg" />
        </button>
    </div>';
}

// Dark Mode Shortcode for Mobile Navigation Menu.
add_shortcode( 'dark-mode-toggle-mobile', 'dark_mode_toggle_mobile_shortcode' );
function dark_mode_toggle_mobile_shortcode() {
    return '<div class="mobile-menu-dm-toggle">
        <div class="dm-toggle-text">
            <p>Toggle light/dark mode</p>
        </div>
        <div class="dm-toggle-switch">
            <div class="rf-darkmode-toggle">
                <input data-theme-toggle-mobile type="checkbox" id="dark-mode-toggle-mobile" title="Toggle color mode" />
                <label for="dark-mode-toggle-mobile">
                    <img class="sun" src="/wp-content/themes/razorfrog/svg/dark-mode/sun-light-mode-toggle-icon.svg" />
                    <img class="moon" src="/wp-content/themes/razorfrog/svg/dark-mode/moon-dark-mode-toggle-icon.svg" />
                </label>
            </div>
        </div>
    </div>';
}

// Dark Mode Shortcode for Footer.
add_shortcode( 'dark-mode-toggle-footer', 'dark_mode_toggle_footer_shortcode' );
function dark_mode_toggle_footer_shortcode() {
    return '<div class="rf-darkmode-toggle">
        <input data-theme-toggle-footer type="checkbox" id="dark-mode-toggle-footer" title="Toggle color mode" />
        <label for="dark-mode-toggle-footer">
            <img class="sun" src="/wp-content/themes/razorfrog/svg/dark-mode/sun-light-mode-toggle-icon.svg" />
            <img class="moon" src="/wp-content/themes/razorfrog/svg/dark-mode/moon-dark-mode-toggle-icon.svg" />
        </label>
    </div>';
}

// Dark Mode Color Scheme Detection Script.
add_action('wp_footer', 'color_scheme_detection_script_v1');
function color_scheme_detection_script_v1() {
    ?>
    <script>
    /* 
    * Utility function to calculate the current theme setting.
    */
    function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) {
        if (localStorageTheme !== null) {
            return localStorageTheme;
        }
        
        if (systemSettingDark.matches) {
            return "dark";
        }
        
        return "light";
    }
    
    /*
    * Utility function to update the button text and aria-label.
    */
    function updateButton({ buttonEl, isDark }) {
        const newCta = isDark ? "Dark mode is active" : "Light mode is active";
        
        // use an aria-label if you are omitting text on the button
        // and using a sun/moon icon, for example
        buttonEl.setAttribute("aria-label", newCta);
        buttonEl.checked = isDark ? true : false;;
        
        navSun.classList.toggle('visible');
        navMoon.classList.toggle('visible');
    }
    
    /*
    * Utility function to update the theme setting on the html tag.
    */
    function updateThemeOnHtmlEl({ theme }) {
        document.querySelector("html").setAttribute("data-theme", theme);
    }
    
    /*
    * On page load:
    */
    
    /*
    * 1. Grab what we need from the DOM and system settings on page load.
    */
    const button1 = document.querySelector("[data-theme-toggle-nav]");
    const button2 = document.querySelector("[data-theme-toggle-mobile]");
    const button3 = document.querySelector("[data-theme-toggle-footer]");
    
    const localStorageTheme = localStorage.getItem("theme");
    const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
    const navSun = document.querySelector('[data-theme-toggle-nav] .sun');
    const navMoon = document.querySelector('[data-theme-toggle-nav] .moon');
    
    /*
    * 2. Work out the current site settings.
    */
    let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark });
    
    /* 
    * 3. Update the theme setting and button text according to current settings.
    */
    if (currentThemeSetting === "dark") {
        navSun.classList.toggle('visible');
        navMoon.classList.toggle('visible');
        button1.setAttribute("aria-label", "Dark mode is active");
    }
    updateButton({ buttonEl: button2, isDark: currentThemeSetting === "dark" });
    updateButton({ buttonEl: button3, isDark: currentThemeSetting === "dark" });
    updateThemeOnHtmlEl({ theme: currentThemeSetting });
    
    /*
    * 4. Add an event listener to toggle the theme.
    */
    function handleButtonClick(event) {
        const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
        
        localStorage.setItem("theme", newTheme);
        updateButton({ buttonEl: button1, isDark: newTheme === "dark" });
        updateButton({ buttonEl: button2, isDark: newTheme === "dark" });
        updateButton({ buttonEl: button3, isDark: newTheme === "dark" });
        updateThemeOnHtmlEl({ theme: newTheme });
        
        currentThemeSetting = newTheme;
    }
    
    button1.addEventListener("click", handleButtonClick);
    button2.addEventListener("click", handleButtonClick);
    button3.addEventListener("click", handleButtonClick);
    
    /*
    * 5. Add an event listener to toggle checkbox on enter/return key press.
    */
    document.getElementById('dark-mode-toggle-mobile').addEventListener('keydown', function(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            this.checked = !this.checked;
            event.preventDefault();
            button2.click();
        }
    });
    document.getElementById('dark-mode-toggle-footer').addEventListener('keydown', function(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            this.checked = !this.checked;
            event.preventDefault();
            button3.click();
        }
    });

    </script>
    <?php
}

?>