Adding light and dark mode to my side project was a fun journey. I especially loved how intuitive the entire process was. The prefers-color-scheme CSS property contains the user’s color scheme - light or dark. We then define SASS or CSS styles for both modes, and the browser applies the style the user wants. That’s it! The seamless flow from the operating system to the browser to the website is a huge win for users and developers.
After tinkering with Fediverse, I decided to add light and dark modes to this website as well. I began with some internet research on how to best approach this. This GitHub thread shows the current progress of the feature. And this in-depth POC demonstrates how challenging the process can be.