Just before Dark Mode came to iOS, I switched my personal blog and my fixed.some.design blog to automatically switch to dark mode.

Step 1: Learn How
Apparently, media queries are the way to go.
@media (prefers-color-scheme: dark) allows the browser to pick colors based on the OS preference.

Step 2: Gather your colors
Not the best way to do so, but allowed me to get it out the door in under 10 minutes.

This is my SCSS folder that I use to code my theme:

~/Desktop/hugo/blog.cemkesemen.com/themes/simpleblog/dev/scss
❯ tree
.
├── _content.scss
├── _grid.scss
├── _header.scss
├── _homepage.scss
├── _responsive.scss
├── _trenda.scss
├── _ttsmalls.scss
└── style.scss

I dove into each file, and found every item I inserted color into. Then I copied them into a _dark.scss file, and started playing around with the colors in there.

Step 3: Wonder why it doesn’t work
Okay, for this media query to take affect, apparently it has to be at the end of the CSS file. So I moved @import "dark"; to the end of style.scss.

Step 4: Sigh of relief
Double check that everything looks good in both dark and light mode, republish your site, and be happy that you won’t scorch anyones retinas in the dark.

Next Steps
As this was a theme I used in both sites, I just git pushed this and pulled it back from the other site, and it was good to go.

However, a sane developer should definitely use variables for colors and make sure light and dark mode lives side by side in the same file.