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>
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);
};