Gli elementi dei moduli HTML sono difficili da personalizzare. Spesso ci affidiamo a framework CSS, come bootstrap, per impostare degli stili pre-definiti. Personalizzare un componente, come checkbox, radio, range o progress, rispettando i colori, facendo in modo che in base al tema applicato esso non scompaia nell'interfaccia potrebbe richiedere più lavoro di quanto se ne abbia per l'intero progetto.

Per iniziare possiamo utilizzare la proprietà accent-color

accent-color: orange;

Tramite questa opzione i colori dei controller diverranno arancioni: in una checkbox il colore di sfondo a seguito della spunta, in una select o radio sarà il colore della parte attiva. Questo setting è sensibile ai color-scheme, ossia al variare del tema si potrà variare il colore.

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

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

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

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

.accented {
  accent-color: orange;
}

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