JSFiddle - React, Tailwind, and code Playground

by sdgluck

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation/foundation.topbar.min.js"></script>
<li data-value="light">Light</li>
<li data-value="dark">Dark</li>

Selected theme: <span>none</span>

JavaScript

var listElems = document.querySelectorAll('li');
[].forEach.call(listElems, function (elem) {
  elem.addEventListener('click', function () {
    console.log("HI");
    setTheme(this.dataset.value);
  });
});

var span = document.querySelector('span');
function setTheme (themeName) {
  span.innerText = themeName;
}