Рубрики
Без рубрики

Простой способ добавления темного режима в ваше приложение raction, используя крючки и сохранение его в локальное хранилище

В этой статье я поделимся своим подходом в режим темного / света, который я недавно реализовал … Теги с WebDev, Rect, JavaScript, начинающими.

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

Сначала добавляю Элемент в мой App.tsx файл. Это может быть либо <кнопка> ,

, Что вы предпочитаете. Это будет выступать в качестве переключателя в режиме темного/света:

import React, { useEffect, useState } from 'react';

function App() {
    return (
      
{/* my other elements */}
) } export default App;

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

.container {
  position: relative;
  max-width: 1400px;
  padding: 40px 30px;
}

.mode-switch {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 11px;
  cursor: pointer;
  transition: color 0.2s ease-in-out;

  &:hover {
    color: #50bbf1;
  }
}

Я вернусь к моему Приложение Компонент и добавить Уместите крюк. Я определяю Режим Переменная и A SetMode функция. На данный момент я передаю режим по умолчанию как «свет» внутри Уместите крюк. Тогда я добавляю OnClick Мероприятие на мой коммутатор и в этом случае я называю SetMode Функция с условным параметром. Эта функция гарантирует, что он устанавливает режим в темноту, если он был легким, и наоборот. Я также добавляю текстовый контент динамически:

function App() {
    const [mode, setMode] = useState('light'); 

    return (
      
setMode(mode === 'dark' ? 'light' : 'dark') } > {mode === 'dark' ? 'Light mode' : 'Dark mode'}
) }

Следующий шаг переключается между режимами и добавлением/удалением соответствующих стилей, которые будут достигнуты с помощью Useffect крюк. Это просто добавит класс ‘.dark’ для При переключении в темный режим и удалите его, когда выбранный режим светится. Я проезжаю [Режим] Как второй параметр для useffect. потому что это будет работать как побочный эффект Изменяющегося «режима»:

function App() {
    const [mode, setMode] = useState('light'); 

    useEffect(() => {
      if (mode === 'dark') {
        document.body.classList.add('dark');
      } else {
        document.body.classList.remove('dark');
      }
    }, [mode]);

    return (

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

.dark {
  background-color: #222;
  color: #f5f5f5; 
}

Для того, чтобы стиль других элементов, кроме В темном режиме я использую & селектор. Допустим, у меня есть кнопка с «первичной кнопкой» класса. Я хочу изменить свой цвет и фоновый цвет, когда в темном режиме активен:

.primary-button {
  // default style: black button with white text
  background-color: #222;
  color: #f5f5f5;

  // dark mode style: white button with black text 
  .dark & {
    background-color: #f5f5f5;
    color: #222;
  }
}

Теперь пришло время сохранить выбранный режим к Местное хранение Так что выбранный режим будет сохраняться, даже если приложение сбрасывается. Чтобы добиться этого, сначала я вернусь к Useffect Крючок и включите следующий код в него:

useEffect(() => {
  if (mode === 'dark') {
     document.body.classList.add('dark');
  } else {
     document.body.classList.remove('dark');
  }
  localStorage.setItem('mode', mode); // mode saved to local storage
}, [mode]);

Затем я поднимаю вверх и создаю полезную функцию под названием GetDefaultMode на Глобальный уровень Отказ Эта функция получит сохраненный режим из локального хранилища и определяет режим по умолчанию, когда приложение запускается. Если ранее не выбран темный режим, режим по умолчанию будет «свет»:

function getDefaultMode() {
  const savedMode = localStorage.getItem('mode');
  return savedMode ? savedMode : 'light';
}

Теперь мне нужно позвонить эту функцию внутри Уместите Крюк, который я ранее добавил внутри моего Приложение компонент. Я заменил свет Параметр с GetDefaultMode Функция:

const [mode, setMode] = useState(getDefaultMode());

Окончательный код выглядит так, как это в конце концов:

import React, { useEffect, useState } from 'react';

function getDefaultMode() {
  const savedMode = localStorage.getItem('mode');
  return savedMode ? savedMode : 'light';
}

function App() {
    const [mode, setMode] = useState(getDefaultMode()); 

    useEffect(() => {
      if (mode === 'dark') {
        document.body.classList.add('dark');
      } else {
        document.body.classList.remove('dark');
      }
      localStorage.setItem('mode', mode);
    }, [mode]);

    return (
      
setMode(mode === 'dark' ? 'light' : 'dark') } > {mode === 'dark' ? 'Light mode' : 'Dark mode'} {/* my other elements */}
) }

Оригинал: “https://dev.to/ece/a-simple-way-of-adding-dark-mode-to-your-react-app-using-hooks-and-saving-it-to-the-local-storage-2g85”