Open Props - Color schemes (auto, light, dark, dim, grape, choco)

index.html

<header>
  <h3>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>
    <div>
      <input type="radio" id="grape" name="theme" value="grape">
      <label for="grape">Grape</label>
    </div>
    <div>
      <input type="radio" id="choco" name="theme" value="choco">
      <label for="choco">Choco</label>
    </div>
  </form>
</header>

<main>
  <section>
    <div class="surface-samples">
      <div class="surface-1 rad-shadow">1</div>
      <div class="surface-2 rad-shadow">2</div>
      <div class="surface-3 rad-shadow">3</div>
      <div class="surface-4 rad-shadow">4</div>
    </div>
  </section>

  <section>
    <div class="text-samples">
      <h1 class="text-1">
        <span class="swatch brand rad-shadow"></span>
        Brand
      </h1>
      <h1 class="text-1">
        <span class="swatch text-1 rad-shadow"></span>
        Text Color 1
      </h1>
      <h1 class="text-2">
        <span class="swatch text-2 rad-shadow"></span>
        Text Color 2
      </h1>
      <br>
      <p class="text-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p class="text-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </section>
</main>

open-props-color-schemes-auto-light-dark-dim-grape-choco.markdown

Open Props - Color schemes (auto, light, dark, dim, grape, choco)

A Pen by Adam Argyle on CodePen.

License.

script.babel

const switcher = document.querySelector('#theme-switcher')
const doc = document.firstElementChild

switcher.addEventListener('input', e =>
  setTheme(e.target.value))

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

style.postcss

@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/gray-hsl.min.css";
@import "https://unpkg.com/open-props/purple-hsl.min.css";
@import "https://unpkg.com/open-props/choco-hsl.min.css";

@use postcss-preset-env {
  stage: 0;
  features: {
    "logical-properties-and-values": false
  }
} 

html {
  /* light */
  --brand-light: var(--orange-6);
  --text-1-light: var(--gray-8);
  --text-2-light: var(--gray-7);
  --surface-1-light: var(--gray-0);
  --surface-2-light: var(--gray-1);
  --surface-3-light: var(--gray-2);
  --surface-4-light: var(--gray-3);
  --surface-shadow-light: var(--gray-8-hsl);
  --shadow-strength-light: 2%;

  /* dark */
  --brand-dark: var(--orange-3);
  --text-1-dark: var(--gray-3);
  --text-2-dark: var(--gray-5);
  --surface-1-dark: var(--gray-12);
  --surface-2-dark: var(--gray-11);
  --surface-3-dark: var(--gray-10);
  --surface-4-dark: var(--gray-9);
  --surface-shadow-dark: var(--gray-12-hsl);
  --shadow-strength-dark: 80%;

  /* dim */
  --brand-dim: var(--orange-4);
  --text-1-dim: var(--gray-3);
  --text-2-dim: var(--gray-4);
  --surface-1-dim: var(--gray-8);
  --surface-2-dim: var(--gray-7);
  --surface-3-dim: var(--gray-6);
  --surface-4-dim: var(--gray-5);
  --surface-shadow-dim: var(--gray-9-hsl);
  --shadow-strength-dim: 20%;
  
  /* grape */
  --brand-grape: var(--purple-5);
  --text-1-grape: var(--purple-9);
  --text-2-grape: var(--purple-7);
  --surface-1-grape: var(--purple-0);
  --surface-2-grape: var(--purple-1);
  --surface-3-grape: var(--purple-2);
  --surface-4-grape: var(--purple-3);
  --surface-shadow-grape: var(--purple-12-hsl);
  --shadow-strength-grape: 2%;
  
  /* choco */
  --brand-choco: var(--choco-5);
  --text-1-choco: var(--choco-1);
  --text-2-choco: var(--choco-2);
  --surface-1-choco: var(--choco-12);
  --surface-2-choco: var(--choco-11);
  --surface-3-choco: var(--choco-10);
  --surface-4-choco: var(--choco-9);
  --surface-shadow-choco: 25deg 65% 11%;
  --shadow-strength-choco: 50%;
}

