Today I Learned

Simple theming approach with CSS variables

October 23, 2023

:root {
  --color-text: black;
  --color-background: white;
  
  [data-theme="dark"] {
    --color-text: white;
    --color-background: black;
  }
}


body {
  color: var(--color-text);
  background-color: var(--color-background);
}

<body data-theme="dark">
  Hello traveller.
</body>

Result