menumenu_open <!— xhtml.ru —>

prefers-color-scheme

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

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

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

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

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

/* Light mode */
@media (prefers-color-scheme: light) {
  .element {
    background: white;
    color: black;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .element {
    background: black;
    color: white;
  }
}

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

Поддержка браузерами — с этим — нормально, все современные, кроме совсем маргинальных.

See this code Prefers Color Scheme on x.xhtml.ru.