<div class="container">
  <div class="color-switch">
    <button class="js--change-scheme" data-scheme="light"></button>
    <button class="dark js--change-scheme" data-scheme="dark"></button>
  </div>

  <p>
    You grabbed my hand<br />
    And we fell into it<br />
    Like a daydream<br />
    Or a fever
  </p>
</div>

:root {
  --type: #383735;
  --background: #f7f3e9;
  --highlight: #dd6969;
  --mid: #787671;
  --button-light: #f7f3e9;
  --button-dark: #383735;
  --margin: 1rem;
  --transition-speed: 200ms;
  --transition-timing: ease;
}

:root body.dark {
  --type: #f7f3e9;
  --background: #383735;
}

html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background);
  min-height: 100%;
  font-family: Constantia, Georgia, serif;
  line-height: 1.5;
  color: var(--type);
  transition: all var(--transition-speed) var(--transition-timing);
}

p {
  padding: calc(var(--margin) * 2);
  font-size: 1.5rem;
}

.container {
  border: 1px solid var(--mid);
  border-top-right-radius: var(--margin);
  padding: var(--margin) 0;
  margin: var(--margin);
}

.color-switch {
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--margin);
}

button {
  cursor: pointer;
  width: 2em;
  height: 2em;
  border: 2px solid var(--highlight);
  border-radius: 50%;
  margin-left: var(--margin);
  background-color: var(--button-light);
  transition: border-color var(--transition-speed) var(--transition-timing);
}

button.dark {
  background-color: var(--button-dark);
  border-color: var(--button-light);
}

body.dark button {
  border-color: var(--button-light);
}

body.dark button.dark {
  border-color: var(--highlight);
}

const schemeToggle = document.querySelectorAll('.js--change-scheme');
const storedScheme = localStorage.getItem('as-scheme');
const { classList } = document.body;

function setInitialScheme() {
  if (storedScheme) {
    classList.add(storedScheme);
    return;
  }
  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    classList.add('dark');
  }
};

function changeScheme(scheme) {
  if (scheme === 'dark') {
    classList.add('dark');
    localStorage.setItem('as-scheme', 'dark');
  }
  else {
    classList.remove('dark');
    localStorage.setItem('as-scheme', 'light');
  }
}

schemeToggle.forEach(button => {
  button.addEventListener('click', () => { 
    changeScheme(button.dataset.scheme);
  });
});

setInitialScheme();