<button id="theme-trigger">Toggle Theme</button>
<div id="wrapper">
  <h1>Theming with <pre class="code">currentColor</pre></h1>
  
  <div class="components">
    <a href="#">
      Link
      <svg viewBox="0 0 192 192">
        <polygon class="cls-1" points="192 96 0 0 0 192 192 96"/>
      </svg>
    </a>
    
    <input type="text" placeholder="Text Input" />
    <button>Button</button>
    <input type="submit" />
    <textarea placeholder="Text Area"></textarea>
  </div>
</div>

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  font-family: sans-serif;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#theme-trigger {
  position: fixed;
  top: 1em;
  right: 1em;
  padding: 1em 2em;
  color: white;
  background-color: green;
  border: none;
}

#wrapper {
  height: 100%;
  width: 100%;
  background-color: whitesmoke;
  color: #333;
  padding: 2em;
}

#wrapper.dark {
  color: whitesmoke;
  background-color: #333;
}

h1 {
  margin: 0;
}

.code {
  display: inline;
}

.components {
  margin: 2em 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  
  & > * {
    margin: 0.5em 0;
  }
}

#wrapper {
  input,
  button,
  textarea {
    font-size: 1em;
  }

  button,
  input[type='submit'] {
    cursor: pointer;
    background: transparent;
    border-radius: 0.5em;
    color: inherit;
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid currentColor;
    text-decoration: none;

    &:hover {
      filter: invert(35%);
    }
  }

  input[type='text'] {
    color: currentColor;
    padding: 0.5em 0;
    border: none;
    border-bottom: 1px solid currentColor;
    background: none;
    font-size: 1em;
  }

  textarea {
    padding: 0.5em;
    border-radius: 0.5em;
    color: currentColor;
    border: 1px solid currentColor;
    background-color: transparent;
    width: 100%;
    height: 50px;
  }
  
  a {
    color: currentColor;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    
    svg {
      fill: currentColor;
      width: auto;
      height: 0.75em;
      transform: translateX(0.25em);
    }
    
    &:hover {
      filter: invert(35%);
      text-decoration: underline;
    }
  }
}

(function() {
  const themeTrigger = document.getElementById('theme-trigger')
  const wrapper = document.getElementById('wrapper')
  
  themeTrigger.addEventListener('click', () => {
    wrapper.classList.toggle('dark')
  })
})()