DEV Community

loading...
Cover image for Toggle Between Dark/Light Modes with HTML5 web storage API

Toggle Between Dark/Light Modes with HTML5 web storage API

fariasmateuss profile image Mateus V. Farias Updated on ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode
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;
}
Enter fullscreen mode Exit fullscreen mode

Determine the styles on the light mode using the following CSS variables.

html {
  --bg: #FCFCFC;
}

body {
  background-color: var(--bg);
}
Enter fullscreen mode Exit fullscreen mode

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);
});
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Now, try it!

Discussion (0)

Forem Open with the Forem app