Switching between Dark and Light Mode in React

user_9131816 0
Viewed 582

I'm using the useDarkMode library in React. 

import useDarkMode from 'use-dark-mode'

const DarkModeToggle = () => {
    const darkMode = useDarkMode(false)
    return (
        <>
            {darkMode ? (
                <button type="button" onClick={darkMode.disable}>
                    ☀
                </button>
            ) : (
                <button type="button" onClick={darkMode.enable}>
                    ☾
                </button>
            )}

        </>
    )
}

I want the buttons to switch between the sun and moon, and be able to switch between dark mode and light mode. I can't seem to work out how to do this, I've also tried using hooks to with no luck.

react-hooks reactjs styling javascript
2 Answers

Based on the documentation useDarkMode() returns an object with the properties like value:

value: A boolean containing the current state of dark mode.

So most probably you can try with the following:

{darkMode.value ? (
   <button type="button" onClick={darkMode.disable}>
       ☀
   </button>
) : (
   <button type="button" onClick={darkMode.enable}>
       ☾
   </button>
)}

I hope this helps!

user_75995100

If @norbitrial's answer turns out to be correct you may also have a way of shortening your code to improve its readability :

<button type='button' onClick={darkMode.value ? darkMode.disable : darkMode.enable}>
     {darkMode.value ? '☀' : '☾' }
</button>

Going even further :

const DarkModeToggle = () => {
    const { value, disable, enable } = useDarkMode(false)
    return (
        <button type='button' onClick={value ? disable : enable}>
            {value ? '☀' : '☾'}
        </button>
    )
}

The library also seems to offer a toggle function, removing the need for enable or disable, now that you use the same button for both :

const DarkModeToggle = () => {
    const { value, toggle } = useDarkMode(false)
    return (
        <button type='button' onClick={toggle}>
            {value ? '☀' : '☾'}
        </button>
    )
}
user_69198950
Related