Ночной режим для вашего сайта. Часть 1

Дата публикации: 2016-01-06

Ночной режим для вашего сайта

От автора: если вы похожи на меня, то вы часто сидите в интернете после полуночи или просыпаетесь, чтобы посмотреть что-то в телефоне. Современные LED дисплеи испускают слишком много света, к чему человеку еще только предстоит привыкнуть. К примеру, мобильные устройства понижают уровень синего света, обманывая наши глаза (и мозг) и заставляя поверить, что сейчас «день». Уровень мелатонина понижается, что затрудняет сон.

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

После полуночи

Сперва необходимо определить условия для перехода страницы в ночной режим. Пользователи могут:

Сидеть в интернете после захода и до восхода солнца.

Использовать экран при тусклом освещении.

У пользователей может быть фотофобия (чувствительность к яркому свету).

О первых двух случаях мы знаем или хотя бы можем предположить. С третьим случаем же сложнее, пользователь должен сам подать знак. Значит, нам необходимо реализовать два варианта перехода в ночной режим, автоматический и ручной. Простейший автоматический метод заключается в определении местного времени и добавлении специального класса к корневому тегу html:

var currentTime = new Date().getHours();

function timeCheck() {
    if (currentTime > 18 || currentTime < 6) {
      document.documentElement.classList.add('night');
    }
}
timeCheck();

var currentTime = new Date().getHours();

function timeCheck() {

if (currentTime > 18 || currentTime < 6) {

document.documentElement.classList.add('night');

}

timeCheck();

Скрипт задает нестрогое предположение, что солнце встает в 6 утра и садится через 12 часов. Конечно, все зависит от времени года, летнего времени и географического положения; более точный скрипт будет определять местоположение пользователя, и затем использовать данную информацию для вычисления восхода и заката именно под текущий день.

Американская ночь

В принципе, для большинства сайтов с черным текстом на белом фоне переключение в ночной режим это обычная инверсия цветов. Для этого у нас есть CSS filter:

.night { filter: invert(100%); }

1	.night { filter: invert(100%); }

К сожалению, результат не совсем такой, как можно было бы ожидать – фильтр не изменяет цвет фона страницы:

Фильтр инверсии не влияет на фон страницы, а также инвертирует цвета большинства изображений

Т.е. переводить элементы страницы в ночной режим необходимо по отдельности. К счастью, это не так сложно. Нам необходимо:

Изменить фон страницы на какой-нибудь темный.

Изменить цвет текста на подходящий светлый с хорошей контрастностью.

Черно-белые изображения должны быть инвертированы, но остальные (цветные фотографии) трогать нельзя.

Для чистоты эксперимента новые стили я написал в Sass, с такой же легкостью можно воспользоваться vanilla CSS:

.night {
    body { 
        background: #000; 
        color: #fff;
    }
}

.night {

body {

background: #000;

color: #fff;

}

Не забудьте сменить цвет ссылок! Тут вам поможет inherit или currentColor: если использовать эти свойства для ссылок, то ссылки будут автоматически менять цвет с CSS кодом выше.

С изображениями у нас один из двух вариантов. Если инвертируемых изображений на странице меньше чем цветных, то им можно добавить специальный класс. К примеру, SVG автограф Жюля Верна с инверсией будет показан в нормальном режиме, как в демо:

К коду добавляется класс:

<img src="jules-verne-autograph.svg" alt="Jules Verne" class="switch">

1	<img src="jules-verne-autograph.svg" alt="Jules Verne" class="switch">

И код Sass:

.night {
    body { 
        background: #000; 
        color: #fff;
    }
    img.switch { 
        filter: invert(100%);
    }
}

.night {

body {

background: #000;

color: #fff;

}

img.switch {

filter: invert(100%);

}

Обратите внимание, что в Webkit браузерах все еще требуются вендорные префиксы. И наоборот, если большинство изображений необходимо инвертировать, то те, которые инвертировать не надо, можно защитить:

Если инвертировать это изображение, то солнце станет черным, т.е. изображение необходимо защитить от инверсии

Добавим класс для защиты изображения:

<img src="earth-moon-sun-system.png" class="protected" alt="Diagram of Earth-Moon-Sun system">

1	<img src="earth-moon-sun-system.png" class="protected" alt="Diagram of Earth-Moon-Sun system">

И затем воспользуемся псевдо-классом :not для изменения только тех изображений, у которых нет специального класса:

img:not(.protected) { 
    filter: invert(100%);
}

img:not(.protected) {

filter: invert(100%);

}

Для сглаживания перехода цветов добавим свойство transition к тегу body в базовых стилях только для тех свойств, которые должны изменяться при переходе в ночной режим:

body { 
        transition: 2s background, color;
}

body {

transition: 2s background, color;

}

Добрый день, солнце

На данный момент скрипт определения времени суток запускается единожды: то есть, если пользователь зайдет на страницу в час ночи, то это время навсегда сохранится в скрипте. Если предположить, что вкладка со страницей может быть открыта всю ночь, то вы, скорее всего, захотите проверять время каждый час и сбрасывать режим страницы:

function callEveryHour() {
    setInterval(timeCheck(), 1000 * 60 * 60);
}

function callEveryHour() {

setInterval(timeCheck(), 1000 * 60 * 60);

}

Доброй ночи

Данный скрипт берет на себя работу по автоматической смене стилей сайта, по крайней мере, на базовом уровне. Вы, скорее всего, заметили, что чтобы не запутаться, я не использовал именно этот набор методов, описанных в данной статье; кроме того, изменения цвета не сохраняются при переходе на новые страницы сайта. О ручном переключении цветовой палитры я буду рассказывать в следующей статье.

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Метки: JavaScript, css