Как менять CSS стили в зависимости от времени суток

Всем привет. Вы наверняка видели на некоторых сайтах такую интересную фишку, если зайти днем, то фон и элементы дизайна в светлом стиле, а если вечером или ночью, то в темном. И еще бывает приветственная надпись, типа: Добрый вечер, добрый день или доброе утро. То есть CSS стили автоматически меняются в зависимости от времени суток. Это эффектный прием, который на посетителя производит хорошее впечатление. Такой сайт у него отложится в памяти и, возможно, он вернется на него снова. К счастью такую фичу реализовать достаточно легко с помощью PHP или JavaScript. Я уже писал о том, как добавить дату и время на сайт и о некоторых нюансах разных способов. Сейчас же мы будем работать только со временем. и наxнем с PHP.

Меняем стили сайта по времени суток на PHP

Тут все до безобразия просто.

1
2
3
4
5

if(date('H') > 00 && date('H') < 06){
  $style = '/css/style-night.css';
}else{
  $style = '/css/style.css';
}

Мы просто говорим скрипту, что если время сервера больше 00:00 или меньше 06:00, то устанавливаем ночные стили для сайта. Если время меньше 00:00 и больше 06:00, то CSS будут обычными.

<link rel='stylesheet' href='<php echo $style; ?/>' type='text/css' media='all'>

Можно так же просто изменить цвет фона в зависимости от времени суток.

1
2
3
4
5

if(date('H') > 00 && date('H') < 06){
  $bg = '#333';
}else{
  $bg = '#fff';
}

И в head прописать:

1
2
3

<style type="text/css">
background: < ?php echo $bg; ?>;
</style>

Минус такого подхода в том, что на сайт могут заходить из разных часовых поясов, а время будет браться с сервера и будет неизменным. То есть если время сервера московское, то пользователям из Владивостока такая штука может не понравиться. Поэтому плавно переходим ко второму способу.

Меняем стили сайта по времени суток на JavaScript

Здесь практически все то же самое, только скрипт будет ориентироваться на время, которое установлено на устройстве пользователя. В подавляющем большинстве случаев оно соответствует региону нахождения.
Поэтому наша идея отлично сработает и мы сможет показать персонально каждому отдельные стили в зависимости от времени суток.

1
2
3
4
5
6
7

var data = new Date();
var link = document.querySelector('link[rel="stylesheet"]');
if (data.getHours() > 0 && data.getHours() < 6) {
  link.setAttribute('href', '/css/style-night.css');
}else{
  link.setAttribute('href', '/css/style.css');
}

Или так:

1
2
3
4
5
6
7

var data = new Date();
var body = document.querySelector('body');
if (data.getHours() > 0 && data.getHours() < 6) {
  body.style.background = '#777';
}else{
  body.style.background = '#fff';
}

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