My Favorite React Hook (And How To Use It To Create A Dark Theme For Your Website).

According to a recent study, 82% of people use dark mode on their phones. About 83% use their operating system’s on dark mode. 65% of those who responded expect websites to automatically apply a dark theme. Dark mode has also been found to reduce battery usage up to 63% on AMOLED displays. And in a class of about 30 students and two mentors, I have yet to come across anyone using light mode on their IDE. So why not give the web users what they want?

This is where my favorite React hook comes into play. But what is React and what are hooks? From their website React is a JavaScript library for building user interfaces. React makes it painless to create interactive UIs and also build encapsulated components that manage their own state then compose them to make interactive UIs.

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which “hook into” React state and life-cycle features from function components. It does not work inside classes.

So, on to my favorite hook, useLocalStorage. To install it, go to the root of your project, open the terminal and run:

npm i use-local-storage

In the file you want to use it in e.g Dashboard.js, import it like this:

import useLocalStorage from “use-local-storage”;

Go to your CSS folder and write these CSS rules:

:root{
 — background: white;
 — text-primary:black;
}
[data-theme=’dark’]{
 — background: black;
 — text-primary:white;
}

To use our colors we will write something like:

body {
color: var( — text-primary);
background: var(— background);
}

This will choose between the black and white colors we wrote earlier.

Back to Dashboard.js we can set our theme using the useLocalStorage hook like this:

function Dashboard() {
//...more code
const [theme, setTheme] = useLocalStorage(“theme” ? “dark” : “light”);
const switchTheme = () => {
const newTheme = theme === “light” ? “dark” : “light”;
setTheme(newTheme);
//..more code
};

Using the ternary operator we use useLocalStorage to set our theme. If the theme is light, switch it to dark theme and if the opposite is true, switch to light theme.

function Dashboard() {
//...more code
 return (
     <div data-theme={theme}.....>
          <div>
     the webpage
          </div>
     </div>
};

Now all we need is to call our switchTheme() function. And what better way to change themes than using an onClick function on a button.

<button id=”btn” onClick={switchTheme}>Change Theme</button>

And on button click voila, light theme, dark theme…or just stay in the dark theme forever.

Adding it into our React Film Friday’s app and we get something like this:

Our web application with Light Theme on.

Our web application with dark theme on.

So you might ask, why use the useLocalStorage hook and not useState? With useLocalStorage hook we can refresh our web application as many times as we need, we can go back to our web application in three days and the web application will “remember” which theme we chose.