Делаем темную версию сайта
Начнём работу с создания index.html
.
Также создадим заготовки стилевых файлов light-mode.css
и dark-mode.css
, а также файла скриптов script.js
.
По умолчанию будет подключена светлая тема, поэтому вернёмся в index.html
и подключим light-mode.css
.
А также добавим идентификатор theme
тегу link
. Это важнейшая часть кода для переключения тем.
Дополним разметку страницы: создадим обёртку, внутри неё добавим заголовок, а также кнопку для переключения тем. Кнопке добавим идентификатор switchMode
. Работа с HTML закончена.
Теперь зададим стили для светлой темы нашего сайта в light-mode.css
.
Зададим общие стили для всех элементов: параметры шрифта, отступы, а также box-sizing
.
Зададим для body
свойство transition
длительностью 1 секунда, а заголовок выровняем по центру.
Стилизуем обёртку. Зададим ей размеры, чтобы она занимала весь вьюпорт по ширине и высоте. Превратим её во флекс-контейнер, и сделаем так, чтобы содержимое шло в одну колонку сверху вниз и центровалось.
Зададим стили для кнопки, а также добавим эффект при наведении.
Теперь скопируем все стили в файл dark-mode.css
, подключим его в index.html
и начнём менять стили.
Для начала зададим тёмный цвет фона для body
.
Затем белый цвет текста для заголовка.
У кнопки цвет фона сделаем белым, а цвет текста чёрным.
Вернёмся в index.html
, подключим обратно светлую тему, а также подключим script.js
.
Перейдём в script.js
и напишем простейший код переключения тем.
Сначала найдём по id
кнопку переключения тем и выведем её в консоль.
Добавим обработчик клика на кнопку. В обработчике будем по id
получать тег link
, который подключает стили нужной темы. Пощёлкайте по кнопке и проверьте, что тег выводится в консоль.
Чтобы переключать темы, будем изменять адрес у тега link
. Тег уже сохранён в переменную theme
, так что давайте возьмём значение href
и выведем его в консоль. Пощёлкайте по кнопке и посмотрите текущий адрес.
Осталось написать условие, которое будет изменять адрес. Если текущее значение равно light-mode.css
, то оно будет меняться на dark-mode.css
и наоборот.
Почистим весь отладочный код. Теперь простой переключатель тем готов.