ИЗМЕНЕНИЕ ЦВЕТОВОГО ОФОРМЛЕНИЯ ВЕБ-САЙТА В ЗАВИСИМОСТИ ОТ ВРЕМЕНИ СУТОК

WEBSITE THEME CHANGE DEPENDING ON TIME OF THE DAY

Maxim Beryanov

Student, PIKT faculty, ITMO University,

Russia, Saint-Petersburg

АННОТАЦИЯ

В последнее время появилась тенденция изменять дизайн веб-сайта в зависимости от времени суток – днём сайт изобилует светлыми тонами, а ночью, наоборот, тёмными. Таблицы стилей CSS позволяют веб-дизайнеру минимальными усилиями изменять оформление сайта. В данной статье предлагается рассмотреть принцип такого изменения темы.

ABSTRACT

Recently, there has been a trend to change website’s design depending on time of the day - during the day the site is replete with light tones, and at night, on the contrary, with dark ones. CSS style sheets allow a web designer to change the site look with minimal effort. This article proposes to consider the principle of such a change in theme.

Ключевые слова: веб, цвет, тема, дизайн, адаптивность.

Keywords: web, color, theme, design, adaptability.

В случае использования одностраничного приложения (Single-Page-Application [1]), определение времени выполняется на клиенте (в браузере) и выявляется именно текущее время пользователя. Это является правильным решением в сравнении с серверным рендерингом страниц (Server-Side-Rendering [2]), где часовой пояс, в котором находится сервер, может не совпадать с часовым поясом пользователя, поэтому обязательно возникают временные коллизии.

Для решения поставленной задачи, прежде всего, нужно определить стили веб-сайта (рисунок 1). В файле index.css мы вводим селектор атрибута данных [3] в теге html (под названием theme), устанавливаем CSS-переменные в теге body для фона страницы и цвета текста (background и color соответственно), и изменяем их в двух случаях: когда data-theme="dark" или data-theme="light".

Рисунок 1. Адаптивные таблицы стилей

Далее, в скрипте на языке JavaScript (рисунок 2) мы используем объект Date, чтобы получить текущее время суток пользователя, а затем оператор if, чтобы определить, находится ли вычисленное время между 6:00 и 18:00. Если это так, то мы оставляем таблицу стилей в контексте светлой темы (по умолчанию), а если нет, то неявно применяем таблицу стилей темной темы (рисунок 3).

Рисунок 2. Изменение стилей в зависимости от времени суток

Рисунок 3. Пример зависимости оформления от времени суток

Таким образом, мы можем настроить время и стили в соответствии со своими потребностями, а также использовать дополнительные таблицы стилей и код JavaScript для создания более сложных и изящных тем для своего веб-сайта.

Список литературы:

1. Одностраничное приложение [Электронный ресурс] URL: https://habr.com/ru/post/350750/ (дата обращения: 19.12.2022).
2. Серверный рендеринг [Электронный ресурс] URL: https://habr.com/ru/post/527310/ (дата обращения: 19.12.2022).
3. Селекторы атрибута [Электронный ресурс] URL: https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors (дата обращения: 19.12.2022).