JSFiddle - React, Tailwind, and code Playground

by Mark Hendricks

HTML

<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme Switcher</title>
    <link rel="stylesheet" href="https://comatoseposse.rocks/crypto/css/fonts.css">
</head>
<body>
  <div class="container">
      <div id="theme-icon"></div>
      <div class="toggle-container">
        <label class="switch" for="checkbox">
          <input type="checkbox" id="checkbox">
          <div class="slider round"></div>
        </label>
      </div>
      <h1>Theme Switch</h1>
      <div>
          <h2>Space Cowboy</h2>
          <h5>Steve Miller Band</h5>
          <p>
          I told you 'bout living in the US of A<br>
          Don't you know that I'm a gangster of love?<br>
          Let me tell you people that I found a new way<br>
          And I'm tired of all this talk about love<br>
          And the same old story with a new set of words<br>
          About the good and the bad and the poor<br>
          And the time's keep on changin'<br>
          So I'm keepin' on top<br>
          Of every fat cat who walks through my door<br>
          <br>
          I'm a space cowboy<br>
          Bet you weren't ready for that<br>
          I'm a space cowboy<br>
          I'm sure you know where it's at<br>
          Yeah, yeah, yeah, yeah<br>
          <br>
          I was born on this rock<br>
          And I've been travelin' through space<br>
          Since the moment I first realized<br>
          What all you fast talkin' cats would do if you could<br>
          You know, I'm ready for the final surprise<br>
          There ain't no way around it<br>
          Ain't nothing to say<br>
          That's gonna satisfy my soul deep inside<br>
          All the prayers and surveyors<br>
          Keep the whole place uptight<br>
          While it keeps on gettin' darker outside<br>
          <br>
          I'm a space cowboy<br>
          Bet you weren't ready for...

CSS

:root {
  --main-h: 222;
  --main-s: 10%;
  --main-l: 12%;
  --main-a: 1;
}

html[data-theme='light'] {
  --bg: hsl(var(--main-h), var(--main-s), 87%, var(--main-a));
  --bg-panel: hsl(var(--main-h), var(--main-s), 82%, var(--main-a));
  --color-heading1: hsl(var(--main-h), 10%, 30%, var(--main-a));
  --color-heading2: hsl(var(--main-h), 30%, 40%, var(--main-a));
  --color-slider-dot: hsl(var(--main-h), 20%, 70%, var(--main-a));
  --color-text: hsl(var(--main-h), var(--main-s), 20%, var(--main-a));
}

html[data-theme='dark'] {
  --bg: hsl(var(--main-h), var(--main-s), var(--main-l), var(--main-a));
  --bg-panel: hsl(var(--main-h), var(--main-s), 18%, var(--main-a));
  --color-heading1: hsl(var(--main-h), var(--main-s), 70%, var(--main-a));
  --color-heading2: hsl(var(--main-h), 50%, 60%, var(--main-a));
  --color-slider-dot: hsl(var(--main-h), 50%, 30%, var(--main-a));
  --color-text: hsl(var(--main-h), var(--main-s), 80%, var(--main-a));
}

body {
  background-color: var(--bg);
  height: 100%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-items: center;
}

.container {
  background-color: var(--bg-panel);
  margin: 2em;
  padding: 3em;
  border-radius: 15px;
}

.toggle-container {
  float: right;
}

#theme-icon {
  float: right;
  font-family: 'MeteoconsRegular';
  font-size: 20px;
  color: var(--color-heading2);
}

#songwriters {
 color: var(--color-heading2);
 padding: 0px;
 margin: 0px;
}

.container h1 {
  margin: 0;
  color: var(--color-heading1);
}
.container h2 {
  margin: 0;
  color: var(--color-heading2);
}
.container h5 {
  margin: 0;
  color: var(--color-heading2);
}

.container p {
  color: var(--color-text);
  /* -ms-grid-row: 2;
  -ms-grid-column: 1; */
  -ms-grid-column-span: 2;
  grid-area: content;
  font-size: 12px;
  line-height: 1.3em;
  margin-top: 1em;
}

.container p a {
  color: var(--color-heading1);
 ...

JavaScript

let theme = localStorage.getItem('data-theme');
const checkbox = document.getElementById("checkbox");

const changeThemeToDark = () =>{
	document.documentElement.setAttribute("data-theme", "dark")
	localStorage.setItem("data-theme", "dark")
  document.getElementById("theme-icon").innerHTML = ""
}

const changeThemeToLight = () =>{
	document.documentElement.setAttribute("data-theme", "light")
	localStorage.setItem("data-theme", "light")
  document.getElementById("theme-icon").innerHTML = ""
}

if(theme === 'dark'){
    changeThemeToDark()
    document.getElementById("theme-icon").innerHTML = ""
}

checkbox.addEventListener('change', ()=> {
	let theme = localStorage.getItem('data-theme');
	if (theme ==='dark'){
		changeThemeToLight()
	} else {
		changeThemeToDark()
	}
});