В этой статье я поделимся своим подходом в режим темного/света, который я недавно реализовал в Реагистрировать проект , который, я думаю, довольно легко понять и для начинающих.
Сначала добавляю Элемент в мой
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”