{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Современные веб-приложения, используемые сотнями тысяч людей, уже не могут обойтись без функции смены светлой и темной темы. В этой статье мы расскажем, почему это так важно и как реализовать смену темы на вашем веб-сайте с помощью нативных CSS-переменных.","type":"unstyled","key":"acubq"},{"data":{"image":{"id":"647efefea29d5f26c4f4e067"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ep1i1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему темная тема так популярна?","type":"unstyled","key":"acbtr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Существует несколько причин, наиболее значимые из которых мы рассмотрим:","type":"unstyled","key":"bvpj8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В темное время суток темы с светлым текстом на темном фоне снижают нагрузку на глаза. Контраст между экраном устройства и окружающей средой становится менее заметным, что делает использование приложения более комфортным для пользователей. Кроме того, темная тема является важным средством доступности для людей с ограниченными возможностями здоровья.","type":"ordered-list-item","key":"1kljm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Исследования показывают, что большинство пользователей предпочитают темную тему из эстетических соображений. Однако для успешной реализации темной темы важно обеспечить минималистичный дизайн приложения, чтобы переключение темы не разрушало общее впечатление.","type":"ordered-list-item","key":"7tqp7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Темная тема также актуальна для тех, кто хочет экономить заряд батареи своего смартфона. Исследования, проведенные разработчиками Android, показывают, что темная тема может сэкономить до 60% заряда батареи.","type":"ordered-list-item","key":"4t9cq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое CSS-переменные?","type":"unstyled","key":"eci1h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":292,"style":"BOLD"}],"text":"CSS-переменные (пользовательские CSS-свойства) - это определенные автором CSS сущности, которые содержат конкретные значения и могут быть повторно использованы в документе. Они устанавливаются с использованием custom property нотации (например. --main-color: black;) и доступны через функцию var() (например. color: var(--main-color);) .","type":"unstyled","key":"3bcfp"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":12,"offset":42}],"inlineStyleRanges":[{"length":12,"offset":42,"style":"BOLD"}],"text":"Более подробную информацию можно найти на MDN Web Docs.","type":"unstyled","key":"6i9sl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Реализация","type":"unstyled","key":"8dh25"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для простоты работы мы будем использовать пакет node-sass в связке с React 18. Для этого инициализируем проект с помощью npm и добавим пакет node-sass:","type":"unstyled","key":"cuteo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npx create-react-app theme\nnpm i node-sass","type":"blockquote","key":"et2dt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После инициализации проекта очистим файловую структуру, оставив только файлы App.js и index.js в папке src.","type":"unstyled","key":"ch8ab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создадим файл стилей themes.scss в папке styles. В этом файле определим наши стили с помощью псевдоэлемента :root, чтобы все компоненты приложения могли использовать наши переменные:","type":"unstyled","key":"305uo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// src/styles/themes.scss\n\n:root {\n\t--text-color: #121212;\n\t--background: #FFFFFF;\n}","type":"blockquote","key":"5u9nt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Также создадим файл стилей для нашего App.js, чтобы проверить работу стилей:","type":"unstyled","key":"fc8mp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// src/App.scss\n\nbody {\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.App {\n\tfont-family: sans-serif;\n\ttext-align: center;\n\theight: 100vh;\n\tcolor: var(--text-color);\n\tbackground-color: var(--background);\n\t> div {\n\t\tpadding: 16px;\n\t}\n}","type":"blockquote","key":"93hk2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не забудьте импортировать файл стилей в index.js:","type":"unstyled","key":"u94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// src/index.js\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport '../src/styles/theme.scss';\n\nReactDOM.render(, document.getElementById('root'));","type":"blockquote","key":"b7k1c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, при открытии консоли разработчика, мы увидим, что вместо конкретных цветов в формате HEX у нас появились CSS-переменные, по клику на которые мы можем увидеть значение этих переменных.","type":"unstyled","key":"8d9u6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переключение темы","type":"unstyled","key":"bq9g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь нам нужно реализовать функцию переключения темы. Если пользователь впервые заходит на сайт, мы должны получить настройки темы из браузера и установить их по умолчанию для нашего приложения. Если пользователь уже посещал сайт и ему понравилась темная тема, мы должны сохранить эти настройки.","type":"unstyled","key":"1bvjd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для этой задачи мы воспользуемся хуками React и localStorage.","type":"unstyled","key":"1ggoi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создадим файл ThemeProvider.js в папке providers, который будет отвечать за нашу тему:","type":"unstyled","key":"9n13v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// src/providers/ThemeProvider.js\n\nimport React, { createContext, useState, useEffect } from 'react';\n\nexport const ThemeContext = createContext({});\n\nconst ThemeProvider = ({ children }) => {\n\tconst [theme, setTheme] = useState(defineTheme);\n\n\tuseEffect(() => {\n\t\tdocument.documentElement.dataset.theme = theme;\n\t\tlocalStorage.setItem('theme', theme);\n\t}, [theme]);\n\n\treturn (\n\t\t\n\t\t\t{children}\n\t\t\n\t);\n};\n\nexport default ThemeProvider;","type":"blockquote","key":"fbscs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы создали контекст, через который будем передавать состояние темы вниз по дереву компонентов. С помощью хука useState мы будем хранить информацию о текущей теме. В useEffect мы будем обновлять тему в localStorage и в атрибуте тэга HTML при каждом изменении темы.","type":"unstyled","key":"5ocb0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь добавим кнопку переключения темы в компонент App.js:","type":"unstyled","key":"3pesv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// src/App.js\n\nimport React, { useContext } from 'react';\nimport ThemeSwitcher from './components/ThemeSwitcher/ThemeSwitcher';\nimport './App.scss';\n\nfunction App() {\n\treturn (\n\t\t

