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

.accented {
  accent-color: deeppink;
}

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

progress {
  block-size: 1.5rem;
}

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: 680px) {
  body {
    grid-auto-flow: column;
  }
}