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.


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.


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.


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.





Indie hacker behind increaser.org. More at radzion.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A Practical Guide to Recursion For JavaScript Developers

A Coding Blog Bitcoin Story #5: ‘Modaling’ in the Coding Canyon

JavaScript Standard

Leverage Angular’s Element Injector to make DRY Inputs

Simple Svelte Micro Frontends with Podium

Multiple Svelte logos with a single Podium logo in the middle representing micro frontends

Pipes in Angular

A Drip Of Javascript

How to Organize Your React App

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
Radzion Chachura

Radzion Chachura

Indie hacker behind increaser.org. More at radzion.com

More from Medium

Create dark mode structure in React projects (using Tailwind CSS, Typescript, and Custom Hook)

Build React components with Fluent UI

Animation ready for React?

Creating a Glitching Typing Animation in React