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>

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>)
            }
        </>
    )
}

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!