Эта статья изначально была опубликована в моем личном блоге Смакошь.

В этой быстрой статье я буду реализовывать темный режим в приложении Quick React с помощью настраиваемого хука React,

Прежде чем мы начнем, давайте посмотрим, как это должно работать, в три простых шага:

  1. Сначала мы проверим, не хранится ли выбранная тема в localStorage.
  2. Если он существует, мы просто установим его как тему по умолчанию.
  3. В противном случае нам придется использовать светлую тему по умолчанию.

Итак, приступим!

Давайте начнем с настройки пользовательского хука, мы будем использовать useEffect & useStateimported from React, мы проверим localStorage, когда компонент монтируется в первый раз, а затем мы выполним второй шаг!

import { useEffect, useState } from 'react'

export default () => {
  const [theme, setTheme] = useState('light')

  useEffect(() => {
    const localTheme = localStorage.getItem('theme')
    if (localTheme) {
      setTheme(localTheme)
    }
  }, [])
}

Теперь давайте настроим функцию, которая переключает темы

import { useEffect, useState } from 'react'

export default () => {
  const [theme, setTheme] = useState('light')

  const toggleTheme = () => {
    if (theme === 'dark') {
      setTheme('light')
    } else {
      setTheme('dark')
    }
  }

  useEffect(() => {
    const localTheme = localStorage.getItem('theme')
    if (localTheme) {
      setTheme(localTheme)
    }
  }, [])
}

Теперь все хорошо, нам нужно только вернуть значение темы вместе с функцией, чтобы мы могли получить к ней доступ, когда мы импортируем настраиваемую ловушку!

import { useEffect, useState } from 'react'

export default () => {
  const [theme, setTheme] = useState('light')

  const toggleTheme = () => {
    if (theme === 'dark') {
      setTheme('light')
    } else {
      setTheme('dark')
    }
  }

  useEffect(() => {
    const localTheme = localStorage.getItem('theme')
    if (localTheme) {
      setTheme(localTheme)
    }
  }, [])

  return {
    theme,
    toggleTheme,
  }
}

Наконец, давайте посмотрим, как мы можем использовать его при импорте.

import React from 'react'
import useDarkMode from './useDarkMode'

export default () => {
  const { theme, toggleTheme } = useDarkMode()
  return (
    <div
      style={{
        background: theme === 'dark' ? '#000' : '#fff',
        color: theme === 'dark' ? '#fff' : '#000',
      }}
    >
      <button type="button" onClick={toggleTheme}>
        Switch theme
      </button>
    </div>
  )
}

Вы можете найти полный пример здесь