<header>
  <h3>Color Scheme</h3>
  <form id="theme-switcher">
    <div>
      <input checked type="radio" id="auto" name="theme" value="auto">
      <label for="auto">Auto</label> 
    </div>
    <div>
      <input type="radio" id="light" name="theme" value="light">
      <label for="light">Light</label>
    </div>
    <div>
      <input type="radio" id="dark" name="theme" value="dark">
      <label for="dark">Dark</label>
    </div>
    <div>
      <input type="radio" id="dim" name="theme" value="dim">
      <label for="dim">Dim</label>
    </div>
  </form>
</header>

<section>
  <h1>Theme color 1</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem tempora adipisci veniam assumenda officia et inventore? </p>
</section>

<div class="no-support">
  This browser doesn't support <code>color-mix()</code>
</div>

html {
  --brand: #0af;
  /*  upfront defines all values  */
  --text1-light: color-mix(in oklab, var(--brand) 25%, black);
  --text2-light: color-mix(in oklab, var(--brand) 40%, black);
  --surface1-light: color-mix(in oklab, var(--brand) 5%, white);
  --text1-dark: color-mix(in oklab, var(--brand) 15%, white);
  --text2-dark: color-mix(in oklab, var(--brand) 40%, white);
  --surface1-dark: color-mix(in oklab, var(--brand) 5%, black);
  --text1-dim: color-mix(in oklab, var(--brand) 20%, white);
  --text2-dim: color-mix(in oklab, var(--brand) 15%, lch(70% 0 0));
  --surface1-dim: color-mix(in oklab, var(--brand) 15%, lch(20% 0 0));
}

:root {
  color-scheme: light dark;
  /*  set lights as defaults for this theme  */
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
  }
}

[color-scheme="light"]:root {
  color-scheme: light;
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
}

[color-scheme="dark"]:root {
  color-scheme: dark;
  --text1: var(--text1-dark);
  --text2: var(--text2-dark);
  --surface1: var(--surface1-dark);
}

[color-scheme="dim"]:root {
  color-scheme: dark;
  --text1: var(--text1-dim);
  --text2: var(--text2-dim);
  --surface1: var(--surface1-dim);
}

html {
  block-size: 100%;
  background: var(--surface1);
  color: var(--text1);
/*   color: color-contrast(var(--surface1) vs var(--text1), var(--text2) to AA); */
}

body {
  min-block-size: 100%;
  font-family: system-ui, sans-serif;
  
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  gap: 5ch;
  padding: 5ch;
  margin: 0;
  box-sizing: border-box;
}

p {
  color: var(--text2);
  max-inline-size: 50ch;
}

.no-support {
  display: grid;
  place-items: center;
  place-content: center;
  gap: 1ch;
  color: CanvasText;
}

@supports (color: color-mix(in oklab, red, white)) {
  .no-support {
    display: none;
  }
}

@supports not (color: color-mix(in oklab, red, white)) {
  section, header {
    display: none;
  }
}

document.querySelector('#theme-switcher').addEventListener('input', e =>
  setTheme(e.target.value))

const setTheme = theme =>
  document.firstElementChild.setAttribute('color-scheme', theme)