Переключение тем на JavaScript | color-scheme | prefers-color-scheme | localStorage | JS | CSS
Всем привет! ❤️ В этом видео я покажу, как легко добавить на сайт функцию переключения между светлой и тёмной темой с помощью JavaScript и CSS. Мы разберём, как настроить цветовые темы, как сохранить выбор пользователя с помощью localStorage, чтобы тема оставалась неизменной даже после перезагрузки страницы, и как сделать это решение максимально простым и удобным в реализации и использовании. Погрузитесь в тему стилизации интерфейса и узнайте, как улучшить пользовательский опыт с помощью предоставления возможности менять цветовое оформление веб-приложения! Приятного просмотра! 😍 Мой телеграм-канал: https://t.me/katerina_profrontend 00:00:00 - Вступление 00:00:40- Подготовка 00:02:10 - Реализуем смену темы 00:04:16 - localStorage 00:06:08 - color-scheme 00:08:44 - prefers-color-scheme 00:10:37 - Заключение! #javascript #frontend #css #development #learning #beginner #junior Любая информация, представленная в этом видео, принадлежат мне и не отражают позицию моего работодателя или каких-либо организаций, с которыми я связана. Весь материал, показанный в видео, был создан мной лично в свободное от работы время на моем собственном ноутбуке и используются исключительно для демонстрационных целей. Всё показанное в ролике не имеет никакого отношения к интеллектуальной собственности моего работодателя или других связанных со мной организаций.
Всем привет! ❤️ В этом видео я покажу, как легко добавить на сайт функцию переключения между светлой и тёмной темой с помощью JavaScript и CSS. Мы разберём, как настроить цветовые темы, как сохранить выбор пользователя с помощью localStorage, чтобы тема оставалась неизменной даже после перезагрузки страницы, и как сделать это решение максимально простым и удобным в реализации и использовании. Погрузитесь в тему стилизации интерфейса и узнайте, как улучшить пользовательский опыт с помощью предоставления возможности менять цветовое оформление веб-приложения! Приятного просмотра! 😍 Мой телеграм-канал: https://t.me/katerina_profrontend 00:00:00 - Вступление 00:00:40- Подготовка 00:02:10 - Реализуем смену темы 00:04:16 - localStorage 00:06:08 - color-scheme 00:08:44 - prefers-color-scheme 00:10:37 - Заключение! #javascript #frontend #css #development #learning #beginner #junior Любая информация, представленная в этом видео, принадлежат мне и не отражают позицию моего работодателя или каких-либо организаций, с которыми я связана. Весь материал, показанный в видео, был создан мной лично в свободное от работы время на моем собственном ноутбуке и используются исключительно для демонстрационных целей. Всё показанное в ролике не имеет никакого отношения к интеллектуальной собственности моего работодателя или других связанных со мной организаций.