如何将切换更改为图标单击（用于切换到暗模式）

Question

I've dark mode enabled on the website. It currently has a toggle switch, which changes the layout from light to dark and vice versa.

It is using the following code:

 const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]'); const currentTheme = localStorage.getItem('theme'); if (currentTheme) { document.documentElement.setAttribute('data-theme', currentTheme); if (currentTheme === 'dark') { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute('data-theme', 'dark'); localStorage.setItem('theme', 'dark'); } else { document.documentElement.setAttribute('data-theme', 'light'); localStorage.setItem('theme', 'light'); } } toggleSwitch.addEventListener('change', switchTheme, false);

 <div class="theme-switch-wrapper"> <label class="theme-switch" for="checkbox"> <input type="checkbox" id="checkbox"/> <div class="slider round"></div> </label> <em>DARK</em> <strong>MODE</strong> </div>

Now I want to upgrade to an icon click. For example, if there is light mode enabled, the icon for dark mode should be seen upon clicking it, the user will get dark mode on. Same, if dark mode is enabled, the icon for the light mode to be displayed, and if the user clicks it, the light mode is activated.

Thanks for any help or suggestions.

Answer 1

Change the toggle switch to a button element with an icon inside.

Then inside your click-handling code, you can switch out the src of the icon svg/image to show the other image.

 const darkmodeIcon = "https://uxwing.com/wp-content/themes/uxwing/download/01-user_interface/dark-mode.png" const lightmodeIcon = "https://uxwing.com/wp-content/themes/uxwing/download/01-user_interface/light-mode.png" const icon = document.getElementById("darkmode-icon"); icon.src = lightmodeIcon function handleDarkModeToggle() { if (icon.src == darkmodeIcon) { icon.src = lightmodeIcon console.log("Toggled to Light Mode") } else { icon.src = darkmodeIcon console.log("Toggled to Dark Mode") } }

 button { background: white; border: none; } img { height: 50px; }

 <button onclick="handleDarkModeToggle()"> <img id="darkmode-icon"/> </button>

Answer 2

in the HTMl make a new image as a lable:

<label class="theme-switch" for="checkbox">
        <img width="30" id="switcher" src="">
        <input type="checkbox" id="checkbox" />
        <div class="slider round"></div>
</label>

then you can use the set attribute to switch the source

<script>
    const switcher = document.querySelector("#switcher");
    switcher.setAttribute('src', 'https://vectorified.com/images/switch-button-icon-19.png');

    const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
    const currentTheme = localStorage.getItem('theme');
    if (currentTheme) {
        document.documentElement.setAttribute('data-theme', currentTheme);
        if (currentTheme === 'dark') {
            toggleSwitch.checked = true;
        }
    }

    function switchTheme(e) {
        if (e.target.checked) {
            document.documentElement.setAttribute('data-theme', 'dark');
            localStorage.setItem('theme', 'dark');
            switcher.setAttribute('src', 'https://vectorified.com/images/switch-button-icon-19.png');
        } else {
            document.documentElement.setAttribute('data-theme', 'light');
            localStorage.setItem('theme', 'light');
            switcher.setAttribute('src', 'https://image.flaticon.com/icons/png/512/37/37474.png');
        }
    }
    toggleSwitch.addEventListener('change', switchTheme, false);
</script>