如何將切換更改為圖標單擊（用於切換到暗模式）

Question

我在網站上啟用了暗模式。 它目前有一個撥動開關，可以將布局從淺色更改為深色，反之亦然。

它使用以下代碼：

 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>

現在我想升級到一個圖標點擊。 例如，如果啟用了淺色模式，點擊后應該會看到深色模式的圖標，用戶將打開深色模式。 同樣，如果啟用了暗模式，則會顯示亮模式的圖標，如果用戶單擊它，則會激活亮模式。

感謝您的任何幫助或建議。

Answer 1

將切換開關更改為內部帶有圖標的button元素。

然后在您的點擊處理代碼中，您可以切換圖標 svg/image 的src以顯示另一個圖像。

 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

在 HTMl 中制作一個新圖像作為標簽：

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

那么就可以使用set屬性來切換源了

<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>