React Instant Theme Toggler using pure CSS

Dark Mode is everywhere right now. To boost the user's experience, the App needs to be customizable to satisfy the user's personal taste. Some people are love to see a light clean view and some other people are love to see a dark and elegant view.

CSS Variable

CSS variable or CSS custom properties are just like a variable in a programming language. This feature of CSS enables us to create a variable that can be changed on the fly via DOM.

This feature is available on pure CSS. We don't need any other library or CSS preprocessor to be able to use it. With this feature we can do theming on our web app easily. So the users can change the theme on the fly seamlessly.

How to do Theming with pure CSS in React?

First, all we need to do is declaring some default variables first. In our CSS file.

:root {
  --color-primary: #282c34;
  --color-background: white;
}

And then, we can put the logic to change the theme inside a hook named useTheme.

import { useEffect } from 'react';

const themes = {
  light: {
    "--color-primary": "#282c34",
    "--color-background": "white"
  },
  dark: {
    "--color-primary": "white",
    "--color-background": "#282c34"
  },
}

const useTheme = (selectedTheme) => {
  useEffect(() => {
    const theme = themes[selectedTheme] || themes.light;
    Object.keys(theme).forEach(key => {
      const value = theme[key];
      document.documentElement.style.setProperty(key, value);
    });
  }, [selectedTheme]);
};

export default useTheme;

As you saw that we have a variable called themes, inside that variable object, we can put as many themes as we want, in this case, I only put two kinds of themes, dark and light.

We can use useEffect hook to listen to whether the selectedTheme variable changed. And then, if the selectedTheme changed, we iterate the theme object's keys, and change our CSS Variable on the fly by accessing document object and set document's style property with key and value from our theme object.

After that, we can use useTheme hook in our component.

const [darkModeEnabled, setDarkModeEnabled] = useState(false);
useTheme(darkModeEnabled ? 'dark' : 'light');

And maybe we can use the HTML checkbox to toggle the theme.

 <label for="theme-toggler"> 
  <input
    id="theme-toggler"
    type="checkbox"
    checked={darkModeEnabled}
    onChange={e => setDarkModeEnabled(e.target.checked)}
  /> 
  DarkMode Enabled
</label><br />

Pretty easy right?

Yeah, the app's theme will change instantly as we click the theme toggle. With this very simple approach, we can give the user a seamless experience to give the user the capability to personalize the app based on their own taste.

Find it useful?

Follow @ghack.dev on Instagram and watch a lot of useful tutorials in Ghack Dev's Youtube channel. See you!

Comments

[Narender Saini]

Thanks for nice article. Can you explain why you used useEffect in the useTheme hook.

[ghack.dev]

useEffect is used to listen if the selectedTheme is changed. So the function passed to the useEffect hook will be called whenever the selectedTheme variable changed.

[Narender Saini]

Thanks