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

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

Что вам понадобится

Для реализации темного режима в приложении на React вам понадобятся следующие инструменты и технологии:

1. React: Это библиотека для создания пользовательских интерфейсов, которая позволяет вам строить компоненты и управлять их состоянием. Убедитесь, что у вас установлена последняя версия React.

2. CSS: Для стилизации вашего приложения вам понадобятся знания CSS. Вы будете использовать его для создания различных стилей для светлого и темного режимов.

3. JavaScript: Поскольку React основан на JavaScript, вам необходимо знать основы этого языка. Вы будете использовать его для управления состоянием вашего приложения и переключения между темами.

4. Локальное хранилище (localStorage): Это API браузера, которое позволяет сохранять данные на стороне клиента. Вы будете использовать его для хранения предпочтений пользователя относительно темного или светлого режима, чтобы эти настройки сохранялись даже после перезагрузки страницы.

5. Редактор кода: Вам понадобится удобный редактор кода, такой как Visual Studio Code, для написания и редактирования вашего кода.

6. Браузер: Для тестирования вашего приложения вам нужен современный браузер, который поддерживает все необходимые функции JavaScript и CSS.

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

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

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

React Project: Creating a dark mode toggle using the Context API

Создайте компонент кнопки

Компонент кнопки будет отвечать за переключение темы с темной на светлую. В реальном приложении эта кнопка может быть частью компонента Navbar.

В папке src создайте новый файл с именем Button.js и добавьте следующий код.

import { useState } from 'react'
 
export default function Button() {
    const [theme, settheme] = useState("dark")
 
    const handleToggle = () => {
	    const newTheme = theme === "light" ? "dark" : "light"
	    settheme(newTheme)
    }
    return (
        <>
            
                {theme=== "light" ? dark : light}
            
        
    )
}

Во-первых, импортируйте хук useState() из React. Вы будете использовать его для отслеживания текущей темы.

В компоненте Button инициализируйте темное состояние. Функция handleToggle() позаботится о функции переключения. Он запускается каждый раз, когда нажимается кнопка.

Этот компонент также переключает текст кнопки при изменении темы.

Чтобы отобразить компонент Button, импортируйте его в App.js.

import Button from './Button';
function App() {
    return (
        

            
        

    );
}
 
export default App;

Интересные факты

Вот несколько интересных фактов о создании темного режима в React без использования React Context:

1. Использование локального состояния: Вместо React Context можно использовать локальное состояние компонента для управления темным режимом. Например, можно создать состояние isDarkMode с помощью хука useState и переключать его при нажатии на кнопку. Это позволяет легко управлять темой на уровне отдельного компонента, что может быть полезно для небольших приложений.

2. CSS-переменные: Для реализации темного режима можно использовать CSS-переменные. Определив переменные для светлой и темной тем, можно динамически менять их значения в зависимости от состояния. Это позволяет избежать дублирования стилей и упрощает поддержку тем.

3. Сохранение предпочтений пользователя: Можно использовать localStorage для сохранения предпочтений пользователя относительно темного режима. При загрузке приложения можно проверять, есть ли сохраненное значение, и устанавливать соответствующую тему. Это улучшает пользовательский опыт, так как настройки сохраняются между сессиями.

Эти подходы позволяют эффективно реализовать темный режим в React без необходимости использования более сложных решений, таких как React Context.

Stop Using Create React App

Создайте стили CSS

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

Начнем с определения базовых стилей для светлой темы. Обычно это включает в себя светлый фон и темный текст. Например:

body {
background-color: #ffffff; /* Светлый фон */
color: #000000; /* Темный текст */
}

.button {
background-color: #007bff; /* Цвет кнопки /
color: #ffffff; / Цвет текста на кнопке */
}

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

body.dark-mode {
background-color: #121212; /* Темный фон */
color: #ffffff; /* Светлый текст */
}

.button.dark-mode {
background-color: #1e90ff; /* Цвет кнопки в темном режиме /
color: #ffffff; / Цвет текста на кнопке в темном режиме */
}

Важно отметить, что для переключения между темами мы будем использовать классы. Например, добавление класса dark-mode к элементу body будет активировать темные стили. Это позволяет легко управлять стилями с помощью JavaScript, просто добавляя или удаляя этот класс.

Также стоит учесть, что вы можете расширить стили, добавив дополнительные элементы, такие как ссылки, заголовки и другие компоненты, чтобы они также меняли свои стили в зависимости от выбранной темы. Например:

a {
color: #007bff; /* Цвет ссылок в светлом режиме */
}

body.dark-mode a {
color: #1e90ff; /* Цвет ссылок в темном режиме */
}

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

Изменение компонента кнопки для переключения стилей

Чтобы переключать стили, определенные в файле CSS, вам необходимо установить данные в элементе body в функции handleToggle().

В Button.js измените handleToggle() следующим образом:

