light-dark()

Leverage color-scheme for easy adaptive color

:root {
  color: light-dark(#333, white);
  background: light-dark(white, black);
}

section {
  border: 2px solid light-dark(lightgray, darkgray);
}

:root {
  --surface-1: light-dark(white, #222);
  --surface-2: light-dark(#eee, #444);
  --text-1:    light-dark(#222, #fff);
  --text-2:    light-dark(#444, #ddd);
}