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

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

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

Answer 2

将切换开关更改为内部带有图标的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>