Зачем и как реализовать тёмную тему на своём сайте?

Тёмная тема долгое время оставалась уделом программистов и дизайнеров и лишь недавно пришла в мир широкого пользователя. На компьютерах Apple тёмная системная тема появилась в сентябре 2018, а ровно через год и на телефонах и планшетах под управлением iOS. Тогда же она добралась и до устройств под управлением Android. На Windows 10 тёмная тема в достаточно ограниченом виде присутствовала начиная с 2017 и лишь недавно начала получать поддержку в сторонних приложениях.

Тёмная тема это замечательно. Есть исследования, говорящие что она полезна для глаз, есть и исследования, утверждающие обратное. Истина скорее, всего, где-то посередине и всё очень индивидуально. Ясно одно – существует множество людей, которые тёмной темой пользуются либо в ночное время суток, либо постоянно.

И если вы спросите любого, кто пользуется тёмной темой, что раздражает его больше всего, он ответит – веб. При всей простоте поддержки тёмной темы на сайте, большинство ресурсов почему-то не спешат её поддерживать. Даже Stack Overflow, сайт вопросов и ответов для разработчиков, представил тёмную тему лишь в начале 2020.

Итак, вы не хотите быть как Google, вы не хотите раздражать пользователя лучем яркого света направленного в его глаза из его же монитора. Что для этого нужно сделать? Оказывается, совсем немного. Абсолютно все современные браузеры поддерживают опцию prefers-color-scheme. Она может принимать одно из трёх значений: no-preference, light и dark. В подавляющем большинстве случаев достаточно поддержать лишь значение dark и переопределить цвета всех компонентов вашего сайта. Вот минимально возможный пример:

body {
    background-color: #fff;
    color: #000;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: #fff;
    }
}

Получится что-то вроде такого.

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

Как определить новые цвета для вашего проекта? Если вы дизайнер или в вашей команде есть дизайнер, ответ очевиден. Если вы используете готовую тему, поищите тёмный вариант данной темы либо найдите нравящуюся вам тёмную тему и перенесите цвета из неё.

Если же вы долго и упорно подбирали цвета собственной палитры, то поиск придётся повторить. Для начала определитесь с цветом фона и текста. Они должны быть контрастными, но не слишком. Яркий белый текст плохо читается на абсолютно чёрном фоне (на большинстве дисплеев). Сделайте фон чуть светлее либо текст чуть темнее. Не стоит также использовать равномерно серые цвета вида #131313. Не бойтесь смещения в красный, синий, либо зелёный канал. Если вы знаете какую-либо программу с поддержкой тёмной темы, в которой вам комфортно работать, не стесняйтесь позаимствовать цветовую схему у неё.

После того как вы определитесь с фоном и текстом, посмотрите на ваш сайт. Некоторые элементы вообще не потребуют перекраски. Для остальных подберите комплементарные к фону цвета с помощью сервисов наподобие paletton.com. Для macOS готов посоветовать хорошее приложение Aurora.

Тёмную тему для сайта легко реализовать, при этом она предоставит вам лояльность достаточно большой части пользователей (помните, что тёмную тему в 2020 году используют не только программисты, но и большая часть обычных пользователей macOS, iOS и Android).