В этом видео мы напишем скрипт на 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 - Завершение
––––––––––––––––––––––––––––––
Ссылки:
Исходники на
Стартовый проект:
Результат
13 views
337
80
1 month ago 01:12:49 1
IT-Борода и основатель Elbrus Bootcamp Георгий Бабаян | ИНТЕРВЬЮ О ПРОГРАММИРОВАНИИ
1 month ago 01:53:01 1
Полный курс по Next js - Изучи Nextjs за 2 часа! | React SSR +таймкоды
1 month ago 00:13:43 1
Типичные задачи junior разработчика в компании | Как работают джуниоры? (мой опыт)
1 month ago 00:17:48 6
Web Dev полый курс с нуля. Урок 1. Введение. План разработки
1 month ago 01:47:36 1
CSS для Начинающих - Практический Курс
1 month ago 01:19:23 1
HTML для Начинающих - Практический Курс
1 month ago 02:35:07 12
🔥 Создай свою Fullstack тапалку с нуля на Vue 3. Практика по Telegram Apps
2 months ago 00:39:14 7
Наследование в TypeScript. Полное руководство по наследованию классов в TS
2 months ago 06:55:31 1
JavaScript c Нуля - Курс для начинающих с практикой БЕЗ ВОДЫ
2 months ago 02:03:50 1
Практика JavaScript с нуля за 2 часа. Сделаем целый сайт!