How to add a simple dark mode

Dream of running a solo Internet business? check out SOLO LAB

Published Feb 21 2023

I’ve used these few lines of CSS to apply dark mode to my website:

@media (prefers-color-scheme: dark) {
  body {
    filter: invert(100%);
    background-color: rgb(29, 32, 31) !important;
  }
  img,
  .astro-code,
  .emoji,
  iframe /* for recaptcha */ {
    filter: invert(100%) !important;
  }
}

Looks pretty good!