:root {
  color-scheme: light;

  /* set defaults */
  --brand: var(--brand-light);
  --text-1: var(--text-1-light);
  --text-2: var(--text-2-light);
  --surface-1: var(--surface-1-light);
  --surface-2: var(--surface-2-light);
  --surface-3: var(--surface-3-light);
  --surface-4: var(--surface-4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand: var(--brand-dark);
    --text-1: var(--text-1-dark);
    --text-2: var(--text-2-dark);
    --surface-1: var(--surface-1-dark);
    --surface-2: var(--surface-2-dark);
    --surface-3: var(--surface-3-dark);
    --surface-4: var(--surface-4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
  }
}

[color-scheme="light"] {
  color-scheme: light;

  --brand: var(--brand-light);
  --text-1: var(--text-1-light);
  --text-2: var(--text-2-light);
  --surface-1: var(--surface-1-light);
  --surface-2: var(--surface-2-light);
  --surface-3: var(--surface-3-light);
  --surface-4: var(--surface-4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

[color-scheme="dark"] {
  color-scheme: dark;
  
  --brand: var(--brand-dark);
  --text-1: var(--text-1-dark);
  --text-2: var(--text-2-dark);
  --surface-1: var(--surface-1-dark);
  --surface-2: var(--surface-2-dark);
  --surface-3: var(--surface-3-dark);
  --surface-4: var(--surface-4-dark);
  --surface-shadow: var(--surface-shadow-dark);
  --shadow-strength: var(--shadow-strength-dark);
}

[color-scheme="dim"] {
  color-scheme: dark;

  --brand: var(--brand-dim);
  --text-1: var(--text-1-dim);
  --text-2: var(--text-2-dim);
  --surface-1: var(--surface-1-dim);
  --surface-2: var(--surface-2-dim);
  --surface-3: var(--surface-3-dim);
  --surface-4: var(--surface-4-dim);
  --surface-shadow: var(--surface-shadow-dim);
  --shadow-strength: var(--shadow-strength-dim);
}

[color-scheme="grape"] {
  color-scheme: light;

  --brand: var(--brand-grape);
  --text-1: var(--text-1-grape);
  --text-2: var(--text-2-grape);
  --surface-1: var(--surface-1-grape);
  --surface-2: var(--surface-2-grape);
  --surface-3: var(--surface-3-grape);
  --surface-4: var(--surface-4-grape);
  --surface-shadow: var(--surface-shadow-grape);
  --shadow-strength: var(--shadow-strength-grape);
}

[color-scheme="choco"] {
  color-scheme: light;

  --brand: var(--brand-choco);
  --text-1: var(--text-1-choco);
  --text-2: var(--text-2-choco);
  --surface-1: var(--surface-1-choco);
  --surface-2: var(--surface-2-choco);
  --surface-3: var(--surface-3-choco);
  --surface-4: var(--surface-4-choco);
  --surface-shadow: var(--surface-shadow-choco);
  --shadow-strength: var(--shadow-strength-choco);
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
  background-color: var(--surface-1);
  color: var(--text-1);
  accent-color: var(--brand);
}

body {
  min-block-size: 100%;
  font-family: system-ui, sans-serif;
  padding: var(--size-6);
  display: grid;
  place-content: center;
  gap: var(--size-6);
}

main {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: var(--size-10);
}

section {
  display: grid;
  gap: var(--size-6);
}

h1 {
  font-weight: var(--font-weight-1);
}

p {
  max-inline-size: var(--size-content-1);
  font-size: var(--font-size-4);
  line-height: var(--font-lineheight-3);
}

header {
  display: inline-grid;
  gap: var(--size-3);
}

form {
  display: flex;
  gap: var(--size-5);

  & > div {
    display: inline-flex;
    align-items: center;
    gap: var(--size-2);
  }
}

.surface-samples {
  display: grid;
  --size: var(--size-content-1);
  grid-template-columns: var(--size) var(--size);
  grid-auto-rows: var(--size);
  gap: var(--size-5);

  @media (width <= 480px) { & {
    --size: 40vw;
  }}

  & > * {
    border-radius: var(--radius-3);
    display: grid;
    place-content: center;
    font-size: var(--font-size-8);
    font-weight: var(--font-weight-2);
  }
}

.text-samples {
  display: grid;
  gap: var(--size-4);

  & > h1 {
    font-size: var(--font-size-6);
    display: inline-flex;
    align-items: center;
    gap: var(--size-3);
  }
}

.brand {
  color: var(--brand);
  background-color: var(--brand);
}

.surface-1 {
  background-color: var(--surface-1);
  color: var(--text-2);
}

.surface-2 {
  background-color: var(--surface-2);
  color: var(--text-2);
}

.surface-3 {
  background-color: var(--surface-3);
  color: var(--text-1);
}

.surface-4 {
  background-color: var(--surface-4);
  color: var(--text-1);
}

.text-1 {
  color: var(--text-1);
  @nest p& {
    font-weight: var(--font-weight-2);
  }
}

.text-2 {
  color: var(--text-2);
}

.swatch {
  display: inline-block;
  flex-shrink: 0;
  inline-size: var(--size-8);
  block-size: var(--size-8);
  border-radius: var(--radius-round);

  &.text-1 { background-color: var(--text-1); }
  &.text-2 { background-color: var(--text-2); }
}

.rad-shadow {
  border: 1px solid hsl(var(--brand-hue) 10% 50% / 15%);
  box-shadow: 0 1rem .5rem -.5rem;
  box-shadow:
    0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + 3%)),
    0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + 1%)),
    0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + 2%)),
    0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + 2%)),
    0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + 3%)),
    0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
  ;
}