Light and dark mode in just 14 lines of CSS - DEV Community 👩‍💻👨‍💻

Fri May 13 2022 04:37:41 GMT+0000 (Coordinated Universal Time)

Saved by @itsbrex

:root {
  /* Dark theme */
  --dark-background: #000;
  --dark-foregeound: #fff;
  /* Light theme */
  --light-background: #fff;
  --light-foregeound: #000;
  /* Defaults */
  --current-background: var(--light-background);
  --current-foreground: var(--light-foregeound);
}

@media (prefers-color-scheme: dark) {
  :root {
    --current-background: var(--dark-background);
    --current-foreground: var(--dark-foregeound);
  }
}

I also use CSS custom properties this way, tho I tend to do one extra step and I have one custom property for dark, one for light, and then I set the ones for dark theme. Kinda like this: What I love about using custom properties in general, is that doesn't require JS, but if you want to use JS, you still can. You just update the custom properties values 😍 Great post as usual, Salma! Cheers!