Код IT
← Каталог

Доступность и пользовательские настройки в CSS — prefers-color-scheme

Фрагмент из «Доступность и пользовательские настройки в CSS»: prefers-color-scheme.

css cssencyclopedia117 embed URL статья в энциклопедии
CSS main.css 
:root {
  color-scheme: light dark;
  --bg: #f8fafc;
  --text: #0f172a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #e2e8f0;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}
:root {
  color-scheme: light dark;
  --bg: #f8fafc;
  --text: #0f172a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #e2e8f0;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}