I'd like to share the story behind one of my favorite contributions to Open Sauced so far, which is the addition of "Dark Mode", PR #1020. This PR touched 25 files and was pretty substantial in scope, so I'm going to break this up into 3 parts. Part 1 is here is just the background - the what and the why, as @bdougieyo sometimes says. If there's one takeaway though, it's the value of opening a PR early in your process - you can share your progress and your roadblocks, and maintainers can help you get unblocked!
With that, the original idea for the dark mode feature came from @filiptronicek in Issue #607, and I decided to try to take this one on for a few reasons:
- 1) I'd read an article once about
prefers-color-scheme, and that was my level of knowledge about dark mode. - 2) I wanted to learn the ins and outs of how the project handled styles.
- 3) My Macbook was set for the color preference following the time of day, so based on #1, I knew I was going to test the feature with (literally) endless delight!
In this project I picked up a habit of starting talking about the PR relatively early in the cycle. So as I got started on things, I had inferred that the intention was to fall back to the system preference but that the user could override it to either or light or dark mode and have that setting persisted to local storage. The more I read articles, the more I saw a pattern that they either just simply followed the system preference, or they would start with a default and toggle back and forth. So there were some cases using a single state for user preference, and some with two states, but none with three states.
Talking with other contributors about it, @0vortex pointed out a post on the StackOverflow blog, and it talked in passing about a three-state solution. I was sold! I felt compelled to see this thing through with a three-state solution, and I'm glad I did because since then I've seen a handful of blog posts and examples in the wild, which I really like.
Stay tuned for Part 2 where I'll cover some implementation details and learnings, and Part 3 were I'll cover some of the unexpected things about this PR!
Top comments (0)