Источник: 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 просто. При желании можно создать даже сложные темы. Например, на странице для каждого режима можно переключаться между темными и светлыми темами с разными цветами.
Читайте также:
Перевод статьи Mehdi Aoussiad: Implementing The Dark Mode Using React and Styled Components