How to Build a Theme Switcher App in React

Using styled-components and Redux

In this tutorial, we will learn how to build a React app with fully customizable themes using styled-components and Redux.

I sometimes get pretty far into a web project and wish I had supported theming (or just done better CSS management in general) from the beginning. There are many component libraries (i.e., Material UI, etc…) that provide various UI elements with features that enhance basic HTML. These libraries usually also have their own theming mechanisms in place. Using styled-components as described in this article is fully compatible with Material UI and its theming approach. You can use the two hand in hand to enhance your app’s appearance.

When starting a new app, I recommend building a mini-design-system (a component library) for use within the app (assuming you aren’t already using an external design system). This just means defining some base components with specified styling and behaviors that can be used throughout your app. For example, you can create PrimaryButton React component that is always blue, 150px in width, (or whatever you want). I often see on large enterprise projects, that an app will use a library like Material UI, but specify the same style parameters all over the place like this:

<Button variant=”outlined” size=”small” color=”primary”></Button>

If that’s how 90% of your buttons will look, don’t repeat yourself (DRY) and create a reusable component.

What we will learn:

1. How to create a new React app using TypeScript
2. How to use styled-components
3. How to use Redux to globally change the theme in your app

All the code in this tutorial is on GitHub here:

ezrabowman/react-theme-demo

The first thing we need to do is create the React app. I always use TypeScript, so I’ll start with that template. I will also use yarn instead of npm. If you are a javascript or npm purist, that’s ok. You…