JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<div class="focused" style="width:100px; margin: 10px 0; padding: 5px">
Some div
</div>
<button class="focused">
Some button
</button>
<hr>
<label><input type="radio" name="theme" value="classic" checked>Classic</label>
<label><input type="radio" name="theme" value="hud" checked>Hud</label>
<label><input type="radio" name="theme" value="yosemite" checked>Yosemite-ish</label>

CSS

.classic .focused {
  box-shadow: 0 0 1px -moz-mac-focusring inset, 0 0 4px 1px -moz-mac-focusring, 0 0 1.5px 1px -moz-mac-focusring;
}
.hud .focused {
  box-shadow: 0 0 1px -moz-mac-focusring inset, 0 0 4px 1px -moz-mac-focusring, 0 0 2px 1px -moz-mac-focusring;
}
.yosemite .focused {
  box-shadow: 0 0 0 0.5px -moz-mac-focusring inset, 0 0 0 2px -moz-mac-focusring;
}

JavaScript

console.log('onload');
console.log(document.querySelectorAll('input[name="theme"]').length);
for(inp of document.querySelectorAll('input[name="theme"]')) {
	inp.onclick=updateTheme;
}
function updateTheme() {
  let choice = document.querySelector('input:checked[name="theme"]');
  document.body.className = choice.value;
	console.log('updateTheme: ', choice.value);
}
updateTheme();