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

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

Рассмотрим, как можно реализовать темную тему с помощью 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 для изменения цвета и фона в зависимости от используемой темы (темная/светлая).

Пример кода:

//theme.js

import {createGlobalStyle} from "styled-components"export const darkTheme = {
  body: "#000",
  textColor: "#fff",
  headingColor: "lightblue"
}

export const lightTheme = {
  body: "#fff",
  textColor: "#000",
  headingColor: "#d23669"
}

export const GlobalStyles = createGlobalStyle`
 body {
  background: ${props => props.theme.body};
  color: ${props => props.theme.textColor};
  transition: .3s ease;
 }
 h2{
   color: ${props => props.theme.headingColor};
 }
`

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

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

Пример кода:

//App.js

import React, { useState } from "react";
import "./styles.css";
import { ThemeProvider } from "styled-components";
import { darkTheme, lightTheme, GlobalStyles } from "./theme";

function App() {
  const [theme, setTheme] = useState("light");

const switchTheme = () => {
    theme === "light" ? setTheme("dark") : setTheme("light");
  };

return (
    <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
      <GlobalStyles />
      <div className="App">
        <h1>Hello bro!</h1>
        <button onClick={switchTheme}>Switch Theme</button>
      </div>
    </ThemeProvider>
  );
}
export default App;

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

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

Заключение

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

Читайте также:

• Путешествие в мир анимации с Lottie-React-Native
• Почему React негативно повлиял на веб-разработку
• Внутренняя жизнь React Native

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Mehdi Aoussiad: Implementing The Dark Mode Using React and Styled Components