use-dark-mode-hook

A simple library to add dark mode functionality to your React projects!

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

By default, useDarkMode will apply either dark or light class to the body of the document based on the choice of the user.

Contents

• Installation
• Usage
• useDarkMode + DarkModeToggler
• useDarkMode hook
  • Options
• DarkModeToggler
  • Options
• Attribution
• License

Installation

in your terminal:

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

useDarkMode hook

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

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

    //do something with it
}

isDarkMode: boolean state for whether dark mode is chosen or not toggleDarkMode: function that takes boolean value for whether dark mode should be enabled or not. Use this to change the user's preference (dark or light mode).

Options

You can pass to useDarkMode the following options:

Name	Type	Description	Default
initialValue	boolean	should it initially be dark	false
darkModeClass	string	the class that should be given when dark mode	dark
lightModeClass	string	the class that should be given when light mode	light
element	string	the selector of the element that the class should be applied to	body
debug	boolean	should debug messages be shown in the console	false

useDarkMode({
    initialValue: false,
    darkModeClass: 'dark',
    lightModeClass: 'light',
    element: 'body'
})

DarkModeToggler

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

If you use the button only for toggling dark mode, you need to pass it the following parameters:

Options

Name	Type	Description
isDarkMode	boolean	Whether it's currently dark or light
toggleDarkMode	Function	The function that will handle the change of login between dark
		and light mode. Takes boolean as parameter for whether dark is
		enabled or not.
buttonClassName	string(optional)	custom class to assign to button

---

Attribution

Icons from Feather.

---

License

MIT