Theming with React.js or any in minutes with CSS Variables

After being a Web Developer for a couple of years and being the person responsible for UI, I’ve learnt a lot of things about styling and theming. Theming in Web applications is always challenging and interesting task.
Earlier(before CSS Variables) we had SASS and LESS CSS preprocessors to define variables in which it would dynamically compile and set inline colors.
Now that we have CSS Variables, supported natively, we don’t have to worry about it anymore! Alongside we should think about the support for CSS Variables as well. Check the image below for the browser support:

What are CSS Variables?
CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document.
Reference: MDN
Before:
.block1 {
background-color: #ffffff;
color: #000000;
}.block2 {
color: #000000;
}
Now: (with CSS Variables)
html {
--primaryBackground: #ffffff;
--primaryTextColor: #000000;
}.block1 {
background-color: var(--primaryBackground);
color: var(--primaryTextColor);
}.block2 {
color: var(--primaryTextColor);
}
Pretty simple huh?
Naming Variables

Before we do anything, we need to figure out how we name the colors. I think this diagram is pretty fun because, well its kinda true.
So for naming the colors for theme, I prefer it to be based on the content.
Check this for more info Material Design
Now that we know how to define and set the color variables, let’s put it in action.
Setting up themes
Define all your theme colors in html tag selector in css.
Use data-theme attribute to set the selected theme.
// default theme(light)html {
--primaryBackground: #ffffff;
--primaryTextColor: #000000;
}
// dark themehtml[data-theme="dark"] {
--primaryBackground: #000000;
--primaryTextColor: #ffffff;
}
Switching Theme
Invoke from Javascript// default or light theme
document.documentElement.setAttribute('data-theme', 'light');// dark theme
document.documentElement.setAttribute('data-theme', 'dark');
Note: The default theme is defined without any value for data-theme attribute. So the above code will switch to dark theme only if the data-theme attribute value is set to “dark”.
Switching Theme in React.js
Theme switching should happen in the root level of the application. Usually it will be App Component(App.js).
// App.jsconstructor(props) {
super(props);
this.state = {
theme: 'light',
};
this.toggleTheme = this.toggleTheme.bind(this);
}
toggleTheme() {
const theme = this.state.theme === 'dark' ? 'light' : 'dark';
this.setState({ theme });
document.documentElement.setAttribute("data-theme", theme);
}
Switching Theme in other frameworks
Similarly if you are using any other framework or library just keep the logic at the root level of the application and trigger the theme switch function based on the user action.
Got code snippets for other frameworks? Please suggest and I’ll add them!
Switching Theme like a pro
Now that we can switch the theme we can make the color change smoother with the help of CSS transition.

So cool, right? I could just keep on toggling it the whole day and feel so good.
Setup transition for smooth switching
// CSShtml.theme-transition,
html.theme-transition *,
html.theme-transition *:before,
html.theme-transition *:after {
transition: all 750ms !important;
transition-delay: 0 !important;
}
// JSdocument.documentElement.classList.add('theme-transition')
document.documentElement.setAttribute('data-theme', theme)
window.setTimeout(function() {
document.documentElement.classList.remove('theme-transition')
}, 1000)
And with these simple few lines of code we can change the way the theme switching happens. Pretty elegant, huh?
I have created a simple application using React.js on CodeSandbox.
Demo:
That’s it!
Hope this helps. Be sure to leave comments if you have any thoughts on this article or have any other use case to show. And if you find it helpful, give me a clap 👏 and share it. Thanks for reading!
PS: I’m human and make mistakes — so if you find any mistake I’d love for you to let me know!
Special thanks to Akhil TV for getting these awesome images in my blog and the demo application design.