PCPartPicker Dark Mode

For the majority of the summer I worked on dark mode functionality for PCPartPicker. Having a dark mode is super trendy right now, but it's been a highly requested feature for awhile now from our users. Many of them have their computer system setup in ambient to dark lighting conditions because many of them are gamers. We would hear regularly that the bright background of our site was quite blinding and that a dark mode would help alleviate eye strain. We've been very pleased with the reception of the new feature.

Incorporating mode support was a significant undertaking for me. Due to our audience we still support some versions of IE, so from the start I knew I couldn't easily take advantage of CSS variables. Our site templates use a custom SASS framework and in doing research I came across theming via SASS maps and determined this would be a good solution for us to use. It required assembling a list of light and dark mode values (mostly tied to a variables list, although in some cases I used SASS functions to alter values) and then going file by file and adjusting my color declarations to now reference the maps list via a mixin. The project was lengthy, but now that our framework has theme mapping it's very easy to adjust the colors in a theme or even add an additional theme if desired.

I'm currently working through adding dark mode support to Cycling Builder, the DIY cycling site we launched in the Spring. It's been a fun project and I learned a lot. 😎