Dark-theme is a really simple dark mode library that enables a switcher to toggle between dark and light modes on the web application.
Written in vanilla JavaScript. Uses HTML5 web storage API (local storage) to save the current theme on the client-side.
How to use it:
Create a checkbox based toggle switch on the page.
<div class="toggle">
<input id="switch" type="checkbox" name="theme">
<label for="switch">Toggle</label>
</div>
input[type=checkbox]{
height: 0;
width: 0;
visibility: hidden;
}
label {
cursor: pointer;
text-indent: -9999px;
width: 52px;
height: 27px;
background: grey;
float: right;
border-radius: 100px;
position: relative;
}
label::after{
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background-color: white;
border-radius: 90px;
transition: 0.3s;
}
input:checked + label {
background-color: var(--color-headings);
}
input:checked + label::after {
left: calc(100% - 5px);
transform: translateX(-100%);
}
label:active:after {
width: 45px;
}
Determine the styles on the light mode using the following CSS variables.
html {
--bg: #FCFCFC;
}
body {
background-color: var(--bg);
}
The main JavaScript to enable the dark mode switcher and determine the CSS styles on the dark mode.
const html = document.querySelector("html")
const checkbox = document.querySelector("input[name=theme]")
const getStyle = (element, style) =>
window
.getComputedStyle(element)
.getPropertyValue(style);
const initialColors = {
bg: getStyle(html, "--bg"),
}
const darkMode = {
bg: "#333333", // override styles here
}
const transformKey = key =>
"--" + key.replace(/([A-Z])/, "-$1").toLowerCase();
const changeColors = (colors) => {
Object.keys(colors).map(key =>
html.style.setProperty(transformKey(key), colors[key])
);
}
checkbox.addEventListener("change", ({target}) => {
target.checked ? changeColors(darkMode) : changeColors(initialColors);
});
Create local storage.
const isExistLocalStorage = (key) => localStorage.getItem(key) != null;
const createOrEditLocalStorage = (key, value) =>
localStorage.setItem(key, JSON.stringify(value));
const getValeuLocalStorage = (key) => JSON.parse(localStorage.getItem(key));
checkbox.addEventListener("change", ({ target }) => {
if (target.checked) {
changeColors(darkMode);
createOrEditLocalStorage("mode", "darkMode");
} else {
changeColors(initialColors);
createOrEditLocalStorage("mode", "initialColors");
}
});
if (!isExistLocalStorage("mode"))
createOrEditLocalStorage("mode", "initialColors");
if (getValeuLocalStorage("mode") === "initialColors") {
checkbox.removeAttribute("checked");
changeColors(initialColors);
} else {
checkbox.setAttribute("checked", "");
changeColors(darkMode);
}
Now, try it!
Top comments (0)