Автоматическое изменение темы веб-сайта в зависимости от времени пользователя
В настоящее время на современных веб-сайтах часто встречаются светлые и темные темы, поэтому в этой статье мы узнаем, как создать такой веб-сайт с дополнительным поворотом, где мы добавим функцию автоматического изменения темы сайта в зависимости от того, это день или ночь.
Теперь давайте начнем реализацию нашего веб-сайта с автоматической сменой темы.
Первое, что нам нужно сделать, это создать нормальный сайт, на котором нужно реализовать автоизменение темы. В моем случае я использовал шаблон сайта от w3schools. Этот веб-сайт может быть построен в любой теме по умолчанию, которую вы хотели бы, в моем случае я сначала сделал ее в светлой теме.
Итак, мы создадим файл template.html, в котором будет наш основной шаблон веб-сайта. В вашем случае это может быть ваш собственный сайт, на котором вы хотели бы это реализовать.
Теперь мы создадим файл index.css, в котором будут храниться все CSS. Одна вещь, которую мы должны иметь в виду, это использовать свойство root для хранения цветов нашей темы, которые мы использовали при создании веб-сайта, поскольку это будет то, что мы позже изменим для изменения нашей темы.
Как только мы закончим создание веб-сайта в любой конкретной теме, мы добавим функцию автоматического изменения темы в зависимости от времени пользователя. Для этого мы создадим файл JavaScript и назовем его auto-theme-changer.js и напишем в нем следующий код.
И браво 🎊 мы закончили с автоматической сменой темы в зависимости от времени пользователя!
Теперь мы добавим кнопку для ручной смены темы на сайте. Для этого мы добавим несколько строк внутри тега body в наш файл template.html.
Как только это будет сделано, мы должны добавить обработчик события click для этой кнопки, который изменит тему при нажатии. Для этого мы снова напишем несколько строк кода в файле auto-theme-changer.js.
И тада ✌️, мы также добавили кнопку смены темы, и на этом мы закончили с нашим простым веб-сайтом с автоматической сменой темы.
Чтобы просмотреть полный код, вы можете проверить мой репозиторий github: https://github.com/paprajapati9/auto-changing-theme
