JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<abbr title="dark"><button id="darkTheme"></button></abbr>
<abbr title="light"><button id="lightTheme"></button></abbr>
<abbr title="solarized dark"><button id="sdarkTheme"></button></abbr>
<abbr title="solarized light"><button id="slightTheme"></button></abbr>

JavaScript

function setTheme(theme) {  
  var css = null;
  if (document.getElementById('cssTheme')) {
    css = document.getElementById('cssTheme');
    css.href = 'css/' + theme + '.css';
  }else{
    css = document.createElement('link');
    css.rel = 'stylesheet';
    css.href = 'css/' + theme + '.css';
    css.id = 'cssTheme';
    document.head.appendChild(css);
  }
}

// make cookie when themeButton clicked
function setThemeCookie(e) {
  if (typeof e == 'undefined') e = window.event;

  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }

  var target = e.target || e.srcElement;

  // bake cookie
  var expire = new Date();
  expire.setDate(expire.getDate() + 7);
  //COOKIE.setCookie('theme', target.id, expire);

  // update cookie recipe
  setTheme(target.id);
  return false;
}

// Use saved theme on window load:
window.onload = function () {
  document.getElementById('darkTheme').onclick = setThemeCookie;
  document.getElementById('lightTheme').onclick = setThemeCookie;
  document.getElementById('sdarkTheme').onclick = setThemeCookie;
  document.getElementById('slightTheme').onclick = setThemeCookie;

  /*var theme = COOKIE.getCookie('theme');
  if (theme) {
    setThemeCookie(theme);
  }*/
};