CODEWITHSUNDEEP
javascripthtmlcss
KA.MVP
KA.MVP

Reputation: 27

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.

Upvotes: 2

Views: 2386

Answers (2)

nourhomsi
nourhomsi

Reputation: 382

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>

Upvotes: 1

Luke Storry
Luke Storry

Reputation: 6722

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>

Upvotes: 0

Related Questions