Home

CSS variables for theming

Define some variables at the root of your document.

:root {
  --font-color: black;
  --background-color: white;
  --footer-label-color: #444444;
  --dimmer: #e6e6e6;
  --dimmest: #f6f6f6;
  --link-color: #787672;
}

body.dark {
  --font-color: rgba(255, 255, 255, 0.9);
  --background-color: #2f3437;
  --footer-label-color: #eee;
  --dimmer: #64686a;
  --dimmest: #464b4f;
  --link-color: #b2b4b5;
}

Then with a single rule, we can capture the color for links.

a {
  color: var(--link-color);
}

When body gets the dark class, the variable --link-color will change value and the link color will automatically update.

This is in contrast to redefining the rule:

/* old */
a {
  color: #787672;
}

.dark a {
  color: #b2b4b5;
}