React: How to Scale Theme Sets with Deep Merging

Create sets of themes and inject them as one object into React theme providers

Introduction

In this article I will share a deep merging solution for adding sets of themes to your React apps. By deep merging multiple theme objects hosted in different files that adhere to a common theme structure, you can keep sets of themes separate and scale your theme capabilities with ease.

I implemented this solution on my company website’s landing page, which already had light and dark themes built in prior to the implementation.

What I aimed to do was introduce Cryptocurrency based themes without having to disrupt or refactor the default themes. The problem solved was not to mix Cryptocurrency based themes (Bitcoin, Ethereum and DOT) with the default light and dark themes.

In other words, the Crypto themes needed to exist in a separate file to the default themes.

To the end-user though, the themes are all displayed together and can be seamlessly switched between from any component. The components and UX are completely de-coupled from the underlying theming structure, as the following screenshots demonstrate: