<style>
  .big {
    width: 64px;
    height: 64px;
  }
  .color-light {
    accent-color: wheat;
  }
  .color-dark {
    accent-color: rebeccapurple
  }
</style>

<div>
  <b>System color</b><br>
  <form>
    <input type="checkbox" checked></input>
    <input type="checkbox" ></input>
    <input class="indeterminate" type="checkbox"></input>
    <input type="checkbox" checked disabled></input>
    <input type="checkbox" disabled></input>
    <input class="indeterminate" type="checkbox" disabled></input>

    <input class="big" type="checkbox" checked></input>
    <input class="big" type="checkbox" ></input>
    <input class="big indeterminate" type="checkbox"></input>
    <input class="big" type="checkbox" checked disabled></input>
    <input class="big" type="checkbox" disabled></input>
    <input class="big indeterminate" type="checkbox" disabled></input>
  </form>
  <form>
    <input name="radio-small" type="radio" checked></input>
    <input name="radio-small" type="radio"></input>
    <input type="radio" checked disabled></input>
    <input type="radio" disabled></input>
    <input name="radio-big" class="big" type="radio" checked></input>
    <input name="radio-big" class="big" type="radio"></input>
    <input class="big" type="radio" checked disabled></input>
    <input class="big" type="radio" disabled></input>
  </form>
</div>
<br>
<div class="color-dark">
  <b>Dark accent color</b><br>
  <form>
    <input type="checkbox" checked></input>
    <input type="checkbox" ></input>
    <input class="indeterminate" type="checkbox"></input>
    <input type="checkbox" checked disabled></input>
    <input type="checkbox" disabled></input>
    <input class="indeterminate" type="checkbox" disabled></input>

    <input class="big" type="checkbox" checked></input>
    <input class="big" type="checkbox" ></input>
    <input class="big indeterminate" type="checkbox"></input>
    <input class="big" type="checkbox" checked disabled></input>
    <input class="big" type="checkbox" disabled></input>
    <input class="big indeterminate" type="checkbox" disabled></input>
  </form>
  <form>
    <input name="radio-small" type="radio" checked></input>
    <input name="radio-small" type="radio"></input>
    <input type="radio" checked disabled></input>
    <input type="radio" disabled></input>
    <input name="radio-big" class="big" type="radio" checked></input>
    <input name="radio-big" class="big" type="radio"></input>
    <input class="big" type="radio" checked disabled></input>
    <input class="big" type="radio" disabled></input>
  </form>
</div>
<br>
<div class="color-light">
  <b>Light accent color</b><br>
  <form>
    <input type="checkbox" checked></input>
    <input type="checkbox" ></input>
    <input class="indeterminate" type="checkbox"></input>
    <input type="checkbox" checked disabled></input>
    <input type="checkbox" disabled></input>
    <input class="indeterminate" type="checkbox" disabled></input>

    <input class="big" type="checkbox" checked></input>
    <input class="big" type="checkbox" ></input>
    <input class="big indeterminate" type="checkbox"></input>
    <input class="big" type="checkbox" checked disabled></input>
    <input class="big" type="checkbox" disabled></input>
    <input class="big indeterminate" type="checkbox" disabled></input>
  </form>
  <form>
    <input name="radio-small" type="radio" checked></input>
    <input name="radio-small" type="radio"></input>
    <input type="radio" checked disabled></input>
    <input type="radio" disabled></input>
    <input name="radio-big" class="big" name="c" type="radio" checked></input>
    <input name="radio-big" class="big" name="c" type="radio"></input>
    <input class="big" type="radio" checked disabled></input>
    <input class="big" type="radio" disabled></input>
  </form>
</div>
<br>
<script>
document.querySelectorAll(".indeterminate").forEach(checkbox => {
  checkbox.indeterminate = true;
});

</script>