13,8 тыс подписчиков

Создаем темный режим, используя React и Styled Components

12 сентября 202112 сен 2021

2 мин

Источник: Nuances of Programming Темный режим является сегодня весьма востребованной и полезной функциональностью веб-приложений. При просмотре веб-страниц в ночное время многие люди предпочитают использовать затемненный экран, чтобы не напрягать глаза. Рассмотрим, как можно реализовать темную тему с помощью React и styled-components. Итак, начинаем! Настройка проекта Собираясь создать очень простую функциональность темного режима мы будем использовать инструмент create-react-app. Для начала надо с помощью этого инструмента определить проект React. Затем перейдите в каталог проекта, откройте терминал и установите пакет styled-components, используя следующую команду: npm install styled-components Если вы используете Yarn, то можно ввести следующую команду: yarn add styled-components После установки пакета можно будет без каких-либо проблем импортировать styled-componens в свой код. Код проекта Вначале нужно создать файл для темной и светлой тем. Также установим некоторые глобальные стил

Оглавление

Настройка проекта
Код проекта
Заключение

Источник: Nuances of Programming

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

Рассмотрим, как можно реализовать темную тему с помощью React и styled-components. Итак, начинаем!

Настройка проекта

Собираясь создать очень простую функциональность темного режима мы будем использовать инструмент create-react-app. Для начала надо с помощью этого инструмента определить проект React.

Затем перейдите в каталог проекта, откройте терминал и установите пакет styled-components, используя следующую команду:

npm install styled-components

Если вы используете Yarn, то можно ввести следующую команду:

yarn add styled-components

После установки пакета можно будет без каких-либо проблем импортировать styled-componens в свой код.

Код проекта

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

Назовем этот файл theme.js, он будет содержать два объекта со свойствами темной и светлой темы. Помимо этого будем использовать props в styled-components для изменения цвета и фона в зависимости от используемой темы (темная/светлая).

Пример кода:

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

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

Пример кода:

Исходя из приведенных примеров, переключаться между темами можно в зависимости от состояния. Мы импортировали поставщика тем из styled-components, чтобы предоставлять соответствующую значению состояния тему для приложения. Теперь можно переключаться между темной и светлой темами после нажатия на кнопку.

Практический механизм, включая исходный код, можно проверить в CodeSandbox.

Заключение

Как видим, реализовать переключение тем с помощью styled-components просто. При желании можно создать даже сложные темы. Например, на странице для каждого режима можно переключаться между темными и светлыми темами с разными цветами.