Настройка одного набора цветов для светлого и тёмного режимов

Часто, когда речь идёт о светлом и тёмном режимах, подразумевается полная смена цветов. Светлый цвет становится темным и наоборот. Такова сущность ситуации!

Но подумайте об оранжевом. О розовом. Зелёном и голубом. Это цвета, имеющие приличные шансы работать хорошо как в тёмной, так и в светлой теме.

Дело вот в чём:

• Если есть розовый, отлично смотрящийся на светлом, его, вероятно, следует немного осветлить на тёмном.
• Или, если есть розовый, отлично смотрящийся на тёмном, его, вероятно, следует немного затемнить на светлом.

Примером такого рода может служить подсветка синтаксиса, поэтому сделаем именно это. Но это может быть что угодно: части иллюстрации, <hr />, кнопки и т.д.

Вот розовый:

.some-tag {
  /* розовый! */
  color: oklch(0.75 0.2 328);
}

Который отлично смотрится на белом (и имеет доступный контраст):

Разместите его на чёрном фоне, и он по-прежнему имеет доступную контрастность и выглядит… тоже нормально.

Но я думаю, что можно сделать лучше. Конечно, можно было бы выбрать цвет, не отвечающий требованиям доступной контрастности. Но также, я думаю, было бы лучше, если бы розовый цвет был немного темнее на светлом и немного светлее на тёмном.

К счастью, цвет задан в OKLCH, обладающем перцептивно равномерной яркостью. То есть если есть множество цветов, и повысить их яркость на одно и то же число, они все будут казаться нашим человеческим глазам примерно одинаково яркими.

Один из способов решения этой задачи — выбрать число, на значение которого необходимо осветлить, затемнить (или и то, и другое). Например:

html {
  color-scheme: light dark;

  --colorAdjuster: -0.1;
  @media (prefers-color-scheme: light) {
    --colorAdjuster: 0.133;
  }
}

Затем используем это число для настройки цвета (цветов):

.some-tag {
  color: oklch(calc(0.75 - var(--colorAdjuster)) 0.2 328);
}

Вот пример, как это сделать с подсветкой синтаксиса. Чтобы увидеть, как меняются цвета, нужно выбрать цветовой режим.

See the Pen

Вот оба режима в виде изображений:

На мой взгляд, эти цвета очень похожи, но каждый цвет, взятый за основу, был немного затемнён в светлом режиме и немного осветлён в тёмном.

Комментарии