There is a new-ish CSS function that simplifies creating different light and dark stylesheets for your site. It’s called light-dark and here are some quick steps to use it:

First, you need to define your color-scheme at the :root or html level of your CSS.

:root {
  color-scheme: light dark;
}

Now, wherever you set any color in the rest of your CSS, you can instead use light-dark to define 2 colors. The first color in the function is for the light color scheme; the second is for the dark scheme. It’s that easy!

body {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

I just implemented on this new TIL site by editing my (already custom) terminal.css stylesheet. You can view it here. I learned this today thanks to this post from CSS-Tricks.