'How to create a toggle button for this script?

I'm trying to make a simple toggle button for this script to change themes from light to dark but it doesn't seem to work when toggling. The script I believe is done, but I can't figure out how to create a button that toggles between light and dark mode.

JavaScript:

var toggle = document.getElementById("theme-toggle");

var storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
if (storedTheme)
    document.documentElement.setAttribute('data-theme', storedTheme)


toggle.onclick = function() {
    var currentTheme = document.documentElement.getAttribute("data-theme");
    var targetTheme = "light";

    if (currentTheme === "light") {
        targetTheme = "dark";
    }

    document.documentElement.setAttribute('data-theme', targetTheme)
    localStorage.setItem('theme', targetTheme);
};

CSS:

html[data-theme='light'] {
    --background-color: #9ec8ff;
    --text-color: #000000d8;
    --link-color: #543fd7;
    --header-color:#7ab1ff;
    --headerborder-color: 0.5px solid rgb(0, 0, 0);
    --logo-color: invert(0);
    --button-color:#ffffff;
    --signinbutton-color:#ffffff;
    --buttonborder-color: 1.5px solid rgb(0, 0, 0);
    --profile-border: 3px solid black;
    --table-border: rgb(0, 0, 0);
    --social-login: antiquewhite;
    --social-border: 0px solid rgb(50, 51, 52);
}

html[data-theme='dark'] {
    --background-color: #000000;
    --text-color: #F7F8F8;
    --link-color: #82f7ff;
    --header-color:#1A1A1B;
    --headerborder-color: 1px solid rgb(50, 51, 52);
    --logo-color: invert(1);
    --button-color:#1A1A1B;
    --signinbutton-color:#000000;
    --buttonborder-color: 1.5px solid rgb(50, 51, 52);
    --profile-border: 3px solid rgb(50, 51, 52);
    --table-border: rgb(100,102,104);
    --social-login: #1A1A1B;
    --social-border: 1.5px solid rgb(50, 51, 52);

}

[data-theme='light'] .d-block-light,
[data-theme='dark'] .d-block-dark {
    display: block !important;
}

HTML:

<button id="theme-toggle" type="button">Toggle theme</button>
javascripthtmlcss


Solution 1:[1]

Improve your solution and make it work

Look at my code:

<html>
  <body></body>
  <label class="switch">
  <input type="checkbox" id='data-theme'>
  <span class="slider"></span>
  </label>
</html>

html[data-theme='light'] {
    background-color: #9ec8ff;
}

html[data-theme='dark'] {
   background-color: #000000;
}

[data-theme='light'] .d-block-light,
[data-theme='dark'] .d-block-dark {
    display: block !important;
}

const toggle = document.getElementById("data-theme");

const storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");

if (storedTheme) {
  document.documentElement.setAttribute('data-theme', storedTheme)
}


toggle.onclick = function() {
  const currentTheme = document.documentElement.getAttribute("data-theme");
  let targetTheme = "light";

  if (currentTheme === "light") {
    targetTheme = "dark";
  }

  document.documentElement.setAttribute('data-theme', targetTheme)
  localStorage.setItem('theme', targetTheme);
};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions