Published on [Permalink]
Reading time: 1 minute

IndieWeb Create Day

I’m currently participating in my first IndieWeb Create Day:

Join us in the IndieWeb chat and in our Zoom room. Share ideas, create & improve our personal websites, and build upon each other’s creations. Whether you’re a creator, writer, blogger, coder, designer, or just someone who wants to improve their presence on the web, all skill and experience levels welcome. Breakout rooms available for those who want to collaborate on the same topic.

I’m using some free time today work in the same virtual space as others to add a new feature to my personal site: dark mode!

Portfolio page showcasing two web projects
Work in progress: My portfolio page in dark mode

Cory Etzkorn has an interesting and elegant dark mode solution, wrapping all of the dark mode styles within a single mixin. I tried this approach, but changed course due to way my stylesheet is structured.

Revisiting my CSS in dark mode, I am seeing opportunities to use CSS variables for my root colors (background, text, supporting text, links, and hovers).

For my block classes and utility classes, I am including a @media (prefers-color-scheme: dark) rule for any overrides on the relevant .scss files.