Last active
November 22, 2020 20:59
-
-
Save redeux/6537e91ba6eccf784afa91d3271167e4 to your computer and use it in GitHub Desktop.
Simple theme toggler
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html lang="en"> | |
<head> | |
<style type="text/css"> | |
body { | |
background-color: #000; | |
color: #fff; | |
} | |
body.light { | |
background-color: #fff; | |
color: #000; | |
} | |
#t { | |
visibility: hidden; | |
} | |
#t::before { | |
content: 'light '; | |
} | |
body.light #t::before { | |
content: 'dark '; | |
} | |
</style> | |
</head> | |
<body> | |
</body> | |
<footer> | |
<a id="t">theme</a> | |
</footer> | |
<script> | |
function c() {return localStorage.getItem("c")} | |
c() === "1" ? document.body.classList.toggle('light') : null; | |
var t = document.getElementById("t"); | |
t.style.visibility = 'visible'; | |
t.onclick = function () { | |
c() === "1" ? localStorage.setItem("c", 0) : localStorage.setItem("c", 1); | |
document.body.classList.toggle('light'); | |
} | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Simple binary theme toggle
class
on<body>
.