<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>

<fieldset color-scheme="light">
  <label>
    Default
    <input type="radio" name="default-demo-light" checked>
    <input type="radio" name="default-demo-light">
    <input type="radio" name="default-demo-light">
  </label>

  <label class="accented">
    Tinted
    <input type="radio" name="accented-demo-light" checked>
    <input type="radio" name="accented-demo-light">
    <input type="radio" name="accented-demo-light">
  </label>
</fieldset>

<fieldset color-scheme="dark">
  <label>
    Default
    <input type="radio" name="default-demo-dark" checked>
    <input type="radio" name="default-demo-dark">
    <input type="radio" name="default-demo-dark">
  </label>

  <label class="accented">
    Tinted
    <input type="radio" name="accented-demo-dark" checked>
    <input type="radio" name="accented-demo-dark">
    <input type="radio" name="accented-demo-dark">
  </label>
</fieldset>

<fieldset color-scheme="light">
  <label>
    Default
    <input type="range">
  </label>

  <label class="accented">
    Tinted
    <input type="range">
  </label>
</fieldset>

<fieldset color-scheme="dark">
  <label>
    Default
    <input type="range">
  </label>

  <label class="accented">
    Tinted
    <input type="range">
  </label>
</fieldset>

<fieldset color-scheme="light">
  <label>
    Default
    <progress max="100" value="50">50%</progress>
  </label>

  <label class="accented">
    Tinted
    <progress max="100" value="50">50%</progress>
  </label>
</fieldset>

<fieldset color-scheme="dark">
  <label>
    Default
    <progress max="100" value="50">50%</progress>
  </label>

  <label class="accented">
    Tinted
    <progress max="100" value="50">50%</progress>
  </label>
</fieldset>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

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

input[type="range"] {
  inline-size: calc(var(--size) * 5);
}

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

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

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

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;
  font-family: "Exo", system-ui, sans-serif;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  place-content: center;
  gap: 2rem;
  padding: 10px;
}

.accented {
  accent-color: deeppink;
}

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

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

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

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