2020 › home
Dark Mode
It's not surprising that dark mode is the new fad in the town after Apple introduced the dark mode in MacOS. I decided to add a toggle button to switch to the dark theme on my blog.
Let's establish a few ground rules of engagement:
prefers-color-scheme
CSS rule then we apply the default theme..dark
theme to the blog and vice versa.Define the light and dark theme for your site in CSS. Apply the .light
class by default to the body of the document.
.light {
--level-0: #fff; --text-0: #000;
--level-1: #eee; --text-1: #333;
--level-2: #ddd; --text-2: #666;
}
.dark {
--level-0: #111; --text-0: #fff;
--level-1: #222; --text-1: #ccc;
--level-2: #333; --text-2: #999;
}
Its now time to add a toggle button that will toggle the theme each time it is clicked.
<a role="button"
class="btn-toggle"
title="Toggle between Dark and Light theme">Light/Dark</a>
We use sessionStorage
instead of localStorage
so that saved theme gets wiped out after the tab or window is closed. This covers the requirement #5.
<script>
const btn = document.querySelector(".btn-toggle");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
if(sessionStorage.getItem("theme") != null){
document.body.className = sessionStorage.getItem("theme");
}
else if(prefersDarkScheme.matches){
document.body.className="dark";
}
btn.addEventListener("click", function(e){
if(document.body.className=="dark"){
document.body.className="light";
sessionStorage.setItem("theme","light");
}
else{
document.body.className="dark";
sessionStorage.setItem("theme","dark");
}
e.preventDefault();
return false;
});
</script>