JSFiddle - React, Tailwind, and code Playground

by zakariamouhid

HTML

<button class="set-theme" data-color="#F44336" style="background-color: #F44336">+</button>
<button class="set-theme" data-color="#FFEB3B" style="background-color: #FFEB3B">+</button>
<button class="set-theme" data-color="#3F51B5" style="background-color: #3F51B5">+</button>

JavaScript

// update DOM
function setColor(color) {
  document.body.style.backgroundColor = color;
}

// get saved color
let color = localStorage.getItem("theme") || "#F44336";
setColor(color);

function buttonClick(color) {
  return function () {
    // set color and save it
    setColor(color);
    localStorage.setItem("theme", color);
  };
}

let buttons = document.querySelectorAll(".set-theme");

for (let i = 0; i < buttons.length; i += 1) {
	buttons[i].onclick = buttonClick(buttons[i].getAttribute("data-color"));
}