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

Хотя на самом деле мы не собираемся рассматривать альтернативные преимущества использования темного режима в этой статье, мы рассмотрим его реализацию с помощью компонентов React и Styled!

Что мы собираемся построить

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

Вот несколько инструментов, которые помогут нам создать приложение:

  1. Create React App (Начальная загрузка приложения)
  2. Стилизованные компоненты (оформление)
  3. Локальное хранилище (сохранить выбор пользователя)

Посмотреть демо готового проекта можно здесь.

Часть 1: Загрузка приложения

Как упоминалось выше, мы собираемся использовать Create React App как способ запустить наше приложение. Если у вас еще не установлено приложение Create React, вы можете установить его с помощью:

npm install -g create-react-app

Чтобы инициализировать наше новое приложение, запустите:

create-react-app dark-mode-toggle

Перейдите в наш новый каталог проекта:

cd dark-mode-toggle

И наконец, давайте установим единственную дополнительную зависимость, которая нам понадобится - стилизованные компоненты:

npm install styled-components --save

Часть 2: Создайте приложение с легкой темой

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

  1. Внутри каталога src создайте две новые папки - components и themes
  2. В каталоге src/components создайте файл App.js, Button.js, Card.js иContainer.js
  3. В каталоге src/themes создайте файл light.js
  4. В каталоге src создайте файлы index.js и style.css

Когда все вышеизложенное будет завершено, ваша структура папок должна напоминать:

.
└── src
    ├── index.js
    ├── style.css
    ├── themes
    |   └── light.js
    └── components
        ├── App.js
        ├── Button.js
        ├── Card.js
        └── Container.js

А теперь давайте начнем писать реальный код! Начнем с файла src/themes/light.js, который будет содержать все цвета, необходимые для светового режима.

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

Переходим к нашему src/index.js файлу для инициализации нашего приложения React:

В файл src/index.js мы импортируем файл src/style.css. Чтобы было ясно, эта таблица стилей не будет содержать никаких стилей нашей темы, а будет одно правило, чтобы просто удалить поле по умолчанию для элемента body:

Следующий компонент, на котором мы собираемся сосредоточиться, изначально будет просто предоставлять светлую тему, которую мы создали выше, но мы вернемся к ней позже в этой статье, когда добавим логику для переключения темной темы. Итак, в src/components/App.js мы собираемся:

  1. Импортируйте светлую тему, которую мы создали выше
  2. Предоставьте нашу тему, используя ThemeProvider стилизованного компонента
  3. Импортируйте и визуализируйте компоненты, которые содержит наше приложение.

В только что созданном src/components/App.js файле мы ссылаемся на три оставшихся компонента - Container, Card и Button.

  • Container отвечает за центрирование нашего контента в области просмотра.
  • Card отвечает за визуальное отделение нашего контента от остальной части страницы.
  • Компонент Button будет использоваться для переключения темного режима позже в статье.

При создании каждого из этих компонентов ниже мы будем ссылаться на тему, которая представлена ​​в src/components/App.js файле ThemeProvider. Вы можете узнать больше о том, как темы работают со стилизованными компонентами здесь.

Для наших целей каждый раз, когда мы ссылаемся на цвет, мы извлекаем его из объекта темы, используя ${props => props.theme.colors.ourColorProperty}:

На этом этапе у вас должно быть приложение следующего вида:

Часть 3: Создание темной темы

Поскольку у нас есть базовое приложение, использующее тему, давайте добавим новую тему! Создайте новый файл в каталоге src/themes с именем dark.js.

Внутри этого файла мы скопируем и вставим объект из src/themes/light.js и просто изменим шестнадцатеричные коды:

Чтобы проверить правильность работы нашей новой темы, давайте импортируем ее в наш src/components/App.js файл и заменим его нашим поставщиком тем:

После внесения вышеуказанных изменений вы должны увидеть темную версию приложения:

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

  1. Использование хука useState для нашего useDarkMode состояния
  2. Условная передача темы в ThemeProvider на основе состояния useDarkMode
  3. Переключение состояния useDarkMode при нажатии кнопки
  4. Сохранение состояния useDarkMode в локальном хранилище, чтобы запомнить предпочтения пользователя при возврате

После того, как все это подключено, нажатие кнопки должно переключить режим темы и сохранить его в локальном хранилище. Вы можете проверить это, включив темный режим и обновив, и вы все равно должны увидеть темный режим!

Последние мысли

  • button - не лучший из шаблонов UX для переключения темы, поэтому в производственном приложении вы можете рассмотреть что-нибудь более подходящее, например, флажок!
  • Хотя эта статья была посвящена темному режиму, количество тем, которые вы могли бы предложить, не ограничено, поэтому вы можете поменять логическое значение на какой-то выбор, который предоставляет больше возможностей для конечного пользователя.
  • Как упоминалось немного ранее, соглашения об именах, используемые в теме, далеки от идеала для более крупного приложения, поэтому, как правило, следует уделять больше внимания именам.
  • Цвета, используемые в этом приложении, взяты из Nord Color Theme.