JSFiddle - React, Tailwind, and code Playground
HTML
<button data-change-style="1">Style 1</button>
<button data-change-style="2">Style 2</button>
<button data-change-style="3">Style 3</button>
<button data-change-style="4">Style 4</button>
CSS
body {
background-color: #fff;
}
body[data-style="1"] {
background-color: #0f0;
}
body[data-style="2"] {
background-color: #0ff;
}
body[data-style="3"] {
background-color: #ff0;
}
body[data-style="4"] {
background-color: #00f;
}
JavaScript
function setStyle(style) {
if (style === null) {return; }
if (window.localStorage && window.localStorage.setItem) {
window.localStorage.setItem("style", style);
}
document.body.setAttribute("data-style", style);
}
function getStyle() {
if (window.localStorage && window.localStorage.getItem) {
return window.localStorage.getItem("style");
}
return null;
}
setStyle(getStyle());
var buttons = document.querySelectorAll("button[data-change-style]"),
i;
for (i = 0; i < buttons.length; i += 1) {
buttons[i].onclick = function () {
setStyle(this.getAttribute("data-change-style"));
};
}