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

В этом видео мы напишем скрипт на 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 Завершение

––––––––––––––––––––––––––––––

📌 Ссылки на источники

Стартовый проект: https://github.com/toni-wheel/youtube-dark-mode-start
Результат из видео: https://github.com/toni-wheel/youtube-dark-mode-end

Что такое localStorage: https://developer.mozilla.org/ru/docs/Web/API/Window/localStorage
Что такое CSS-переменные: https://developer.mozilla.org/ru/docs/Web/CSS/Using_CSS_custom_properties

––––––––––––––––––––––––––––––

💙 Поддержать меня и мой канал

Yandex деньги ➝ https://yoomoney.ru/to/4100116765956607
Qiwi кошелек ➝ https://qiwi.com/n/CODELAB

––––––––––––––––––––––––––––––

💻 Хостинг, которым пользуюсь сам ➝ https://fozzy.com/aff.php?aff=18530
По промокоду CODELAB скидка 10%

Видео Переключение на темную тему канала CODE LAB - Уроки по программированию