prefers-color-scheme

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

Свойство поддерживается всеми основными браузерами. Его поддержку можно проверить на сайте Can I Use.

В этом коде с помощью prefers-color-scheme определяем, что у пользователя выбрана светлая тема, и задаём для неё свои цвета.

        
          
          @media (prefers-color-scheme: light) {  .block {    background: white;    color: black;  }}
          @media (prefers-color-scheme: light) {
  .block {
    background: white;
    color: black;
  }
}

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

С помощью свойства можно собрать небольшую демку в духе «Звёздных войн».

У prefers-color-scheme есть несколько значений, которые можно указать: light, dark и no-preference. Они помогают настроить тему страницы в зависимости от предпочтений пользователя.

light указывает на то, что пользователь предпочитает страницу со светлой темой (тёмный текст на светлом фоне).

dark означает, что пользователь предпочитает тёмную тему (светлый текст на тёмном фоне).

Если пользователь не выбрал определённую тему в системе, используйте вариант с prefers-color-scheme: no-preference, чтобы добавить на страницу тему «по умолчанию».

prefers-color-scheme похоже написанием на свойство color-scheme и они оба связаны с цветовыми темами. color-scheme определяет уже имеющиеся настройки для темы. prefers-color-scheme помогает создавать свои. Подробнее о свойстве color-scheme можно прочитать в справочнике для разработчиков MDN.

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

Лучше убедиться, что цвет текста контрастен по отношению к заданному цвету фона, например, с помощью сервиса Contrast Ratio.

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

💡 Избегайте чисто белого цвета. Он вызывает эффект свечения и растекания по тёмному фону, и вместо него лучше выбрать немного приглушённый белый цвет. Что-то вроде rgb(250, 250, 250). В модели цвета RGB #ffffff составляет 100.0% красного, 100.0% зеленого и 100.0% синего.

💡 На фотографии в тёмном режиме лучше накладывать затемняющий фильтр. Причина та же: слишком яркое изображение дискомфортно для глаз. Фильтр убирает яркость и помогает картинке выглядеть гармонично. С помощью медиавыражения prefers-color-scheme можно уменьшить яркость картинки до 70% от первоначальной.

        
          
          @media (prefers-color-scheme: dark) {  img {    filter: brightness(70%);  }}
          @media (prefers-color-scheme: dark) {
  img {
    filter: brightness(70%);
  }
}

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

💡 Уменьшить яркость видимой пользователем картинки можно другим способом. В теге <picture>, после определения темы, подгружается соответствующий вариант изображения. Нужно учитывать, что этот способ более затратный по ресурсам.

        
          
          <picture>  <source srcset="light-image.jpg" media="(prefers-color-scheme: light)">  <source srcset="dark-image.jpg" media="(prefers-color-scheme: dark)">  <img src="light-image.jpg" alt=""></picture>
          <picture>
  <source srcset="light-image.jpg" media="(prefers-color-scheme: light)">
  <source srcset="dark-image.jpg" media="(prefers-color-scheme: dark)">
  <img src="light-image.jpg" alt="">
</picture>

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

💡 Ширина и яркость шрифтов тоже может вызывать дискомфорт. По этой теме можно почитать статью про использование шрифтов в тёмной теме.

💡 Важно проверить все детали интерфейса в тёмной теме. Полосы прокрутки и тени могут быть слишком яркими и резкими, поэтому для них лучше отдельно прописать подходящие значения.