UI Themes in React with Styled Components

In this story, we will explore how to manage UI themes in React app that uses styled-components on an example of pomodoro.increaser.org app.

Themes

First, we need an object that will represent a default theme. It will contain the most basic properties, such as colors, shadows, and transitions.

All of the themes are based on the default one, with slight changes such as background color or primary color. So it would be nice to have a function that will receive default theme and custom properties and will return a new theme. We assume that objects have only one layer of nesting.

To create additional themes, we make an array of objects, where each object contains the name of the theme and set of unique properties. Then we go over each object and call a mergeInfo function to receive a custom theme.

Reducer

We will keep a theme in the redux state. On the start of the app, we take the name of the theme from the local storage if it is there. When a user selects a particular theme, we search it by name in the list of all themes and return a new state with an updated theme.

Components

Now, when we have a theme in a redux state, we need to wrap root components with the theme provider, so that all styled components that rendered down the tree will have access to the theme.

With this approach, you can easily integrate different UI themes in your app. In the snippet below, you can find small functions that were used in examples.

Reach the next level of focus and productivity with increaser.org.

Image for post
Image for post
Increaser

Written by

Software engineer, creator of increaser.org. More at geekrodion.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store