use-dark-mode-hook: A Simple Library To Add Dark Mode to Your React Project

This article was originally posted on my personal blog

I have created a new library called use-dark-mode-hook. It's a simple library that allows you to easily add dark mode to your React projects.

This library provides a custom hook useDarkMode and a button toggler component DarkModeToggler. You can use them together or separately. However, this library does not provide any styling regarding dark and light modes. You have to do that yourself.

---

Purpose

As I was trying to add Dark mode in my react project, I noticed that there are packages out there that do provide this, however, either they don't work with the latest React version or they only provide the functionality or UI. Thus, I decided to create a simple hook that adds the dark mode functionality to the website, and a component that provides a toggling button.

---

Installation

To install the package:

npm i use-dark-mode-hook

---

Usage

useDarkMode + DarkModeToggler

To use both the functionality and UI (more details about the options of each in below sections):

import useDarkMode, { DarkModeToggler } from 'use-dark-mode-hook'

function MyComponent () {
    const [isDarkMode, toggleDarkMode] = useDarkMode()

    return (
        <DarkModeToggler 
            isDarkMode={isDarkMode} 
            toggleDarkMode={toggleDarkMode}
            buttonClassName="some-classes"
        />
    )
}

That's it! useDarkMode will manage the state and logic while DarkModeToggler provides a toggle button for the user to toggle dark mode.

By default, useDarkMode will apply either dark or light class to the body of the document based on the choice of the user. You can change the names of the classes by passing darkModeClass and lightModeClass to useDarkMode, and change the element the class will be applied to by passing its selector in element to useDarkMode. You can check out all the options here.

useDarkMode hook

You can use the hook separately with your own toggler:

import useDarkMode from 'use-dark-mode-hook'

function myComponent (props) {
    const [isDarkMode, toggleDarkMode] = useDarkMode()

    //do something with it
}

You'll have to use isDarkMode as the current state of dark mode, and toggleDarkMode to toggle dark mode. toggleDarkMode takes a boolean specifying whether dark mode is enabled or disabled.

DarkModeToggler

You can use the toggler separately with your own logic:

import { DarkModeToggler } from 'use-dark-mode-hook'

function MyComponent () {
    //some code

    function toggleDarkMode (checked) {
        //logic to toggle dark mode
    }

    return (
        <DarkModeToggler isDarkMode={value} toggleDarkMode={toggleDarkMode} />
    )
}

For isDarkMode you have to pass the current value of whether dark mode is enabled or not, and for toggleDarkMode it should be a function that takes a boolean for whether dark mode is enabled or not.

---

Contribution

If you find any issues or bugs or would like to contribute to this library, please check out the GitHub repository.

You can connect with me by following me on twitter on @shahednasserr

Comments

[Shikhar]

Returning an object instead of array seem to be more cleaner to me.

[Shahed Nasser]

I’m adapting the same idea of “useState” that’s why

[Shikhar]

But this adaption doesn't go so well with custom hooks, does it? Idk, vast majority of custom hooks seem to either return single value or an object. Makes it cleaner to just de-structure the object, which is the case most of the time.