DEV Community

Cover image for A UseDarkMode react hook for everyone!
Will Holmes
Will Holmes

Posted on

A UseDarkMode react hook for everyone!

So a while ago I came across an issue whilst developing.

I was creating a solution in nextjs with typescript and using tailwind to help with my css.

Tailwind out of the box provides dark mode support for different styling really easily by doing the following:

<div class='bg-white dark:bg-black'>Hello World </div>
Enter fullscreen mode Exit fullscreen mode

However, I needed to know when the user was in dark mode within my react application to change other parts to the system. So I began looking through npm for another solution, but with little luck I decided to take how tailwind looks for dark mode and put it into a react hook.

This is where useDarkMode comes into play. Initially I created this inside of the repository that I was working on at the time but after proving that it works, I realized it would soon be something that could help a lot of other developers.

The package also comes with types so for those using typescript you can ensure type safety and, those who aren't well... that's fine too!

So I created a new repository and published it to npm: https://www.npmjs.com/package/use-dark-mode-ts.

It's really easy and simple to use, below is a code snippet:

import { useDarkMode } from 'use-dark-mode-ts';

const ExampleComponent = () => {
    const isDarkMode = useDarkMode();

    return (
        <>
            {
                isDarkMode
                ? (<div>I am in dark mode </div>)
                : (<div>I am not in dark mode </div>)
            }
        </>
    )
}
Enter fullscreen mode Exit fullscreen mode

Now by no means is it perfect and those with more experience in this area might be able to help contribute to make it even slicker. But for now, this is where I have got to and at the time of writing it has exploded with 4.2k weekly downloads.

I hope it helps as many of you as possible!

Discussion (15)

Collapse
kamil7x profile image
Kamil Trusiak

For general use, it's okay to rely on media query.

But in case of Tailwind, it also has option to set dark mode manually, by using dark class on parent element. tailwindcss.com/docs/dark-mode

I think it would be nice to include this case (maybe some configuration option?)

Collapse
willholmes profile image
Will Holmes Author

I'm not sure I follow. So above you'll see how I demonstrate the usage of the dark class. But this hook allows you to get the exact value that the dark class will use, just in your react code as well.

Collapse
kamil7x profile image
Kamil Trusiak

You can change tailwind config to darkMode: 'class' and then you can use <body class="dark"> to set dark mode regardless of user's prefers-color-scheme value.

Here you have an example play.tailwindcss.com/nQueSOesIA

In this case your hook might report incorrect value.

Collapse
tzwel profile image
tzwel

holy shit does tailwind always look like this?

Collapse
kamil7x profile image
Kamil Trusiak

No, I just used black and white, because didn't want to think too much about it

Thread Thread
tzwel profile image
tzwel

i meant the syntax

Thread Thread
kamil7x profile image
Kamil Trusiak

Yes. It's a set of utility classes. It has also possibility to configure values for default classes and create classes on the fly. But the latter isn't used very frequently in my opinion.

Thread Thread
tzwel profile image
tzwel

bruh

Collapse
bryce profile image
Bryce Dorn

Looks good! May want to add a cleanup function with a removeEventListener though?

Collapse
willholmes profile image
Will Holmes Author

Yep! On the todo :)

Collapse
raaynaldo profile image
Raynaldo Sutisna

I'm sorry I don't really understand, but I'm curious why we need a cleanup function here?

Collapse
bryce profile image
Bryce Dorn

It prevents memory leaks in older browsers; if the hook is rendered and later removed the event listener in some cases will still remain. Garbage collection has improved over the years but browsers like IE haven't received these updates so it's good to manually remove event listeners for consistent behavior.

Thread Thread
willholmes profile image
Will Holmes Author

Thanks for the suggestion Bryce, this has been added in the latest version 1.0.2

Thread Thread
raaynaldo profile image
Raynaldo Sutisna

Oh I see. Thanks Bryce! You were refering to the npm package? I thought you were refering to the code snippet in this blog. Thanks for the explanation. I was wondering why we need cleanup function for hook