{"draftJsState":{"blocks":[{"data":{"image":{"id":"5eeb7487f5043b5a773765ff"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5999a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":423,"offset":0,"style":"BOLD"},{"length":423,"offset":0,"style":"ITALIC"}],"text":"В современном мире ночной режим, который отображает светлые элементы интерфейса на тёмном фоне, быстро становится фаворитом у большинства пользователей. В этой статье вы узнаете, как эффективно реализовать ночной режим в React-приложении, используя библиотеку styled-components и некоторые функции React. Кроме того, мы обсудим плюсы и минусы ночного режима, а также причины, по которым он должен быть в каждом приложении. ","type":"unstyled","key":"4jprs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Одной из наиболее часто запрашиваемых программных функций является ночной режим (или тёмный режим). Мы видим его почти во всех приложениях, которые привыкли использовать каждый день: начиная с мобильных и заканчивая веб-версиями. Ночной режим стал жизненно важным для компаний, которые хотят позаботиться о глазах своих пользователей. ","type":"unstyled","key":"93hci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тёмный режим – это дополнительная функция, которая преобразует светлые элементы интерфейса в тёмные. Большинство крупных компаний (таких как YouTube, Twitter и Netflix) добавили ночной режим в свои приложения. ","type":"unstyled","key":"8sme1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Несмотря на то, что мы не будем особо углубляться в сам React, базовые знания о нём, CSS и styled-components вам всё же понадобятся. Этот урок будет полезен для тех, кто хочет улучшить своё веб-приложение, ориентируясь на любителей ночного режима.","type":"unstyled","key":"438jg"},{"data":{"image":{"id":"5eeb74f97021972fe7373b5a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Анонс ночного режима в StackOverflow. \n","type":"atomic:image","key":"dcroa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тёмный режим снижает нагрузку на глаза, если вы долго работаете за компьютером или мобильным телефоном. ","type":"unstyled","key":"jf21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое тёмный режим? ","type":"header-two","key":"5b59v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Темный режим – это цветовая схема любого интерфейса, который отображает светлый текст и элементы интерфейса на тёмном фоне, что уменьшает нагрузку на глаза при просмотре на мобильных телефонах, планшетах и компьютерах. Этот режим уменьшает свет, передаваемый экраном, сохраняя при этом минимальные цветовые контрасты, необходимые для удобочитаемости.\n","type":"unstyled","key":"ac42"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему вашему приложению нужен тёмный режим?","type":"header-two","key":"d4qv9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ночной режим улучшает визуальную эргономику, уменьшая нагрузку на глаза, подстраивая экран под текущие условия освещения и обеспечивая удобство использования ночью или в темноте. ","type":"unstyled","key":"cqr41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Прежде чем начать реализовывать тёмный режим в нашем приложении, давайте определимся с его преимуществами. ","type":"unstyled","key":"ej5i4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Экономия зарядки","type":"header-two","key":"86ckh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тёмный режим в веб- и мобильных приложениях может продлить срок службы аккумулятора устройства. Google подтвердил, что дарк мод на OLED-экранах очень сильно продлил срок службы батареи. ","type":"unstyled","key":"e2cl7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, при яркости в 50% ночной режим в приложении YouTube экономит примерно на 15% больше энергии, чем обычный белый фон. При яркости экрана в 100% тёмный интерфейс экономит колоссальные 60% энергии. ","type":"unstyled","key":"4h14a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это эстетично","type":"header-two","key":"cl360"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внешний вид тёмного режима является эстетичным, что значительно повышает привлекательность картинки. ","type":"unstyled","key":"dn26e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда большинство продуктов имеют однотипную светлую палитру, ночной режим предлагает нечто другое – что-то таинственнее и новее. ","type":"unstyled","key":"d738g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"К тому же он даёт прекрасные возможности для свежего взгляда на такой графический контент, как информационные панели, изображения и фотографии.","type":"unstyled","key":"che6d"},{"data":{"image":{"id":"5eeb761a92dc5f6a5e101191"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сравнение тёмного и обычного режима на примере Twitter. ","type":"atomic:image","key":"71c4p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, когда вы знаете, почему вам необходим ночной режим в вашем веб-приложении, давайте углубимся в компоненты стилей, которые являются определяющим ресурсом этого руководства. ","type":"unstyled","key":"ceo24"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что Такое Styled-Components? ","type":"header-two","key":"9mm0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой статье мы будем очень часто использовать библиотеку styled-components. Существует множество способов стилизации современного веб-приложения. Традиционный – метод стилей на уровне документов, при котором нужно или создать файл index.css и связать его с HTML или прописывать стили непосредственно внутри самого HTML-файла. ","type":"unstyled","key":"ac9ck"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В стилях веб-приложений много чего изменилось с тех пор, как появился CSS-in-JS. ","type":"unstyled","key":"86pnb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS-in-JS ссылается на паттерн, в котором CSS составлен с использованием JavaScript. Там используются теговые литералы для стилизации компонентов в файле JavaScript. ","type":"unstyled","key":"1k0ho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Styled-components – это библиотека CSS-in-JS, которая позволяет использовать все ваши любимые CSS-функции, включая медиа-запросы, псевдоселекторы и вложения.","type":"unstyled","key":"dd8ic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему именно Styled-Components? ","type":"header-two","key":"bhebs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Библиотека Styled-components была выбрана по следующим причинам: ","type":"unstyled","key":"6qbbf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Нет неразберихи с именами классов. Вместо того, чтобы ломать голову над новым именем класса, styled-components генерирует уникальное имя само! Вам больше не придётся беспокоиться об ошибках или бессмысленных именах классов. ","type":"unordered-list-item","key":"aj56i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Использование пропсов. Styled-components позволяет расширять свойства стиля с помощью параметра props, обычно используемого в React, – таким образом, динамически влияя на ощущение компонента через состояние приложения. ","type":"unordered-list-item","key":"1elaj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Поддержка синтаксиса Sass. Написание Sass-синтаксиса из коробки без необходимости установки каких-либо препроцессоров или дополнительных инструментов возможно с помощью styled-components. В ваших определениях стилей вы можете использовать символ & для указания на текущий компонент. ","type":"unordered-list-item","key":"cbqjj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Темы. Styled-components поддерживает темы, экспортируя компонент-оболочку ThemeProvider. Этот компонент присваивает тему всем компонентам React внутри себя через Context API. В дереве рендеринга все стилевые компоненты будут иметь доступ к предоставленной теме, даже если они имеют несколько уровней. В течении этого урока, мы будем углубляться в такого рода особенности styled-components.\n","type":"unordered-list-item","key":"3ch85"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Реализация Ночного Режима ","type":"header-two","key":"fp6ba"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой статье мы собираемся реализовать темный режим на простой YouTube-подобной веб-странице. ","type":"unstyled","key":"c26hl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":70,"offset":0,"style":"BOLD"}],"text":"Чтобы продолжить, убедитесь, что вы клонировали исходный репозиторий. ","type":"unstyled","key":"dkihv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"СБОРКА","type":"header-two","key":"csud3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":100,"style":"BOLD"}],"text":"Давайте установим все зависимости в наш package.json файл. В терминале выполните следующую команду: npm install ","type":"unstyled","key":"6gkfo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После успешной установки пропишите npm start. Вот как выглядит веб-страница без встроенного тёмного режима:","type":"unstyled","key":"5av9f"},{"data":{"image":{"id":"5eeb778dcbbc2d362a058039"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"33c66"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы установить styled-components, в терминале запустите: ","type":"unstyled","key":"bbpiq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"npm install styled-components","type":"blockquote","key":"8aubs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"РЕАЛИЗАЦИЯ ","type":"header-two","key":"5mc9p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для реализации ночного режима необходимо создать четыре разных компонента. ","type":"unstyled","key":"bevo5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"Theme – Содержит свойства цветов светлой и тёмной тем.","type":"unordered-list-item","key":"eqhkc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"GlobalStyles – Содержит глобальные стили всего документа. ","type":"unordered-list-item","key":"8nrm7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Toggler – Содержит элемент кнопки переключения режимов. ","type":"unordered-list-item","key":"qmle"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"useDarkMode – Пользовательский хук, который обрабатывает логику смены темы и её сохранение в localStorag.\n","type":"unordered-list-item","key":"2e0o1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"КОМПОНЕНТ ТЕМЫ","type":"header-two","key":"636p7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" В папке src вы увидите компоненты в папке components. Создайте файл Themes.js и добавьте в него следующий код:","type":"unstyled","key":"5qguv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export const lightTheme = {","type":"blockquote","key":"a34df"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":11,"style":"ITALIC"}],"text":" body: '# FFF',","type":"blockquote","key":"3n88p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":11,"style":"ITALIC"}],"text":" text: '# 363537',","type":"blockquote","key":"1eqac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":19,"style":"ITALIC"}],"text":" toggleBorder: '# FFF',","type":"blockquote","key":"7km8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":17,"style":"ITALIC"}],"text":" background: '# 363537',","type":"blockquote","key":"5e3mp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"7hss5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export const darkTheme = {","type":"blockquote","key":"94b9r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":11,"style":"ITALIC"}],"text":" body: '# 363537',","type":"blockquote","key":"3f9f1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":11,"style":"ITALIC"}],"text":" text: '# FAFAFA',","type":"blockquote","key":"b7084"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":19,"style":"ITALIC"}],"text":" toggleBorder: '# 6B8096',","type":"blockquote","key":"7qm2b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":17,"style":"ITALIC"}],"text":" background: '# 999',","type":"blockquote","key":"8lcla"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"8vj0a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь мы определили и экспортировали объекты lightTheme и darkTheme с отличающимися переменными цветами. Не стесняйтесь экспериментировать и настраивать их значения в соответствии с вашими предпочтениями. ","type":"unstyled","key":"4e9r2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент глобальных стилей","type":"header-two","key":"6gj21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не покидая папку components, создайте файл globalStyles.js и добавьте следующий код:","type":"unstyled","key":"aedvj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { createGlobalStyle} from \"styled-components\"","type":"blockquote","key":"e5lqk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export const GlobalStyles = createGlobalStyle`","type":"blockquote","key":"27pqt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" body {","type":"blockquote","key":"40f3r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background: ${({ theme }) => theme.body};","type":"blockquote","key":"crrfj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: ${({ theme }) => theme.text};","type":"blockquote","key":"fuo18"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" font-family: Tahoma, Helvetica, Arial, Roboto, sans-serif;","type":"blockquote","key":"dkttl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" transition: all 0.50s linear;","type":"blockquote","key":"5jssa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"eqao2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" `","type":"blockquote","key":"7tp4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы импортировали createGlobalStyle из styled-components. Метод createGlobalStyle заменяет устаревший на сегодня метод injectGlobal из третьей версии styled-components. Он генерирует React-компонент, который при добавлении в дерево компонентов внедряет глобальные стили в документ, в нашем случае – App.js. К тому же мы определили компонент GlobalStyle и присвоили свойствам background и color значения из объекта темы. Таким образом, каждый раз, когда мы переключаемся между темами, значения меняются в зависимости от ночной темы или объектов светлой темы, которые мы передаем в ThemeProvider (будет создан позже). Свойство перехода в 0.50s позволяет сменять тему так плавно, что при переключении тем можно легко заметить изменения. ","type":"unstyled","key":"53pts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Написание функционала ","type":"header-two","key":"13lvu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":70,"offset":126,"style":"BOLD"}],"text":"Для реализации функции переключения тем нам нужно добавить всего несколько строк кода. В файле App.js добавьте следующий код (обратите внимание, что выделенный код – это то, что вы должны добавить):","type":"unstyled","key":"21h5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":165,"offset":52,"style":"BOLD"}],"text":"import React, { useState, useEffect } from \"react\";\nimport {ThemeProvider} from \"styled-components\";\nimport { GlobalStyles } from \"./components/Globalstyle\";\nimport { lightTheme, darkTheme } from \"./components/Themes\"\nimport \"./App.css\";\nimport dummyData from \"./data\";\nimport CardList from \"./components/CardList\";\n\nconst App = () => {\n const [videos, setVideos] = useState([]);","type":"blockquote","key":"4q69g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":138,"offset":0,"style":"BOLD"}],"text":"const [theme, setTheme] = useState('light');\n const themeToggler = () => {\n theme === 'light' ? setTheme('dark') : setTheme('light')\n}","type":"blockquote","key":"hbue"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useEffect(() => {\n const timer = setTimeout(() => {\n setVideos(dummyData);\n }, 1000);\n return () => clearTimeout(timer);\n }, []);\n return (","type":"blockquote","key":"fmoo5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":97,"offset":0,"style":"BOLD"},{"length":54,"offset":136,"style":"BOLD"},{"length":28,"offset":519,"style":"BOLD"}],"text":"\n <>\n \n

\n \n {\n videos.map((list, index) => {\n return (\n

{list.section}

\n \n

\n );\n })}\n

\n \n \n \n );\n};\nexport default App;","type":"blockquote","key":"8aau8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"29bg9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выделенный код вы должны были добавить в App.js. Мы импортировали ThemeProvider из styled-components. ThemeProvider является вспомогательным компонентом в библиотеке styled-components, которая обеспечивает поддержку тем. Этот компонент внедряет тему во все нижеуказанные компоненты React через Context API. ","type":"unstyled","key":"9j98v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В дереве рендеринга все стилевые компоненты будут иметь доступ к предоставленной теме, даже если они имеют несколько уровней. ","type":"unstyled","key":"d97v5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее мы импортируем враппер GlobalStyle из ./components/Globalstyle. И, наконец, импортируем объекты lightTheme и darkTheme из ./components/Themes. ","type":"unstyled","key":"d3ob8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для того, чтобы создать метод переключения, нам нужно состояние, которое содержит начальное значение цвета нашей темы. Итак, мы создаем состояние theme и устанавливаем начальное состояние light, используя хук useState. ","type":"unstyled","key":"fdthp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь о функциональности переключения: ","type":"unstyled","key":"ef6ub"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Метод themeToggler использует троичный оператор для проверки состояния theme и переключает либо на тёмную, либо на светлую тему в зависимости от значения. ","type":"unstyled","key":"5a9v9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ThemeProvider — вспомогательный компонент styled-components, оборачивает всё в оператор return и внедряет любые компоненты под ним. Помните, что GlobalStyles внедряют глобальные стили в наши компоненты. Следовательно и вызываются они изнутри компонента-оболочки ThemeProvider. ","type":"unstyled","key":"a8f0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наконец, мы создали кнопку с событием onClick, которое назначает ей наш метод themeToggler. ","type":"unstyled","key":"2i4s9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте посмотрим на наш текущий результат.","type":"unstyled","key":"5gkk7"},{"data":{"image":{"id":"5eeb9b3d7d60b977da7e6fce"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ночная тема реализована ненастойчиво ","type":"atomic:image","key":"5qggr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наш файл App.js нуждается в рефакторинге. Большая часть его кода не является DRY. (DRY означает «don’t repeat yourself», основной принцип разработки ПО, направленный на уменьшение количества повторений.) Похоже, что вся логика находится в App.js. Хорошая практика – помещать нашу логику отдельно, ради ясности. Итак, мы создадим компонент, который обрабатывает функционал переключения. ","type":"unstyled","key":"13t7u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переключательный компонент","type":"header-two","key":"1vu5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Всё ещё в папке components создайте файл Toggler.js и добавьте в него следующий код:","type":"unstyled","key":"eo6p3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nimport React from 'react'","type":"blockquote","key":"95d89"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { func, string } from 'prop-types';","type":"blockquote","key":"48ioe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import styled from \"styled-components\"","type":"blockquote","key":"9boem"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const Button = styled.button`","type":"blockquote","key":"bn496"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background: ${({ theme }) => theme.background};","type":"blockquote","key":"78tog"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border: 2px solid ${({ theme }) => theme.toggleBorder};","type":"blockquote","key":"1vl7h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: ${({ theme }) => theme.text};","type":"blockquote","key":"acjjd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-radius: 30px;","type":"blockquote","key":"5ruj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" cursor: pointer;","type":"blockquote","key":"e9as2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" font-size:0.8rem;","type":"blockquote","key":"977m6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 0.6rem;","type":"blockquote","key":"tgko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"69t0t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\\`;","type":"blockquote","key":"80sop"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const Toggle = ({theme, toggleTheme }) => {","type":"blockquote","key":"c6010"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" return (","type":"blockquote","key":"fii97"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"c0ta4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" );","type":"blockquote","key":"2qc1f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"};","type":"blockquote","key":"9eppk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Toggle.propTypes = {","type":"blockquote","key":"ft5l2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" theme: string.isRequired,","type":"blockquote","key":"9lq8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" toggleTheme: func.isRequired,","type":"blockquote","key":"flfh9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"con11"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export default Toggle;","type":"blockquote","key":"auduv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1idd8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы всё было аккуратно, мы стилизовали нашу кнопку-переключатель в компоненте Toggle, используя функцию styled из styled-components. ","type":"unstyled","key":"5c8c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сделано чисто для наглядности. Вы можете стилизовать кнопку так, как посчитаете нужным. ","type":"unstyled","key":"1oe46"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внутри компонента Toggle мы передаем два пропса: ","type":"unstyled","key":"dqf2i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"theme возвращает текущую тему (светлую или тёмную); ","type":"unordered-list-item","key":"bmf5e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Функция toggleTheme будет использоваться для переключения между темами. ","type":"unordered-list-item","key":"7aejn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь мы возвращаем компонент Button и назначаем функцию toggleTheme для события onClick. ","type":"unstyled","key":"fda4j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И наконец, используем propTypes для определения наших типов, убедившись, что наш theme является string и isRequired, а toggleTheme является func и isRequired.\n","type":"unstyled","key":"4a86k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование пользовательских хуков (useDarkMode) ","type":"header-two","key":"uksh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При создании приложения масштабируемость имеет первостепенную роль, а это значит то, что наша бизнес-логика должна использоваться многократно в разных проектах. Вот почему было бы здорово перенести наш функционал переключения в отдельный компонент. Для этого нужно создать собственный хук. Давайте создадим новый файл с именем useDarkMode.js в папке components и переместим нашу логику в файл с некоторыми изменениями. Добавьте в файл следующий код:","type":"unstyled","key":"5rj51"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useEffect, useState } from 'react';","type":"blockquote","key":"c1qgi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export const useDarkMode = () => {","type":"blockquote","key":"dqrvr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const [theme, setTheme] = useState('light');","type":"blockquote","key":"71fai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const setMode = mode => {","type":"blockquote","key":"382it"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" window.localStorage.setItem('theme', mode)","type":"blockquote","key":"8odod"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" setTheme(mode)","type":"blockquote","key":"hort"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" };","type":"blockquote","key":"26tt5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const themeToggler = () => {","type":"blockquote","key":"34b06"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" theme === 'light' ? setMode('dark') : setMode('light')","type":"blockquote","key":"ccv9t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" };","type":"blockquote","key":"adt42"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" useEffect(() => {","type":"blockquote","key":"1lvir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const localTheme = window.localStorage.getItem('theme');","type":"blockquote","key":"7tqjc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" localTheme && setTheme(localTheme)","type":"blockquote","key":"cra6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }, []);","type":"blockquote","key":"f9i8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" return [theme, themeToggler]","type":"blockquote","key":"ee6ob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"};","type":"blockquote","key":"bjrvd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6lndi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь мы добавили несколько вещей: ","type":"unstyled","key":"6m61f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"setMode – мы используем localStorage для сохранения сессий в браузере. Иными словами, если пользователь выбрал тёмную тему, то он увидит её при следующем посещении или при обновлении страницы. Следовательно, эта функция устанавливает наше состояние и передает theme в localStorage. ","type":"unordered-list-item","key":"bges1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"themeToggler – эта функция использует троичный оператор для проверки состояния темы и переключает либо на тёмную, либо на светлую в зависимости от истинности условия. ","type":"unordered-list-item","key":"52qmb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"useEffect – мы реализовали хук useEffect для проверки установки компонентов. Если пользователь ранее выбрал тему, мы передадим её нашей функции setTheme. В конце мы вернём theme, которая содержит выбранную тему и функцию themeToggler для переключения между режимами. ","type":"unordered-list-item","key":"76r6v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Думаю, вы согласитесь, что наш компонент с переходом на ночной режим выглядит гладко. А теперь давайте перейдем к App.js для последних штрихов.","type":"unstyled","key":"c8f5v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":101,"style":"BOLD"}],"text":"import React, { useState, useEffect } from \"react\";\nimport {ThemeProvider} from \"styled-components\";\nimport {useDarkMode} from \"./components/useDarkMode\"\nimport { GlobalStyles } from \"./components/Globalstyle\";\nimport { lightTheme, darkTheme } from \"./components/Themes\"\nimport Toggle from \"./components/Toggler\"\nimport \"./App.css\";\nimport dummyData from \"./data\";\nimport CardList from \"./components/CardList\";\nconst App = () => {","type":"blockquote","key":"56o7f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":43,"style":"BOLD"}],"text":"const [videos, setVideos] = useState([]);\n const [theme, themeToggler] = useDarkMode();","type":"blockquote","key":"fqtp8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":64,"offset":0,"style":"BOLD"}],"text":"\n const themeMode = theme === 'light' ? lightTheme : darkTheme;","type":"blockquote","key":"4r4kb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nuseEffect(() => { ","type":"blockquote","key":"d57fn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const timer = setTimeout(() => { ","type":"blockquote","key":"8fg2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"setVideos(dummyData); ","type":"blockquote","key":"frfad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}, 1000); ","type":"blockquote","key":"br6o4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return () => clearTimeout(timer); ","type":"blockquote","key":"82ha3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}, []); ","type":"blockquote","key":"87llt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return (","type":"blockquote","key":"ar8j8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"","type":"blockquote","key":"afg12"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<>\n \n

","type":"blockquote","key":"8g15d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n {\n videos.map((list, index) => {\n return (\n

{list.section}

\n \n

\n );\n })}\n

\n \n \n \n );\n};\nexport default App;","type":"blockquote","key":"3s1f4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":1,"style":"BOLD"}],"text":"\nВыделенный код нужно добавить в App.js.","type":"unstyled","key":"882l9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сначала мы импортируем наш пользовательский хук, деструктурируем пропсы theme и themeToggler и устанавливаем их с помощью функции useDarkMode. ","type":"unstyled","key":"ddim0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание, что метод useDarkMode заменяет состояние темы, которое изначально было в App.js. ","type":"unstyled","key":"6vcie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы объявляем переменную themeMode, которая отображает либо светлую, либо тёмную тему, в зависимости от состояния режима theme в данный момент. ","type":"unstyled","key":"3fjl7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь нашему компоненту-оболочке ThemeProvider назначена только что созданная переменная themeMode для пропса theme. ","type":"unstyled","key":"a84sl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И, наконец, вместо обычной кнопки передаём компонент Toggle. ","type":"unstyled","key":"bgd74"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Помните, что в нашем компоненте Toggle мы определили и стилизовали кнопку, а так же передали им theme и toggleTheme в качестве пропсов. Итак, всё, что нам нужно сделать, это передать эти пропсы соответствующим образом компоненту Toggle, который будет выполнять функцию нашей кнопки в App.js. ","type":"unstyled","key":"36kg8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ура! Наша ночная тема установлена и умеет не менять цвет, когда страница обновляется или открывается в новой вкладке. ","type":"unstyled","key":"5s8pd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте посмотрим на текущий результат в действии:","type":"unstyled","key":"9siij"},{"data":{"image":{"id":"5eeb9d9ffe00ee74beb1ce79"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e66pq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почти всё работает хорошо, но есть одна маленькая вещь, сделав которую, переключение тем станет великолепным. Переключитесь на ночную тему и обновите страницу. Видите, что синий цвет в кнопке загружается чуть раньше, чем серый? Это происходит потому, что наш хук useState изначально запускает тему light. После этого запускается useEffect, проверяет localStorage и только потом устанавливает тёмную тему. ","type":"unstyled","key":"9ofo3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте перейдем к нашему пользовательскому хуку useDarkMode.js и добавим немного кода:","type":"unstyled","key":"5bopf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":63,"offset":133,"style":"BOLD"}],"text":"import { useEffect, useState } from 'react';\nexport const useDarkMode = () => {\n const [theme, setTheme] = useState('light');\n const [mountedComponent, setMountedComponent] = useState(false)\n const setMode = mode => {\n window.localStorage.setItem('theme', mode)\n setTheme(mode)","type":"blockquote","key":"6pvms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":260,"style":"BOLD"},{"length":16,"offset":334,"style":"BOLD"}],"text":" };\n const themeToggler = () => {\n theme === 'light' ? setMode('dark') : setMode('light')\n };\n useEffect(() => {\n const localTheme = window.localStorage.getItem('theme');\n localTheme ? setTheme(localTheme) : setMode('light')\n setMountedComponent(true)\n }, []);\n return [theme, themeToggler, mountedComponent]\n};","type":"blockquote","key":"4rdae"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7g7r1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выделенный код – всё, что нужно было добавить в useDarkMode.js. Мы создали другое состояние с именем mountComponent и установили значение по умолчанию в false, используя хук useState. Далее в хуке useEffect мы устанавливаем состояние mountComponent в значение true, используя setMountingComponent. Наконец, в возвращаемый массив добавляем состояние mountComponent. ","type":"unstyled","key":"40gj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А теперь давайте добавим немного кода в App.js, чтобы всё это дело заработало.","type":"unstyled","key":"8a6m2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { useState, useEffect } from \"react\";\nimport {ThemeProvider} from \"styled-components\";\nimport {useDarkMode} from \"./components/useDarkMode\"\nimport { GlobalStyles } from \"./components/Globalstyle\";\nimport { lightTheme, darkTheme } from \"./components/Themes\"\nimport Toggle from \"./components/Toggler\"\nimport \"./App.css\";\nimport dummyData from \"./data\";\nimport CardList from \"./components/CardList\";\nconst App = () => {","type":"blockquote","key":"bld3c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":64,"offset":42,"style":"BOLD"},{"length":35,"offset":318,"style":"BOLD"}],"text":"const [videos, setVideos] = useState([]);\n const [theme, themeToggler, mountedComponent] = useDarkMode();\n const themeMode = theme === 'light' ? lightTheme : darkTheme;\n useEffect(() => {\n const timer = setTimeout(() => {\n setVideos(dummyData);\n }, 1000);\n return () => clearTimeout(timer);\n }, []);\nif(!mountedComponent) return

\n return (\n \n <>\n \n

\n \n {\n videos.map((list, index) => {\n return (\n

{list.section}

\n \n

\n );\n })}\n

\n \n ","type":"blockquote","key":"7tu46"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" );\n};\nexport default App;","type":"blockquote","key":"ko28"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы добавили наше состояние mountComponent в качестве опоры для хука useDarkModeи проверили, установлен ли компонент, что и происходит в хуке useEffect. Если этого не произошло, то мы сделаем div пустым. Давайте посмотрим на нашу тёмную веб-страницу.\n","type":"unstyled","key":"ap1im"},{"data":{"image":{"id":"5eeb9ed64e8d5c252c06eb0a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"406qt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, когда страница обновляется, цвет кнопки остаётся неизменным. ","type":"unstyled","key":"euqs2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-two","key":"1ng5g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Ночная тема всё чаще становится фаворитом среди пользователей, а реализовать её в веб-приложении React становится значительно проще, если использовать тематическую оболочку ThemeProvider в styled-components. Двигайтесь вперёд и экспериментируйте со стилевыми компонентами при реализации тёмной темы. Кстати, вместо кнопки можно сделать значки.\n","type":"unstyled","key":"2d3so"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":16,"offset":0}],"inlineStyleRanges":[],"text":"Оригинал статьи ","type":"unstyled","key":"cbl4j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6rs04"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"cc4LkDSbIW00jmJW3edp"}],"entityMap":{"0":{"data":{"url":"https://www.smashingmagazine.com/2020/04/dark-mode-react-apps-styled-components/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}