Лия Веру написала статью о том, как быстро сделать тёмную тему для сайта — "Dark mode in 5 minutes, with inverted lightness variables".

Основная идея заключается в том, чтобы использовать кастомное свойство для задания светлоты в цветовой модели HSL:

root {
 --l-0: 0%;
 --l-100: 100%;
}

@media (prefers-color-scheme: dark) {
 :root {
  --l-0: 100%;
  --l-100: 0%;
 }
}

body {
 background: hsl(0 0% var(--l-100));
 color: hsl(0 0% var(--l-0));
}

Это решение неидеально, так как при использовании HSL один и тот же уровень светлоты распределяется неравномерно по всему цветовому пространству. Эту проблему решает цветовая модель HCL, но её поддержка пока есть только в Safari TP.

#css #colors

https://lea.verou.me/2021/03/inverted-lightness-variables/