Today I learned

Setting a theme color without JavaScript

Having the ability to set the color of a whole section is a pretty common usecase in modern websites. If you're working with React there are two ways who come across your mind, when you think about developing this feature.

Using the most basic approach in React: props

Imagine you have a bunch of components who are styled based on the theme color. We achieve that by using one of the most basic React features: props.

...

// The component definition
const App = ({ themeColor }) => (
  <>
    <Header color={themeColor} />
    <Main color={themeColor} />
    <Footer color={themeColor} />
  </>
)

// Setting the theme color
<App themeColor='#9D3215' />
...

We just set the value of our themeColor on the root level, and this value is passed down to every child component. Than it's used to style the components.

Using React.Context

Another well known approach is to use React.Context. You first define your context and wrapp your App component in a Context Provider.

...

const ThemeContext = React.createContext('#9D3215')

const App = () => (
  <ThemeContext.Provider value='#9D3215'>
    <Header />
    <Main />
    <Footer />
  </ThemeContext.Provider>
)

Now every component is able to access this theme value by using the context hook.

...

const Header = () => {
  const theme = useContext(ThemeContext)
  return <h1 style={{ color: theme }}>Logo</h1>
}

...

Without any JavaScript

But wait! This is also possible without using any JavaScript. And with just plain CSS. The basic idea is to wrap your App with a section tag for example and set the color value on the section tag in specific css class.

Now every child component can check in their stylesheet, if the specific css class is present, and if it is, it can use the color value. This is possible by setting the color value to currentColor!

I created a working example on CodePen ↗, check it out and let me know what you think.

And that's it! Setting the theme color for your whole app without any JavaScript! I think that's a pretty cool alternative approach.

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter ↗ Opens in new tab or via Email ↗ Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

I wish you a wonderful day! Marco