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

Harish V
Harish V
Sep 3, 2018 · 4 min read

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:

CSS Variables 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 theme
html[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.

Harish V

Written by

A Passionate web developer, enthusiastic to explore and build applications with latest cutting-edge technologies to deliver the best user experience.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade