Тёмная, светлая тема

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

Чтобы дать устройству понять, какую тему использует сайт, можно использовать CSS-свойство color-scheme.

:root {
  color-scheme: light dark; /* сайт поддерживает тёмную и светлую тему */
  color-scheme: only light; /* сайт поддерживает только светлую тему */
}

Выполнять стиль, в зависимости от выбранной темы, можно через медиа-запрос @media (prefers-color-scheme)

/* стили, если пользователь переключил сайт в тёмный режим */
@media (prefers-color-scheme: dark) {
  .p {
    color: #fff;
  }
}

Также есть CSS-свойство light-dark(), через которое можно сразу указать стиль для тёмной и светлой темы.

.p {
  color: light-dark(#333, #fff);
}

Выводить картинку на светлой или тёмной теме

Выводить картинку в зависимости от того, какая выбрана тема (светлая или тёмная), можно через тег <picture>.

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

Отладка светлой и тёмной темы в Dev Tools

Симулировать переключение светлой или тёмной темы на устройстве можно через Dev Tools через кнопку «Включить или отключить распространенные эмуляции отрисовки».

Dev Tools. Включить или отключить распространенные эмуляции отрисовки