Нет никаких сомнений в том, что темный режим сейчас в моде. Все больше и больше приложений предлагают возможность переключения на темную тему, и на то есть веские причины. Если вы хотите добавить темный режим в свое приложение React, вам нужно сделать несколько вещей. В этой статье вы узнаете, как добавить темный режим в приложение React с помощью хуков useState и useEffect.

Что такое темный режим?

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

Зачем использовать темный режим?

Существует ряд причин, по которым вы можете захотеть использовать темный режим в своем приложении React. Давайте рассмотрим несколько самых популярных из них.

1. Увеличьте срок службы батареи

Одним из преимуществ темного режима является то, что он может помочь увеличить время автономной работы на устройствах с дисплеями OLED или AMOLED. Это связано с тем, что более темные пиксели требуют меньше энергии для отображения.

instagram viewer

2. Уменьшить нагрузку на глаза

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

3. Создайте более захватывающий опыт

Некоторые люди считают, что темный режим создает более захватывающий опыт. Это может быть особенно актуально при использовании приложений или веб-сайтов с большим количеством контента, таких как новостные приложения или социальные сети.

Как добавить темный режим в приложение React

Добавить темный режим в приложение React относительно просто. Шаги, необходимые для добавления темного режима в ваше приложение React, перечислены ниже.

Прежде чем мы начнем, вам нужно убедиться, что у вас есть Настройка приложения React.

1. Используйте хук useState

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

импорт Реагировать, {useState} из 'реагировать';
функцияПриложение() {
 const [тема, setTheme] = useState('легкий');
возвращаться (
`Приложение ${тема}`}>
<h1>Привет, мир!</h1>
</div>
 );
}
экспортдефолт Приложение;

Фрагмент кода импортирует хук useState из React и создает переменную состояния с именем theme. Переменная темы отслеживает текущую тему приложения, для которой код по умолчанию устанавливает «светлую».

2. Добавьте кнопку переключения

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

импорт Реагировать, {useState} из 'реагировать';
функцияПриложение() {
 const [тема, setTheme] = useState('легкий');
константа toggleTheme = () => {
 если (тема 'легкий') {
 установить тему ('темный');
 } еще {
 установить тему ('легкий');
 }
 };
возвращаться (
`Приложение ${тема}`}>
<кнопка onClick={toggleTheme}>Переключить тему</button>
<h1>Привет, мир!</h1>
</div>
 );
}
экспортдефолт Приложение;

Приведенный выше фрагмент кода включает функцию toggleTheme для изменения переменной состояния темы между «светлой» и «темной», а также кнопку для вызова функции toggleTheme при нажатии.

3. Используйте хук useEffect

Затем используйте хук useEffect для динамического обновления темы приложения на основе переменной состояния темы.

импорт Реагировать, {useState, useEffect} из 'реагировать';
функцияПриложение() {
 const [тема, setTheme] = useState('легкий');
константа toggleTheme = () => {
 если (тема 'легкий') {
 установить тему ('темный');
 } еще {
 установить тему ('легкий');
 }
 };
 использовать эффект (() => {
документ.body.className = тема;
 }, [тема]);
возвращаться (
`Приложение ${тема}`}>
<кнопка onClick={toggleTheme}>Переключить тему</button>
<h1>Привет, мир!</h1>
</div>
 );
}
экспортдефолт Приложение;

Фрагмент кода выше использует хук useEffect для обновления className элемента document.body на основе переменной состояния темы. Это позволяет динамически обновлять CSS приложения в зависимости от темы.

4. Добавление CSS для темного и светлого режимов

Затем добавьте CSS для темного и светлого режимов. Вы можете сделать это, создав файл с именем «darkMode.css» и добавив следующий CSS:

.темный {
 фоновый цвет: #333;
 цвет: #ффф;
}
.легкий {
 фоновый цвет: #ффф;
 цвет: #333;
}

После этого вам нужно будет импортировать файл CSS в ваше приложение. Это можно сделать с помощью следующего кода:

импорт Реагировать, {useState, useEffect} из 'реагировать';
импорт './darkMode.css';
функцияПриложение() {
 const [тема, setTheme] = useState('легкий');
константа toggleTheme = () => {
 если (тема 'легкий') {
 установить тему ('темный');
 } еще {
 установить тему ('легкий');
 }
 };
 использовать эффект (() => {
документ.body.className = тема;
 }, [тема]);
возвращаться (
`Приложение ${тема}`}>
<кнопка onClick={toggleTheme}>Переключить тему</button>
<h1>Привет, мир!</h1>
</div>
 );
}
экспортдефолт Приложение;

5. Переключение в разные режимы

Теперь, когда вы добавили CSS для темного и светлого режимов, вы можете переключаться между ними, нажимая кнопку переключения. Для этого вам сначала нужно запустить сервер разработки. Вы можете сделать это, выполнив следующую команду терминала:

нпм Начало

После этого вы можете открыть приложение в браузере и нажать кнопку переключения для переключения между темным и светлым режимами.

Дополнительные параметры темного режима в React

Если вы хотите, чтобы тема сохранялась при обновлении страницы, вы можете использовать localStorage API для хранения данных. Для этого сначала нужно добавить в приложение следующий код:

импорт Реагировать, {useState, useEffect} из 'реагировать';
импорт './darkMode.css';
функцияПриложение() {
константа [тема, setTheme] = useState(
 localStorage.getItem('тема') || 'легкий'
 );
константа toggleTheme = () => {
 если (тема 'легкий') {
 установить тему ('темный');
 } еще {
 установить тему ('легкий');
 }
 };
 использовать эффект (() => {
 localStorage.setItem('тема', тема);
документ.body.className = тема;
 }, [тема]);
возвращаться (
`Приложение ${тема}`}>
<кнопка onClick={toggleTheme}>Переключить тему</button>
<h1>Привет, мир!</h1>
</div>
 );
}
экспортдефолт Приложение;

Фрагмент кода выше включает возможность сохранить тему после обновления страницы. Это делается с помощью localStorage API. Во-первых, он проверяет, хранится ли тема в localStorage.

Если есть тема, эта тема используется. В противном случае используется «светлая» тема. Затем в хук useEffect добавляется код для сохранения темы в localStorage. Это гарантирует, что тема сохраняется при обновлении страницы.

Темный режим не заканчивается в React

Есть много способов добавить темный режим в ваше приложение React. В этой статье показан один из способов сделать это с помощью хуков useState и useEffect. Тем не менее, есть много других способов сделать это.

Например, вы можете использовать React Context API для создания поставщика тем. Это позволит вам обернуть все ваше приложение в компонент поставщика темы и получить доступ к теме в любом месте вашего приложения.

Вы также можете включить темный режим в своем браузере и использовать медиа-запросы CSS для применения различных стилей в зависимости от темы браузера.