const handleToggle = () => {
    const newTheme = theme ==="light" ? "dark" : "light"
    settheme(newTheme)
    document.body.dataset.theme = theme
}

Если вы нажмете на кнопку, фон должен измениться с темного на светлый или со светлого на темный. Однако, если вы обновите страницу, тема сбрасывается. Чтобы сохранить настройку темы, сохраните настройку темы в локальном хранилище.

Провайдер темы в React JS за 7 минут | React Theme Provider

Сохранение пользовательских настроек в локальном хранилище

Для сохранения пользовательских настроек в локальном хранилище браузера мы можем использовать API localStorage. Это позволит нам запоминать выбор пользователя между темным и светлым режимами даже после перезагрузки страницы или закрытия браузера.

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

Вот пример функции, которая может это сделать:

const saveThemeToLocalStorage = (theme) => {
localStorage.setItem('theme', theme);
};

Теперь, когда пользователь переключает тему, мы можем вызывать эту функцию, передавая ей текущее состояние темы. Например:

const toggleTheme = () => {
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
setCurrentTheme(newTheme);
saveThemeToLocalStorage(newTheme);
};

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

Пример кода для загрузки темы:

useEffect(() => {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
setCurrentTheme(savedTheme);
} else {
setCurrentTheme('light'); // Устанавливаем светлую тему по умолчанию
}
}, []);

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

Получение предпочтений пользователя из настроек браузера

Для еще более удобного взаимодействия с пользователем вы можете использовать мультимедийную функцию CSS Preferences-Color-Scheme для установки темы. Это должно отражать системные настройки пользователя, которыми он может управлять через свою ОС или браузер. Настройка может быть светлой или темной. В вашем приложении вам нужно будет проверить этот параметр сразу после загрузки компонента кнопки. Это означает реализацию этой функциональности в хуке useEffect().

Во-первых, создайте функцию, которая извлекает предпочтения пользователя.

В Button.js добавьте следующее.

const getMediaQueryPreference = () => {
    const mediaQuery = "(prefers-color-scheme: dark)";
    const mql = window.matchMedia(mediaQuery);
    const hasPreference = typeof mql.matches === "boolean";
    
    if (hasPreference) {
        return mql.matches ? "dark" : "light";
    }
};

Затем измените хук useEffect(), чтобы получить предпочтение медиа-запроса и использовать его, если в локальном хранилище не задана тема.

useEffect(() => {
    const userSetPreference = getUserSetPreference();
    const mediaQueryPreference = getMediaQueryPreference();
 
    if (userSetPreference) {
        settheme(userSetPreference)
    } else {
        settheme(mediaQueryPreference)
    }
 
    document.body.dataset.theme = theme
}, [theme])

Если вы перезапустите приложение, тема должна соответствовать настройкам вашей системы.

Использование React Context для переключения темного режима

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

Тем не менее, если вы все же хотите рассмотреть возможность использования React Context, вот краткое объяснение, как это можно сделать. React Context предоставляет способ передачи данных через дерево компонентов без необходимости передавать пропсы на каждом уровне. Это особенно полезно для управления глобальным состоянием, таким как тема приложения.

Для начала, вам нужно создать контекст для темы. Вы можете сделать это, используя функцию createContext из React. Затем создайте провайдер, который будет оборачивать ваше приложение и предоставлять доступ к текущей теме и функции для ее изменения.

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

