:root {
  /* Enable the browser to apply light/dark schemes automatically */
  color-scheme: light dark;
  /* Define color variables using light-dark(light-color, dark-color) */
  --text-color: light-dark(#333333, #f0f0f0);
  --background-color: light-dark(#ffffff, #222222);
}

body {
  /* Consume the variables; the browser handles the switching */
  color: var(--text-color);
  background-color: var(--background-color);
}