React: How to Scale Theme Sets with Deep Merging

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

Ross Bulat

--

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:

Active DOT theme with theme menu and DOT icon next to JKRB logo
Active ETH theme (notice the icon update next to the JKRB logo)
Active dark theme — with all Cryptocurrency branding removed

There is no limit to how many “theme files” you introduce into your app.

These theme files we will be discussing are all deep merged (as opposed to shallow merging) into one theme object before being injected into ThemeSet objects, that will ultimately be imported and used in component styling.

Thus, you can introduce more themes as and when you see fit without having to navigate or refactor other theme files. With this approach, theme files become lightweight and easy to manage — they…

--

--

Ross Bulat

Programmer and Author. @ Parity Technologies, JKRB Investments