const ThemeContext = createContext();
const ThemeProvider = ({ children }) => {
const [isDarkMode, setIsDarkMode] = useState(false);
const toggleTheme = () => {
setIsDarkMode(prevMode => !prevMode);
};

return (
<ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
export { ThemeProvider, ThemeContext };


Теперь, когда вы создали контекст и провайдер, вы можете использовать их в своем приложении. Оберните ваше приложение в ThemeProvider, чтобы все компоненты могли получить доступ к текущей теме и функции переключения.
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import App from './App';

const Root = () => (


);
export default Root;

Внутри компонентов, где вам нужно использовать тему, вы можете использовать хук useContext, чтобы получить доступ к текущему состоянию темы и функции для ее переключения.
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const ThemeToggleButton = () => {
const { isDarkMode, toggleTheme } = useContext(ThemeContext);
return (
<button onClick={toggleTheme}>
Переключить на {isDarkMode ? 'светлый' : 'темный'} режим
</button>
);
};


Этот подход позволяет легко управлять темой на уровне всего приложения, и вы можете добавлять дополнительные компоненты, которые также будут реагировать на изменения темы, просто используя контекст.
Таким образом, использование React Context для переключения темного режима предоставляет мощный инструмент для управления состоянием темы в более сложных приложениях, где требуется взаимодействие между несколькими компонентами. Однако, если ваше приложение небольшое или вы хотите сохранить простоту, вы можете реализовать темный режим, как описано в предыдущих разделах, без необходимости в контексте.
Тестирование и отладка темного режима
После реализации темного режима в вашем приложении на React важно провести тщательное тестирование и отладку, чтобы убедиться, что все элементы интерфейса корректно отображаются и функционируют в обоих режимах. В этом разделе мы рассмотрим ключевые аспекты тестирования темного режима, включая проверку визуальных элементов, взаимодействие с пользователем и производительность.
1. Визуальная проверка элементов интерфейса
Первым шагом в тестировании темного режима является визуальная проверка всех компонентов вашего приложения. Убедитесь, что цвета текста, фонов, кнопок и других элементов интерфейса хорошо контрастируют друг с другом. Это поможет избежать проблем с читаемостью и восприятием информации. Используйте инструменты для проверки контрастности, такие как WebAIM Contrast Checker, чтобы убедиться, что выбранные вами цвета соответствуют стандартам доступности.
2. Тестирование взаимодействия с пользователем
После визуальной проверки важно протестировать, как пользователи взаимодействуют с вашим приложением в темном режиме. Проверьте, что все интерактивные элементы, такие как кнопки, ссылки и формы, работают корректно. Убедитесь, что состояния элементов (например, наведение, нажатие) также отображаются правильно. Для этого можно использовать инструменты автоматизированного тестирования, такие как React Testing Library или Jest, чтобы создать тесты, которые проверяют поведение компонентов в разных режимах.
3. Тестирование на различных устройствах и браузерах
Темный режим может отображаться по-разному на различных устройствах и браузерах. Поэтому важно протестировать ваше приложение на нескольких платформах, включая мобильные устройства и настольные браузеры. Убедитесь, что темный режим работает корректно на популярных браузерах, таких как Chrome, Firefox, Safari и Edge. Также проверьте, как ваше приложение выглядит на различных разрешениях экрана, чтобы гарантировать, что пользовательский интерфейс адаптивен и удобен для всех пользователей.
4. Производительность приложения
Темный режим может повлиять на производительность вашего приложения, особенно если вы используете сложные стили или анимации. Проведите тестирование производительности, чтобы убедиться, что переключение между режимами происходит быстро и без задержек. Используйте инструменты, такие как Chrome DevTools, чтобы анализировать время загрузки и рендеринга компонентов в темном режиме. Оптимизируйте ваши стили и компоненты, если вы заметили какие-либо проблемы с производительностью.
5. Обратная связь от пользователей
Не забывайте собирать обратную связь от пользователей о темном режиме. Это может быть сделано через опросы, отзывы или тестирование с пользователями. Обратная связь поможет вам выявить возможные проблемы и улучшить пользовательский опыт. Обратите внимание на комментарии о читаемости, удобстве использования и общем впечатлении от темного режима.
Тестирование и отладка темного режима — это важные этапы, которые помогут вам создать качественное и удобное приложение. Следуя описанным рекомендациям, вы сможете обеспечить плавный и приятный опыт для пользователей, независимо от того, какой режим они выберут.
Вопрос-ответ
Как сделать темную тему в React?
Создадим create-react-app проект. Добавим контекст, в котором будем хранить текущую тему. Напишем переключатель для изменения темы. Объявим переменные для каждой темы, которые будут влиять на стили компонентов.
Когда использовать React Context?
Обычно контекст используется, если необходимо обеспечить доступ данных во многих компонентах на разных уровнях вложенности. По возможности не используйте его, так как это усложняет повторное использование компонентов.
Почему стоит использовать React?
Зачем нужен React Этот язык программирования позволяет создавать интерактивные интерфейсы. То есть реагирующие на действия пользователей. Например, вы можете написать комментарий к странице и опубликовать его одним нажатием кнопки. Он появится на сайте без обновления страницы.
Почему выбирают React?
Почему мы выбираем React для проектов React и его расширения, такие как React Native, могут восполнить практически любой стек технологий. Этот инструмент можно использовать как для запуска приложений и веб-платформ с нуля, так и для их доработки и добавления новых функций.
Советы
СОВЕТ №1
Используйте состояние компонента для управления темным режимом. Создайте локальное состояние с помощью хука useState, чтобы отслеживать, включен ли темный режим. Это позволит вам легко переключать стили в зависимости от значения состояния.
СОВЕТ №2
Применяйте CSS-классы для изменения стилей. Создайте два отдельных класса для светлой и темной тем, и динамически добавляйте или удаляйте их в зависимости от состояния темного режима. Это упростит управление стилями и сделает код более читабельным.
СОВЕТ №3
Используйте localStorage для сохранения предпочтений пользователя. При переключении темного режима сохраняйте текущее состояние в localStorage. Это позволит пользователю сохранять свои настройки даже после перезагрузки страницы.
СОВЕТ №4
Добавьте кнопку для переключения темного режима. Создайте кнопку или переключатель, который будет изменять состояние темного режима при нажатии. Это улучшит пользовательский интерфейс и сделает переключение более интуитивным.