Телефон: 8-800-350-22-65
WhatsApp: 8-800-350-22-65
Telegram: sibac
Прием заявок круглосуточно
График работы офиса: с 9.00 до 18.00 Нск (5.00 - 14.00 Мск)

Статья опубликована в рамках: Научного журнала «Студенческий» № 42(212)

Рубрика журнала: Информационные технологии

Скачать книгу(-и): скачать журнал часть 1, скачать журнал часть 2, скачать журнал часть 3, скачать журнал часть 4, скачать журнал часть 5, скачать журнал часть 6, скачать журнал часть 7

Библиографическое описание:
Берьянов М.С. ИЗМЕНЕНИЕ ЦВЕТОВОГО ОФОРМЛЕНИЯ ВЕБ-САЙТА В ЗАВИСИМОСТИ ОТ ВРЕМЕНИ СУТОК // Студенческий: электрон. научн. журн. 2022. № 42(212). URL: https://sibac.info/journal/student/212/275026 (дата обращения: 29.03.2024).

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

Берьянов Максим Сергеевич

студент, факультет ПИиКТ, Университет ИТМО,

РФ, г. Санкт-Петербург

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).

Оставить комментарий

Форма обратной связи о взаимодействии с сайтом
CAPTCHA
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.