Простой темный режим (и несколько цветовых тем!) в React

Темный режим стал популярной функцией, предлагающей пользователям выбор между светлой и темной темами интерфейса. В этой статье мы рассмотрим, как добавить темный режим и несколько цветовых тем в приложение React. Мы будем использовать CSS и JavaScript для создания гибкой и удобной системы тем.

Основы создания темного режима

Подготовка окружения

Для начала создадим новое приложение React с помощью Create React App. Это стандартный способ быстро запустить новое приложение React.

npx create-react-app my-theme-app

cd my-theme-app

npm start

Основная структура приложения

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

// src/App.js

import React, { useState } from 'react';

import './App.css';

function App() {

const [theme, setTheme] = useState('light');

const toggleTheme = () => {

setTheme(theme === 'light' ? 'dark' : 'light');

};

return (

<div className={`app ${theme}`}>

<header className="app-header">

<h1>Простой Темный Режим в React</h1>

<button onClick={toggleTheme}>

Переключить Тему

</button>

</header>

</div>

);

}

export default App;

Добавление CSS для тем

Теперь создадим CSS-файл, который будет содержать стили для светлой и темной тем.

/* src/App.css */

.app {

text-align: center;

transition: background-color 0.5s, color 0.5s;

}

.app.light {

background-color: #ffffff;

color: #000000;

}

.app.dark {

background-color: #000000;

color: #ffffff;

}

.app-header {

padding: 20px;

}

Преимущества

• Удобство для пользователей: темный режим может уменьшить нагрузку на глаза в темное время суток.
• Гибкость: легкость добавления новых тем.
• Простота реализации: минимальные изменения в коде для достижения максимального эффекта.

ОНЛАЙН-ПРАКТИКУМ

ЗАПУСК DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ

ЧТО БУДЕТ НА ОБУЧЕНИИ?

• ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
• Где и как применять? Потестируем модель после установки на разных задачах
• Как дообучить модель под себя?

Участвовать бесплатно

Расширение функциональности: несколько цветовых тем

Добавление новых тем

Для добавления новых тем расширим наш state в компоненте App и добавим новые классы в CSS.

// src/App.js

import React, { useState } from 'react';

import './App.css';

function App() {

const [theme, setTheme] = useState('light');

const themes = ['light', 'dark', 'blue', 'green'];

const toggleTheme = () => {

const currentIndex = themes.indexOf(theme);

const nextIndex = (currentIndex + 1) % themes.length;

setTheme(themes[nextIndex]);

};

return (

<div className={`app ${theme}`}>

<header className="app-header">

<h1>Простой Темный Режим в React</h1>

<button onClick={toggleTheme}>

Переключить Тему

</button>

</header>

</div>

);

}

export default App;

Обновление CSS для новых тем

Обновим файл CSS для поддержки новых цветовых тем.

/* src/App.css */

.app {

text-align: center;

transition: background-color 0.5s, color 0.5s;

}

.app.light {

background-color: #ffffff;

color: #000000;

}

.app.dark {

background-color: #000000;

color: #ffffff;

}

.app.blue {

background-color: #001f3f;

color: #ffffff;

}

.app.green {

background-color: #2ecc40;

color: #ffffff;

}

.app-header {

padding: 20px;

}

Сохранение выбора темы пользователя

Использование localStorage

Чтобы сохранять выбор пользователя между сессиями, будем использовать localStorage.

// src/App.js

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

import './App.css';

function App() {

const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');

useEffect(() => {

localStorage.setItem('theme', theme);

}, [theme]);

const themes = ['light', 'dark', 'blue', 'green'];

const toggleTheme = () => {

const currentIndex = themes.indexOf(theme);

const nextIndex = (currentIndex + 1) % themes.length;

setTheme(themes[nextIndex]);

};

return (

<div className={`app ${theme}`}>

<header className="app-header">

<h1>Простой Темный Режим в React</h1>

<button onClick={toggleTheme}>

Переключить Тему

</button>

</header>

</div>

);

}

export default App;

Заключение

Мы рассмотрели, как добавить темный режим и несколько цветовых тем в приложение React. Используя простые методы CSS и JavaScript, мы создали гибкую систему тем, которая может быть легко расширена и модифицирована. Теперь пользователи могут выбирать предпочитаемую тему, которая сохраняется между сессиями благодаря localStorage.