In contributing to Open Sauced and other OSS projects as well, I've found time and time again that there are such ample opportunities to learn. However, contributing a feature and sticking with it on a longer term can cause those opportunities to multiply! In Part 3 of this series, I'm going to talk about some of the after-effects of implementing dark mode on Open Sauced in PR #1020.
It was around this time that @bdougieyo had really been wanting to flesh out the existing documentation. In the interest of keeping the project moving, the PR was merged with the caveat that we needed to make sure it was well documented so future contributors could work with it.
Seeing as this PR had a big impact on look and feel of the app, and touched so many files, it's not surprising there were 32 comments on the PR when it was all said and done. Some of those were scoping the feature, some of them were thinking critically about colors, and some of them were talking about the approach in general (i.e. code review). To have this much commentary in the PR made it really easy to document the feature! The opportunity to learn and contribute multiplied and that brings us to a follow-on documentation PR.
A more obvious case of learning opportunities multiplying is the fact that having authored the feature, you'd be pretty well suited to make little fixes to it (and there will be little fixes needed). Case in point, there was an issue filed by @0vortex where the hover style for some components still had light coloring and this made the text unreadable in dark mode. I loved reading his issue description of
Hovering over a repository in the dashboard gives a user a surprise sunburn.
Having learned some of the syntax for styled components and knowing how they were organized in the project, I was able to make a subtle but easy fix in PR #1060.
Last point I'll make here, the feature you author might reach further than you think. Looking back now, it was fairly obvious that our design system for Open Sauced (Storybook) should allow toggling dark mode. What was not obvious was how to make all that work. Storybook supports this conceptually but in a newer version than we had. I did a lot of learning as I worked on PR #1061 to get it up and running, since I didn't have a lot of experience with dependency updates in a React app.
Learning with a goal in mind is powerful, and sticking with features you contribute can supercharge your learning because the goals multiply!
Top comments (2)
In my opinion, the best dark mode experience that can be achieved is if you use the
prefers-color-schememedia query, and have the user change the theme at will through the browsers, by having a setting similar to the settings browsers have for cookies, if this was a thing, everyone's life would be much easier.I think we're on the same page! In Part 1 (dev.to/opensauced/implementing-dar...), I briefly touched on how we settled on a three-state solution to try to get the best of all sides (follow system by default, but allow the user to override and persist the preference on that device).