Theming

Have you ever had a user request a dark mode? That certain elements are slightly tweaked to their preferences? A high-contrast mode for accessibility? A button that looks slightly different when contained within a particular view?

Each of these requests fit neatly under the larger umbrella of theming, and theming is a first class citizen with styled-components. Utilizing the power of props injection we discussed earlier and a nice utility from styled-components we can implement each of these requests—and more—cleanly and simply!

First, let’s begin by illustrating the engine of this functionality, a theme object.