<div class="mode">
  <input class="mode__i" type="checkbox" id="mode" name="check" />
  <label class="mode__l" for="mode"></label>
</div>

<p>In programming languages the term "variable" describes a storage location normally associated with an identifier that contains some value. Despite fact that CSS is a markup language, spec creators were very generous recently and gave us a tiny, but very powerful piece of real programming capability. Excitement about native CSS Custom Properties is generally tempered by the incorrect comparison to variables used in preprocessors like Sass or LESS. Don't be fooled by this misconception! Bare with me for the rest of this article and let's embrace the power of this new native feature together.</p>

:root {
  --light: #ddd;
  --dark: #333;

  --text: var(--dark);
  --bg: var(--light);
  
  --size: 100%;
}

@media (min-width: 60rem) {
  :root {
    --size: 125%;
  }
}

html {
  font-size: var(--size);  
}

body {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.5rem;  
  background: var(--bg);
  color: var(--text);
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  transition: all 300ms;
}

.mode {
  display: block;
  margin-bottom: 1.5rem;
}

.mode__i {
  display: none;
}

.mode__l {
  display: block;
  position: relative;
  width: 140px;
  height: 40px;
  margin: 0 auto;
  border-radius: 20px;
  background: #888;
}

.mode__l:hover {
  cursor: pointer;
}

.mode__l::before {
  position: absolute;
  top: 0;
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  transform: translateX(-50px);
  transition: all 300ms;
  border-radius: 20px;
  background: #555;
  content: '';
  z-index: 1;
}

.mode__l::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: monospace;
  font-size: 14px;
  content: 'day';
}

.mode__i:checked + label::before {
  transform: translateX(50px);
}

.mode__i:checked + label::after {
  content: 'night';
}

var mode = document.getElementById('mode');
var body = document.body;

mode.addEventListener('change', function() {
  if(mode.checked === true) {
    body.style.setProperty('--bg', 'var(--dark)');
    body.style.setProperty('--text', 'var(--light)');
  }
  else {
    body.style.setProperty('--bg', 'var(--light)');
    body.style.setProperty('--text', 'var(--dark)');
  }
});