Последнее обновление 04.01.2023 — Василий Иванов
Нет никаких сомнений в том, что темный режим сейчас в моде. Все больше и больше приложений предлагают возможность переключения на темную тему, и на то есть веские причины. Если вы хотите добавить темный режим в свое приложение React, вам нужно сделать несколько вещей. В этой статье вы узнаете, как добавить темный режим в приложение React с помощью хуков useState и useEffect.
Что такое темный режим?
Темный режим — это тема, которая переключает цветовую палитру приложения со светлого на темный. В настоящее время большинство приложений имеют возможность переключения между светлым и темным режимами. Это может быть полезно для тех, кто предпочитает работать в темноте, или для тех, кому так легче для глаз.
Зачем использовать темный режим?
Существует ряд причин, по которым вы можете захотеть использовать темный режим в своем приложении React. Давайте рассмотрим несколько самых популярных из них.
1. Увеличьте срок службы батареи
Одним из преимуществ темного режима является то, что он может помочь увеличить время автономной работы на устройствах с дисплеями OLED или AMOLED. Это связано с тем, что более темные пиксели требуют меньше энергии для отображения.
2. Уменьшите нагрузку на глаза
Если вы обнаружите, что просматриваете веб-страницы или используете приложения ночью, темный режим может помочь снизить нагрузку на глаза. Это связано с тем, что он уменьшает количество яркого белого или синего света, излучаемого экраном.
3. Создайте более захватывающий опыт
Некоторые люди считают, что темный режим создает более захватывающий опыт. Это может быть особенно актуально при использовании приложений или веб-сайтов с большим количеством контента, таких как новостные приложения или социальные сети.
Как добавить темный режим в приложение React
Добавить темный режим в приложение React относительно просто. Шаги, необходимые для добавления темного режима в ваше приложение React, перечислены ниже.
Прежде чем мы начнем, вам нужно убедиться, что у вас настроено приложение React.
1. Используйте хук useState
Первое, что вам нужно сделать, это создать переменную состояния для отслеживания текущей темы вашего приложения. Это можно сделать с помощью хука useState. Для этого у вас должно быть базовое понимание того, как работать с хуком useState.
import React, { useState } from 'react';
function App() {
const [theme, setTheme] = useState('light');
return (
<div className={`App ${theme}`}>
<h1>Hello, world!</h1>
</div>
);
}
export default App;Фрагмент кода импортирует хук useState из React и создает переменную состояния с именем theme. Переменная темы отслеживает текущую тему приложения, для которой код по умолчанию устанавливает «светлую».
2. Добавьте кнопку переключения
Затем добавьте в приложение кнопку-переключатель, чтобы пользователи могли переключаться между светлым и темным режимом. Это можно сделать с помощью следующего кода:
import React, { useState } from 'react';
function App() {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
if (theme === 'light') {
setTheme('dark');
} else {
setTheme('light');
}
};
return (
<div className={`App ${theme}`}>
<button onClick={toggleTheme}>Toggle Theme</button>
<h1>Hello, world!</h1>
</div>
);
}
export default App;Приведенный выше фрагмент кода включает функцию toggleTheme для изменения переменной состояния темы между «светлой» и «темной», а также кнопку для вызова функции toggleTheme при нажатии.
3. Используйте хук useEffect
Затем используйте хук useEffect для динамического обновления темы приложения на основе переменной состояния темы.
import React, { useState, useEffect } from 'react';
function App() {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
if (theme === 'light') {
setTheme('dark');
} else {
setTheme('light');
}
};
useEffect(() => {
document.body.className = theme;
}, [theme]);
return (
<div className={`App ${theme}`}>
<button onClick={toggleTheme}>Toggle Theme</button>
<h1>Hello, world!</h1>
</div>
);
}
export default App;Фрагмент кода выше использует хук useEffect для обновления className элемента document.body на основе переменной состояния темы. Это позволяет динамически обновлять CSS приложения в зависимости от темы.
4. Добавление CSS для темного и светлого режимов
Затем добавьте CSS для темного и светлого режимов. Вы можете сделать это, создав файл с именем «darkMode.css» и добавив следующий CSS:
.dark {
background-color: #333;
color: #fff;
}
.light {
background-color: #fff;
color: #333;
}После этого вам нужно будет импортировать файл CSS в ваше приложение. Это можно сделать с помощью следующего кода:
import React, { useState, useEffect } from 'react';
import './darkMode.css';
function App() {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
if (theme === 'light') {
setTheme('dark');
} else {
setTheme('light');
}
};
useEffect(() => {
document.body.className = theme;
}, [theme]);
return (
<div className={`App ${theme}`}>
<button onClick={toggleTheme}>Toggle Theme</button>
<h1>Hello, world!</h1>
</div>
);
}
export default App;5. Переключитесь на разные режимы
Теперь, когда вы добавили CSS для темного и светлого режимов, вы можете переключаться между ними, нажимая кнопку переключения. Для этого вам сначала нужно запустить сервер разработки. Вы можете сделать это, выполнив следующую команду терминала:
npm start
После этого вы можете открыть приложение в браузере и нажать кнопку переключения для переключения между темным и светлым режимами.
Дополнительные параметры темного режима в React
Если вы хотите, чтобы тема сохранялась при обновлении страницы, вы можете использовать API localStorage для хранения данных. Для этого сначала нужно добавить в приложение следующий код:
import React, { useState, useEffect } from 'react';
import './darkMode.css';
function App() {
const [theme, setTheme] = useState(
localStorage.getItem('theme') || 'light'
);
const toggleTheme = () => {
if (theme === 'light') {
setTheme('dark');
} else {
setTheme('light');
}
};
useEffect(() => {
localStorage.setItem('theme', theme);
document.body.className = theme;
}, [theme]);
return (
<div className={`App ${theme}`}>
<button onClick={toggleTheme}>Toggle Theme</button>
<h1>Hello, world!</h1>
</div>
);
}
export default App;Фрагмент кода выше включает возможность сохранить тему после обновления страницы. Это делается с помощью localStorage API. Во-первых, он проверяет, хранится ли тема в localStorage.
Если есть тема, эта тема используется. В противном случае используется «светлая» тема. Затем в хук useEffect добавляется код для сохранения темы в localStorage. Это гарантирует, что тема сохраняется при обновлении страницы.
Темный режим не заканчивается в React
Есть много способов добавить темный режим в ваше приложение React. В этой статье показан один из способов сделать это с помощью хуков useState и useEffect. Тем не менее, есть много других способов сделать это.
Например, вы можете использовать React Context API для создания поставщика тем. Это позволит вам обернуть все ваше приложение в компонент поставщика темы и получить доступ к теме в любом месте вашего приложения.
Вы также можете включить темный режим в своем браузере и использовать медиа-запросы CSS для применения различных стилей в зависимости от темы браузера.
