Переключение между темным и светлым режимами в React - PullRequest
Новая
       35

Переключение между темным и светлым режимами в React

2 голосов
/ 09 мая 2020

Я использую библиотеку 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>
            )}

        </>
    )
}

Я хочу, чтобы кнопки переключались между солнцем и луной и могли переключаться между темным и светлым режимами. Кажется, я не могу понять, как это сделать, я также пробовал использовать крючки, но безуспешно.

Ответы [ 2 ]

4 голосов
/ 09 мая 2020

На основе документации useDarkMode() возвращает объект со свойствами, например value:

value: логическое значение, содержащее текущее состояние темного режима.

Так что, скорее всего, вы можете попробовать следующее: 

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

Надеюсь, это поможет!

3 голосов
/ 09 мая 2020

Если ответ @orbitrial окажется правильным, у вас также может быть способ сократить код, чтобы улучшить его читаемость: 

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