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

【问题标题】：Switching between Dark and Light Mode in React在 React 中在暗模式和亮模式之间切换
【发布时间】：2020-08-24 22:54:23
【问题描述】：

我在 React 中使用 useDarkMode 库。

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

        </>
    )
}

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

【问题讨论】：

能否提供库的来源
您可能需要重新检查此链接usehooks.com/useDarkMode
github.com/donavon/use-dark-mode

标签： javascript reactjs react-hooks styling

【解决方案1】：

如果@norbitrial 的回答被证明是正确的，您可能还有一种方法可以缩短代码以提高其可读性：

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

更进一步：

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

该库似乎还提供了toggle function，不再需要enable 或disable，现在您对两者使用相同的按钮：

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

【讨论】：

【解决方案2】：

根据文档useDarkMode() 返回一个具有value 等属性的对象：

value: 一个布尔值，包含暗模式的当前状态。

所以很可能您可以尝试以下方法：

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

我希望这会有所帮助！

【讨论】：