javascript - 在 React 中切换暗模式和亮模式

Question

我正在使用 useDarkMode 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>
            )}

        </>
    )
}

我想让按钮在太阳和月亮之间切换，并且能够在暗模式和亮模式之间切换。我似乎无法弄清楚如何做到这一点，我也尝试过使用钩子(Hook)来但没有运气。

Answer 1

基于文档 useDarkMode()返回具有如下属性的对象 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>
)}

希望对您有所帮助!