CSS: tema claro/oscuro en función de la configuración del usuario en su sistema operativo

Para cargar los estilos light/dark automaticamwnte en función de la congifuración que tenga el usuario en su sistema operativo podemos hacer uso de la propiedad media prefers-color-scheme:

A. Por medio de link en el head del documento cargando los archivos de css correspondientes:

<link rel="stylesheet" href="/light-theme.css" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" href="/dark-theme.css" media="(prefers-color-scheme: dark)" />

B. Directamente en el CSS principal:

@media (prefers-color-scheme: dark) {
  /* estilos para tema oscuro */
}

@media (prefers-color-scheme: light) {
  /* estilos para tema tema claro */
}