Как задать цвет флажков и переключателей

Короткий ответ

accent-color перекрашивает встроенные элементы форм в цвет сайта:

<style>
  .form { accent-color: deeppink; display: grid; gap: 8px; justify-items: start; }
</style>
 
<div class="form">
  <label><input type="checkbox" checked> Send me news</label>
  <label><input type="radio" name="plan" checked> Monthly</label>
  <input type="range">
  <progress value="60" max="100"></progress>
</div>

Для всего сайта

Свойство наследуется, поэтому достаточно задать его один раз:

:root { accent-color: var(--brand, royalblue); }

Чем это лучше своих флажков

Раньше, чтобы перекрасить флажок, его прятали и рисовали заново из псевдоэлементов. accent-color сохраняет встроенный элемент: он работает с клавиатурой, понятен экранным дикторам и правильно выглядит на телефоне. Галочку браузер сам делает светлой или тёмной, чтобы она была видна на выбранном цвете.

Если нужен полный контроль

Форму, размер и рамку accent-color не меняет. Для полностью своего вида используют appearance: none и рисуют элемент сами.

Частая ошибка

Задают color или background у input type="checkbox" и удивляются, что ничего не меняется. Встроенные флажки игнорируют эти свойства — цвет у них меняет только accent-color.