Практика JavaScript / Переключение на темную тему

В этом видео мы напишем скрипт на JS для переключения на темную и светлую тему. Мы будем использовать localStorage для сохранения данных о текущей темы, чтобы при перезагрузке страницы и выходе из браузера наша тема не “слетала“. Также я покажу как использовать CSS-переменные. Мы будем задавать в них цвета для темной и светлой темы. Удобство состоит в том, что мы их зададим всего один раз в проекте, а потом когда потребуется изменить какой-то цвет, достаточно найти переменную в JS-файле и изменить ее значение. –––––––––––––––––––––––––––––– Таймкоды из видео: 0:00 - Демонстрация работы переключения 1:31 - Обзор стартового проекта 3:10 - Пишем обработчик для кнопки 4:19 - Работа с localStorage 6:35 - Меняем переменную isDarkTheme при нажатии кнопки 9:16 - Работа с CSS-переменными 12:40 - Прописываем стили в JS 14:34 - Функция для смены темы 18:33 - Завершение –––––––––––––––––––––––––––––– Ссылки: Исходники на Стартовый проект: Результат
Back to Top