<fieldset color-scheme="light">
  <label for="default-light">
    Default
    <input type="checkbox" id="default-light" checked>
  </label>

  <label for="accented-light">
    Tinted
    <input class="accented" type="checkbox" id="accented-light" checked>
  </label>
</fieldset>

<fieldset color-scheme="dark">
  <label for="default-dark">
    Default
    <input type="checkbox" id="default-dark" checked>
  </label>

  <label for="accented-dark">
    Tinted
    <input class="accented" type="checkbox" id="accented-dark" checked>
  </label>
</fieldset>

.accented {
  accent-color: deeppink;
}

[color-scheme="dark"] .accented {
  accent-color: hsl(328 100% 80%);
}

input {
  --size: 2rem;
  block-size: var(--size);
  inline-size: var(--size);
}

label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

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

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

fieldset {
  border: 1px solid hsl(0 0% 50%);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

fieldset[color-scheme="dark"] {
  background: Canvas;
  color: white;
}

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

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;
  font-family: system-ui, sans-serif;
  
  display: grid;
  place-content: center;
  gap: 2rem;
}

@media (min-width: 480px) {
  body {
    grid-auto-flow: column;
  }
}