CSS variables and dark mode

<style>
  :root {
    --text-color-light: black;
    --text-color-dark: white;
  }

  p {
    color: var(--text-color-light);
  }

  @media (prefers-color-scheme: dark) {
    p {
      color: var(--text-color-dark);
    }
  }
</style>

<div>
  <p>Hola mundo!</p>
</div>