How to apply multiple themes to your web app

Tomorrow weather application theme selector

Intro

In the past 3 years, we have been building tomorrow.io’s weather platform application. Currently, we have around 500 SCSS files that contain about 16K CSS lines of code in this app.

Recently, we have been asked to update the application to have the ability to switch between themes, allowing users to choose between a light theme, a dark theme, and maybe even a custom theme.

When Microsoft dropped support for IE11, we decided to stop supporting it as well. This led us into a new era where we could use multiple new technologies, including converting our old SCSS variables to CSS custom properties.

The size and complexity of the project forced us to guarantee that customers will not be affected by our changes and that we will be able to continue adding new features and fixing bugs while refactoring the existing code. Our solution was to split the refactoring project into a few steps, each of which could be deployed without affecting other features or changing the app’s design.

Applying themes

The themes are implemented by adding a data-attribute to the application HTML element. We named it data-color-theme .

adding “data-color-theme” to the main HTML element

Under this data-attribute in our CSS files, we defined all the color declarations for the “classic” theme (for now, that’s the only theme we applied).
Additionally, we added the non-themeable colors declarations under :root

non theme-able colors on the left, theme-able colors on the right

Then we used those custom properties in our app CSS code selectors:

usage of CSS custom properties in our SCSS files

Now, we were ready to apply more themes as needed. This can be done by adding more colors definitions to our CSS code, in addition to the classic data-color-theme.
The data-color-theme attribute can be set with any theme as long as each of those declarations contains all the color variables.

Adding additional themes is as simple as applying new colors definitions

Add theme selector in the UI

After completing building this infrastructure, we added the theme-selector component. This component displays available themes and allows users to switch between them. When the user clicks on one of the themes, the HTML tag data attribute is changed, and all the new selected theme colors are applied to the entire application.

theme-switcher component code

Summary

After upgrading our app to use this new technology, we can easily add costumed themes upon request. Our CSS code is much more organized, and future development and refactoring will be much easier.

The final result