时间戳

首页 > 解决方案 > 如何将切换更改为图标单击（用于切换到暗模式）

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

问题描述

我在网站上启用了暗模式。它目前有一个拨动开关，可以将布局从浅色更改为深色，反之亦然。

它使用以下代码：

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>

现在我想升级到一个图标点击。例如，如果启用了浅色模式，点击后应该会看到深色模式的图标，用户将打开深色模式。同样，如果启用了暗模式，则会显示亮模式的图标，如果用户单击它，则会激活亮模式。

感谢您的任何帮助或建议。

标签： javascripthtmlcss

解决方案

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

推荐阅读