Implementing Dark Mode (Part 2)

• open-sauced

  21 881 4.2 JavaScript

  Discontinued 🍕 This is a project to identify your next open source contribution.

  

This is Part 2 of the series on Implementing Dark Mode. This was done in open-sauced/open-sauced#1020, and handily demonstrated to me the wealth of learning opportunities in contributing to Open Source. I for one have learned a ton! On this one, I got the opportunity for learning in several areas. I was still pretty new to React (and I still am), so I had not yet used the Context API. For a lot of the same reasons, I hadn't used the styled-components library before.

• octicons

  10 8,123 7.3 JavaScript

  A scalable set of icons handcrafted with <3 by GitHub

  

Another implementation detail was related to coloring of images. Open Sauced makes use of many SVG images, of differing flavors. In the cases where SVG files are in the static assets of Open Sauced (e.g. ), the coloring of these is controlled using the filter CSS property. On the other hand, we also make use of @primer/octicons-react.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• react-loading-skeleton

  4 3,748 3.5 TypeScript

  Create skeleton screens that automatically adapt to your app!

One last fun implementation detail was working with our use of react-loading-skeleton (I love this effect, and I feel it really does work in keeping the user engaged and under the impression of the app working while data loads). To make this effect still work well in dark mode, I took the opportunity to crack open the source, and replicate a few key values as found in this snippet of our CSS.

Suggest a related project