13.11.2025 | Holger Weischenberg

Consider the user's preference for dark or light system colors

variables.scss
/* Default theme */
:root {
  --Background-Color: #fff;
  --Text-Color: #000;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --Background-Color: #000;
    --Text-Color: #fff;
  }
}

Issue:

The theme should take into account whether the user has selected dark or light colors in the OS settings.

Solution:

Use the prefers-color-scheme CSS media feature. See also: documentation at developer.mozilla.org.