\n\t\t\t

Welcome to My App

\n\t\t\t

Some content here...

\n\t\t\t\n\t\t

\n\t);\n}\n\nexport default App;","type":"blockquote","key":"6rlvu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь создадим компонент ThemeSwitcher, который будет отвечать за переключение темы:","type":"unstyled","key":"fg3en"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// src/components/ThemeSwitcher/ThemeSwitcher.js\n\nimport React, { useContext } from 'react';\nimport { ThemeContext } from '../../providers/ThemeProvider';\n\nconst ThemeSwitcher = () => {\n\tconst { theme, setTheme } = useContext(ThemeContext);\n\n\tconst toggleTheme = () => {\n\t\tsetTheme(theme === 'light' ? 'dark' : 'light');\n\t};\n\n\treturn (\n\t\t\n\t);\n};\n\nexport default ThemeSwitcher;","type":"blockquote","key":"ap1ig"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, при нажатии на кнопку, мы будем переключать атрибут у тега HTML. Однако стили пока не изменятся, поэтому дополним файл themes.scss и внесем изменения в уже существующий файл стилей App.scss:","type":"unstyled","key":"bcvep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// src/styles/themes.scss\n\n:root[data-theme='light'] {\n\t--text-color: #121212;\n\t--background: #FFFFFF;\n}\n\n:root[data-theme='dark'] {\n\t--text-color: #FFFFFF;\n\t--background: #121212;\n}","type":"blockquote","key":"aama1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, при переключении темы, стили нашего приложения должны меняться соответствующим образом.","type":"unstyled","key":"3mqo8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"unstyled","key":"67p7l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Необходимо помнить, что не все инструменты являются универсальными, и у CSS-переменных тоже есть свои ограничения. Одно из них - работа с прозрачностью. CSS-переменные не поддерживают функции SCSS, такие как darken или lighten. Также следует учитывать, что добавление индивидуальных стилей для каждого компонента может усложнить описание стилей.","type":"unstyled","key":"301eo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Однако CSS-переменные являются мощным инструментом, особенно для обеспечения единообразия стилей. Они не ограничиваются только цветовыми свойствами, но могут применяться для задания отступов, шрифтов и других свойств CSS, которые широко используются в веб-приложениях.","type":"unstyled","key":"3v7g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"wj0xLdkqtU4hEAMOLvN4"}],"entityMap":{"0":{"data":{"href":"https://developer.mozilla.org/ru/docs/Web/CSS/Using_CSS_custom_properties","url":"https://developer.mozilla.org/ru/docs/Web/CSS/Using_CSS_custom_properties"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}