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

15

Від автора: якщо ви схожі на мене, ви часто сидите в інтернеті після півночі чи прокидаєтеся, щоб подивитися щось в телефоні. Сучасні LED дисплеї випускають занадто багато світла, до чого людині ще тільки доведеться звикнути. Наприклад, мобільні пристрої знижують рівень синього світла, обманюючи наші очі та мозок) і змушуючи повірити, що зараз «день». Рівень мелатоніну знижується, що ускладнює сон.

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

Після опівночі

Спершу необхідно визначити умови для переходу сторінки в нічний режим. Користувачі можуть:

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

Використовувати екран при тьмяному освітленні.

У користувачів може бути фотофобія (чутливість до яскравого світла).

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

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

Фільтр інверсії не впливає на фон сторінки, а також інвертує кольори більшості зображень

Тобто переводити елементи сторінки в нічний режим необхідно окремо. На щастя, це не так складно. Нам необхідно:

Змінити фон сторінки на який-небудь темний.

Змінити колір тексту на відповідний світлий з хорошою контрастністю.

Чорно-білі зображення повинні бути інвертовані, але решта (кольорові фотографії) чіпати не можна.

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

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

Не забудьте змінити колір посилань! Тут вам допоможе inherit або currentColor: якщо використовувати ці властивості для посилань, посилання будуть автоматично змінювати колір з CSS код вище.

З зображеннями у нас один з двох варіантів. Якщо инвертируемых зображень на сторінці менше ніж кольорових, то їм можна додати спеціальний клас. Приміром, SVG автограф Жюля Верна з інверсією буде показаний в нормальному режимі, як в демо:

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

До коду додається клас:

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

Код Sass:

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

Зверніть увагу, що в Webkit браузерах все ще потрібні вендорные префікси. І навпаки, якщо більшість зображень необхідно інвертувати, то ті, які інвертувати не треба, можна захистити:

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

Якщо інвертувати зображення, то сонце стане чорним, тобто зображення необхідно захистити від інверсії

Додамо клас для захисту зображення:

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

І потім скористаємося псевдо-класом :not для зміни лише тих зображень, у яких немає спеціального класу:

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

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

body {
transition: 2s background, color;
}

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

На даний момент скрипт визначення часу доби запускається один раз: тобто, якщо користувач зайде на сторінку в годину ночі, то цей час назавжди збережеться в скрипті. Якщо припустити, що вкладка зі сторінкою може бути відкрито всю ніч, то ви, швидше за все, захочете перевіряти час за кожну годину і скидати режим сторінки:

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

Доброї ночі

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