color-scheme

Свойство color-scheme позволяет определять и указывать цветовые темы (по-другому их ещё называют цветовые схемы или режимы), которые поддерживает сайт. Браузер может загрузить те или иные стили в зависимости от темы, выбранной пользователем. Также это свойство помогает создавать более (или менее) контрастные режимы для пользователей с нарушениями зрения.

        
          
          :root {  color-scheme: dark;}
          :root {
  color-scheme: dark;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В качестве значения можно указать normal. Это значит, что используется значение по умолчанию. Соответственно, light и dark — это только светлая или только тёмная тема. Если установлено значение light dark, это означает, что возможны обе темы. Если написать значения в обратном порядке (dark light), значит, тёмная тема предпочтительна. Применение значения color-scheme зависит от значения prefers-color-scheme у директивы @media. То есть, если у пользователя по умолчанию включен тёмный режим, то он автоматически отобразится на нашем сайте, если мы не пропишем другое значение как желательное.

Кроме этих значений, color-scheme поддерживает глобальные значения initital, revert, revert-layers и unset.

Если нужно обозначить, что сайт работает только со светлой темой, добавьте ключевое слово only, например, only light, или наоборот.

color-scheme поддерживается во всех основных браузерах. При использовании в старых браузерах лучше проверить поддержку свойства. Проверить поддержку color-scheme можно на Can I Use.

Также можно использовать метатег <meta name="color-scheme">. Он позволяет задать несколько тем через пробел:

        
          
          <meta name="color-scheme" content="light dark">
          <meta name="color-scheme" content="light dark">

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Размещение свойства color-scheme в метатеге помогает немедленно загрузить необходимую тему, не дожидаясь загрузки CSS. Это особенно полезно, когда у пользователей есть проблемы со скоростью интернета. Работа метатега и свойства, записанного через :root, одинакова, разница только в скорости загрузки.

В примере видно, как свойство применяется к нативным HTML-элементам. В нашем случае к <input>. Для первого поля значение color-scheme указано как light, поэтому оно окрашено в цвета светлой темы. Во втором случае — dark, соответственно, поле в цветах тёмной темы. И в третьем случае используем значение light dark, то есть поле будет соответствовать той теме, которая выбрана у вас в операционной системе, и изменится при её смене.

Главное, для чего нужно свойство color-scheme, — это улучшение опыта пользователей при взаимодействии с сайтом, независимо от их устройства или настроек в браузере. С его помощью можете повысить или понизить контрастность изображений, подобрать приятные цвета и сделать сайт комфортным для восприятия.

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

Значение по умолчанию для prefers-color-scheme — light (если пользователь не написал по-другому). В этом коде меняем значения цветов для большей контрастности, если у пользователя по умолчанию стоит тёмная тема. При этом результат лучше проверить, потому что слишком контрастные цвета некомфортны для глаз.

        
          
          @media (prefers-color-scheme: dark) {  .theme {    color: #FFFFFF;    background-color: #000000;  }}
          @media (prefers-color-scheme: dark) {
  .theme {
    color: #FFFFFF;
    background-color: #000000;
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать