CSS media feature prefers-color-scheme

The prefers-color-scheme CSS media feature is used
to detect if a user has requested light or dark
color themes. A user indicates their preference
through an operating system setting (e.g. light or
dark mode) or a user agent setting.

Syntax

light
Indicates that user has notified that they
prefer an interface that has a light theme,
or has not expressed an active preference.

dark
Indicates that user has notified that they prefer
an interface that has a dark theme.

:root {
  --color-1: red;
  --color-2: blue;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-1: white;
    --color-2: grey;
  }
}

@media (prefers-color-scheme: dark) {
  html {
    background-color: var(--bg-color-page);
  }
}

.theme-a {
  background: #dca;
  color: #731;
}

@media (prefers-color-scheme: dark) {
  .theme-a.adaptive {
    background: #753;
    color: #dcb;
    outline: 5px dashed #000;
  }
}