A simple light and dark theme according to user’s system preferences

Last Updated 24 Jan, 2023

I just used this and thought I would share it for people who didn’t know.

:root {
  --bg-color: white;
  --fg-color: black;
  --secondary-bright-color: #009900;
  --highlight-color: #F57F00;
  --mid-tone-color: grey;
  --editor-border: 1px solid var(--mid-tone-color);
  --logo-color: #224455;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
    --fg-color: white;
    --secondary-bright-color: #00FF00;
    --highlight-color: #F57F00;
    --mid-tone-color: grey;
    --editor-border: 1px solid var(--mid-tone-color);
    --logo-color: orange;
  }
}

This generates the css variables to adjust a webpage according to the user’s system theme preferences.