CSS variables vs ThemeContext
The light mode and dark mode are gaining popularity and more apps are offering these theme switching. This theme switching looks cool but is difficult to implement and hard to get right. There are many libraries(emotion.js) that let you do this with ease by giving a ThemeProvider which is nothing but a React component that provides theme context. These libraries use CSS-in-JS which is a beautiful way of writing CSS with javascript.
I have been using CSS-in-JS for most of my projects and I’m in love with it but over time CSS has improved, the browsers have matured and support for CSS is better than before. The cost of implementing theme switching with CSS-in-JS libraries is considerably more than using browser standard CSS variable.
Let’s take the example of CSS-in-JS theme switching.
That’s the beauty of CSS-in-js it’s just javascript. The developer experience is pretty amazing with such API. However the user experience takes a hit when there are many components on the page, so switching the theme takes a while sometimes a noticeable delay. This leads to a poor user experience which is bad for our brand and business. Here is codesandbox for the CSS-in-JS example.
Now let’s do it with CSS variables.
Here the developer experience may suffer because of loss of static typing on theme object but the user experience is considerably better. Also, a developer doesn’t need to learn API styled.button(({theme}) => ({ ...styles })) where we create a function accepting theme and returning styles. Here is a link to codesandbox.
React profiler matrix⚛️
CSS-in-JS way of theme switching
CSS variables of theme switching
By seeing the above two screenshots it is very clear that using CSS variable is better than using CSS-in-JS way. A better developer experience can be achieved by a hybrid of two. Following gives you the ability for static type on theme object as theme.colors.primary.
Conclusion
CSS-in-JS is awesome but it comes with the cost of injecting styles with every render and theme switching using ThemeContext is not performant especially if there are a large number of components on a screen. Theme switching is very performant with CSS variables. Let’s use more CSS variables to develop awesome web apps themes.
