Как сделать темную тему для сайта с помощью JS

📋 Кратко, о чем это видео

В этом видео мы напишем скрипт на JS для переключения на темную и светлую тему. Мы будем использовать localStorage для сохранения данных о текущей темы, чтобы при перезагрузке страницы и выходе из браузера наша тема не "слетала".

Также я покажу как использовать CSS-переменные. Мы будем задавать в них цвета для темной и светлой темы. Удобство состоит в том, что мы их зададим всего один раз в проекте, а потом когда потребуется изменить какой-то цвет, достаточно найти переменную в JS-файле и изменить ее значение.

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

📌 Полезные ссылки

Готовый код из видео ➝ https://codelab.pro/pishem-temnuyu-temu-dlya-sajta/

Стартовый проект ➝ https://github.com/toni-wheel/youtube-dark-mode-start
Что такое localStorage ➝ https://developer.mozilla.org/ru/docs/Web/API/Window/localStorage
Что такое CSS-переменные ➝ https://developer.mozilla.org/ru/docs/Web/CSS/Using_CSS_custom_properties

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

🕒 Таймкоды из видео

0:00 Демонстрация работы переключения
1:31 Обзор стартового проекта
3:10 Пишем обработчик для кнопки
4:19 Работа с localStorage
6:35 Меняем переменную isDarkTheme при нажатии кнопки
9:16 Работа с CSS-переменными
12:40 Прописываем стили в JS
14:34 Функция для смены темы
18:33 Завершение