在React中在暗模式和亮模式之间切换

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

        </>
    )
}

我希望按钮在太阳和月亮之间切换,并且能够在暗模式和亮模式之间切换。我似乎无法解决该怎么做,我也尝试过使用钩子,但运气不好。

评论
Glora
Glora

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

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

因此,很可能您可以尝试以下操作:

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

我希望这有帮助!

点赞
评论