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

How to change toggle to icon click (for switching to dark mode)

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

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>

Advertisement

Answer