我用的是 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>
)}
</>
)
}
我希望按钮能够在太阳和月亮之间切换,并且能够在黑暗模式和光明模式之间切换。我似乎无法解决如何做到这一点,我也试过使用钩子来实现,但没有成功。
基于文档 useDarkMode()
返回一个具有以下属性的对象 value
:
value
: 一个包含当前黑暗模式状态的布尔值。
所以你可以试试下面的方法。
{darkMode.value ? (
<button type="button" onClick={darkMode.disable}>
☀
</button>
) : (
<button type="button" onClick={darkMode.enable}>
☾
</button>
)}
我希望这能帮到你!
如果@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
功能,消除了对 enable
或 disable
现在,你使用相同的按钮为两个。
const DarkModeToggle = () => {
const { value, toggle } = useDarkMode(false)
return (
<button type='button' onClick={toggle}>
{value ? '☀' : '☾'}
</button>
)
}