Готовое решение для интеграции темной темы в веб-приложение React + Material-UI.
Темная тема была одной из ведущих тенденций дизайна, которая штурмом взяла Интернет, и в настоящее время широко внедряется на множестве веб-сайтов, чтобы не только добавить приятный внешний вид веб-сайту, но и облегчить чтение или просмотр в темная среда.
В этом руководстве вы узнаете, как создать собственную светлую и темную тему Material-UI и подключить ее ко всем компонентам вашего веб-сайта без необходимости переписывать огромные фрагменты кода, встроенные стили или CSS. Мы создадим контекст темы, вашу собственную цветовую палитру как для светлой, так и для темной темы, а также кнопку переключения темы для переключения темы вашего веб-сайта.
Если вы в настоящее время разрабатываете или уже имеете приложение React, работающее на Material-UI, и хотели бы добавить к нему темную тему, это руководство для вас, и вы можете просто перейти к шагу 1 и начать подключение темной темы к своему веб-сайту. ! Если вы еще не запустили приложение React или еще не реализовали Material-UI, но планируете это сделать, выполните шаг ниже.
Шаг 0: установка необходимых зависимостей
На вашем локальном компьютере должна быть установлена последняя версия Node.js. Вы можете скачать Node.js по этой ссылке:
Сначала мы создадим приложение React с помощью этой команды, и в этом руководстве мы будем использовать шаблон TypeScript. В вашем терминале:
$npx create-react-app my-app --template typescript
Кроме того, вам нужно будет установить Material-UI (обязательно), а также значки Material-UI (необязательно, используются только в примере).
$npm install @material-ui/core$npm install @material-ui/icons
Команды были получены по следующим ссылкам по установке и настройке:
Как только вы закончите, вы можете очистить весь существующий код в App.tsx, и мы готовы к работе!
Шаг 1. Создание контекста для вашей темы
Контексты похожи на «глобальные свойства» в приложении React и несут значения свойств, которые мы можем использовать во всем приложении. Мы создадим один для хранения значения вашей темы, а также функцию для изменения этой темы. В папке src (или в папке, содержащей все ваши контексты) добавьте файл с именем ThemeContext. В этом файле мы начнем с создания контекста темы с режимом освещения по умолчанию.
В том же файле мы создадим оболочку контекста, где любые дочерние компоненты в оболочке будут содержать свойства контекста. Мы будем использовать перехватчик React useState для сохранения текущего режима темы, в котором мы находимся, вне зависимости от того, находимся мы в облегченном режиме или нет, и создадим функцию, которая переключает тему при вызове.
Поскольку состояния в контекстах React не сохраняются при обновлении страницы, мы будем использовать локальное хранилище, чтобы быть местом, где мы храним пару ключ / значение, чтобы сохранить значение нашей темы при обновлении страницы, и даже когда пользователь покидает сайт и повторно посещает это снова.
Начальное состояние для состояния lightMode принимается как:
!(localStorage.getItem("theme") === "dark")
потому что мы хотим сохранить токен, когда мы переключаемся в темный режим, а также чтобы исходная тема была светлой. Кроме того, всякий раз, когда веб-сайт обновляется, это приводит к тому, что для lightMode устанавливается значение false, если значение темного режима сохраняется в локальном хранилище. Теперь, когда контекст для приложения создан, мы можем перейти к созданию цветовых палитр для каждой темы!
Шаг 2. Создание темы
На этом шаге мы создадим тему и будем использовать ThemeProvider из Material-UI, чтобы предоставить свойства темы для всего вашего приложения (не путать с ThemeContextProvider из шага 1, в котором находится ваше состояние lightMode и функция toggleTheme). Чтобы создать темы, добавьте файл с именем AppTheme в папку компонентов и в этом файле используйте функцию createMuiTheme в Material-UI. Для каждой темы мы включаем свойства палитры, для которых мы хотим явно определить цвет. Мы также создаем общий объект для хранения свойств, которые мы хотим сохранить постоянными, независимо от того, в какой теме мы находимся, и этот объект можно добавить как в темную, так и в светлую темы.
После создания палитр темы мы обернем наш контекст из шага 1 вокруг этого компонента, чтобы мы могли использовать информацию из ThemeContext. Сделайте это в App.tsx:
Чтобы определить, какая тема будет применена к веб-сайту, мы будем использовать контекст lightMode из хука useContext, а затем обернем ThemeProvider вокруг остальной части вашего приложения. Окончательный результат этого раздела можно увидеть здесь:
Примечание. Если бы в вашем App.tsx были какие-либо другие компоненты, сейчас самое время переместить эти компоненты в дочерние по отношению к вашему компоненту AppTheme, чтобы эти компоненты также использовали только что определенные вами цветовые палитры. / em>
Вкратце, ThemeContext применяется к AppTheme, чтобы определить, какую палитру мы используем, а затем AppTheme применит эту палитру к остальной части вашего приложения.
Шаг 3. Создание переключателя темы
После создания этих потрясающих палитр мы хотим иметь возможность переключаться между ними. Здесь на помощь приходит наша функция toggleTheme, определенная в ThemeContext. Создайте компонент ThemeToggle и добавьте кнопку с onClick, запускающую функцию toggleTheme, полученную из ThemeContext с помощью хука useContext.
Обратите внимание, как мы можем даже использовать контекст lightMode для запуска условных выражений, таких как отображение различных значков для разных режимов темы в случае переключения нашей темы, и использовать нашу палитру тем для дальнейшей настройки наших цветов в таблице стилей makeStyles Material-UI.
Поместите эту кнопку в часть своего приложения, и вы сможете переключать темы, щелкнув по ней!
Шаг 4. Использование темы для остальной части приложения
Для остальной части вашего приложения компоненты Material-UI, такие как кнопки и типографика, могут быть окрашены с помощью атрибута «color». Вы можете просто включить его в любой из ваших существующих компонентов, и он будет соответствовать цветам, определенным в вашей палитре.
<Typography variant="h1" component="h1" color="primary"> These words will be in your primary colour </typography>
Вы даже можете добавить собственные цвета, не определенные в вашей палитре, вызвав контекст lightMode с помощью хука useContext и использовать его для определения пользовательских цветов для конкретного компонента:
<Button className={classes.button} variant="contained" style={{backgroundColor: lightMode ? '#E27D60' : '#FAED26'}}>
This Button will be of custom colour
</Button>
Теперь, когда вы нажмете на переключатель своей темы, все ваши компоненты переключатся на созданную вами темную палитру темы!
Полный исходный код страницы в формате GIF, который содержит весь код из вышеперечисленных шагов, можно найти здесь:
а также демонстрирует, как можно изменить тему различных компонентов, таких как панели навигации и кнопки.
Заключение
Благодаря сочетанию ThemeProvider Material-UI для палитры, а также контекста React для логики темы, Material-UI действительно упростил включение темной темы в приложение React. Надеюсь, я смог помочь вам в этом, и если вы хотите увидеть код вживую в реальном проекте, зайдите на мой личный веб-сайт! Я реализовал концепции, описанные в этой статье, с помощью кнопки с плавающим действием для переключения темы.
Спасибо, что прочитали эту статью, и если у вас есть какие-либо вопросы, не стесняйтесь обращаться ко мне в комментариях ниже или через мой веб-сайт, и не забудьте оставить мне аплодисменты, если приведенные здесь шаги оказались полезными. тебе!
