"Переходи на темную сторону", или как пользователи берегут заряд аккумулятора

26.03.2021
15 мин
654
наш канал в ЯНДЕКС.ДЗЕН.

Темная тема действительно экономит заряд смартфона?

Данное утверждение появилось на просторах сети уже довольно давно и оно имеет под собой доказанные основания. Помимо того, что темная тема снижает утомляемость глаз пользователя, известно, что она также помогает сберечь заряд аккумулятора, если это касается смартфонов с экранами OLED/AMOLED.

Объясняется это тем, что при включении темной темы на OLED-экранах пропадает необходимость подсвечивать пиксели черного цвета, тем самым на его подсвечивание не будет тратиться энергия, в то время, как остальные цвета требуют больше энергии, включая белый, который является самым затратным.

Google также подтвердил это предположение во время своего саммита разработчиков Android, для тестирования компания использовала свой оригинальный смартфон Pixel.

Расход заряда аккумулятора на устройствах с AMOLED и LCD экранами

Расход заряда аккумулятора на устройствах с AMOLED и LCD экранами при использовании стандратной и темной темы - Android Dev Summit (Google)


В компании сравнили показатели энергопотребления при максимальном значении яркости для обычного режима и темного режима в приложении Google Maps. Эти цифры не изменились для IPhone, т.к. у него LCD-экран, а вот у Pixel с его AMOLED-экраном энергопотребление снизилось более чем в 2,5 раза.

Расход заряда аккумулятора в различных режимах

Расход заряда аккумулятора в различных режимах


В связи с этим Google начал продвигать темные темы как способ сохранения заряда батареи на устройствах с Android и уже добавил такой функционал в новые версии Android и браузер Chrome.

Как включить темную тему на смартфоне Android?

Необходимо зайти в настройки, выбрать пункт “Экран”, затем найти параметр “Темная тема” или “Темный режим”.

Как включить темную тему на смартфоне Android Как включить темную тему на смартфоне Android 2 Как включить темную тему на смартфоне Android 3

Как включить темную тему на смартфоне Android


Все приложения в смартфоне, которые поддерживают работу в темном режиме, автоматически подстроятся под нашу новую тему.

Как включить темную тему для сайтов?

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

Что касается десктопов: не каждый пользователь в курсе экспериментальной функции браузера Chrome - Force Dark Mode for Web Contents, которая автоматически “перекрашивает” все сайты в темный цвет.

Для ее включения необходимо ввести в адресной строке браузера chrome://flags/ и найти эту настройку.

Как включить темную тему для сайтов?

Затем следует перевести настройку в Enabled и перезапустить браузер.

Как включить темную тему для сайтов в Chrome

После чего Chrome будет автоматически адаптировать все сайты к темной теме.

Как включить темную тему для сайтов

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

Так хорошо, не будем уходить в сторону, это все касается десктопа, а что же про мобильные?

Темный режим для мобильных

На мобильных ситуация сложнее - большинство пользователей ограничатся включением темной темы в настройках телефона. Даже если у него и получится включить принудительную темную тему для всех сайтов, то это часто приводит к нечитабельности текста, скрытию важных информационных блоков и элементов на сайте, а также к “съехавшей” верстке, что напрямую будет влиять на конверсии на сайте. В лучшем случае пользователь просто проведет лишнее времени в поисках нужной ему информации, а в худшем - покинет сайт.

Работа встроенной функции Force Dark Mode for Web Contents

Работа встроенной функции Force Dark Mode for Web Contents


Универсальное решение всегда будет хуже - здесь мы видим недочеты при работе функции Force Dark Mode for Web Content.

К тому же темная тема - это не всегда черная тема, фон сайта не должен быть угольно-черным, а текст и интерактивные элементы — белыми. Здесь нужно грамотно подойти к определению темной цветовой гаммы. Цвет фона можно получить затемнив фирменные цвета сайта, либо просто использовать темно-серый. Шрифт также не должен быть слишком контрастным на темном фоне.

Также, если есть возможность, не стоит забывать о картинках: если на сайте много светлых изображений, есть смысл перекрасить их для использования в темной теме.

Способы внедрения темной темы на сайте

1. “Быстро и дешево”. Схема рабочая

CSS-фильтр

Самый быстрый способ подключить темную тему на своем сайте - добавить несколько правил в CSS, для этого не обязательно использовать новую таблицу стилей.

К счастью, в CSS имеется свойство filter, которое поможет в этом. Данное свойство дает возможность инвертировать цвета и применимо к любому элементу.

Реализация темной темы подразумевает следующие этапы:

  • добавляем класс dark-theme тегу <html> или <body> при помощи javascript.
    Подробнее здесь.
  • дописываем несколько правил в CSS, используя свойство invert

Важно: не все браузеры имеют поддержку записи свойства invert(). Для наилучшей поддержки укажите 100% в качестве параметра.

body.dark-theme {

filter: invert(100) hue-rotate(180deg); /* hue-rotate вернет тона цветов */
}

Поддержка браузерами свойства filter

Поддержка браузерами свойства filter - сайт https://caniuse.com/


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

Как обойти эту проблему?

Легко. Можно указать background-color по умолчанию:

body.dark-theme {

background-color: #fefefe;
filter: invert(100) hue-rotate(180deg);
}

Чтобы данная проблема не проявилась у дочерних элементов, можно указать наследуемое значение (inherit) для всех элементов, т.е. конечный результат будет таким:

body.dark-theme {

background-color: #fefefe;
filter: invert(100) hue-rotate(180deg);
}
body.dark-theme * {
background-color: inherit;
}

Использование звездочки (*) подразумевает универсальный селектор, который имеет невысокую специфичность, поэтому оно сработает исключительно для элементов, у которых не задан фоновый цвет.

Что сделаем с изображениями?

После применения свойства фильтра изображения на сайте станут отображаться в негативе, поэтому стоит их инвертировать обратно, используя то же самое правило:

body.dark-theme img:not([src*=".svg"]), body.dark-theme video, body.dark-theme div[style*="url"] {

filter: invert(100) hue-rotate(180deg);
}

Селектор div[style*="url"] можно использовать как универсальный для блоков div с заданным изображением в качестве бэкграунда, либо дополнить данное CSS-правило пользовательскими селекторами.

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

Cвойства фильтра для изображений Cвойства фильтра для изображений 2 Cвойства фильтра для изображений 3

Возвращаем изображениям первоначальный вид после применения свойства filter


Итоговая версия содержит минимальный набор правил и в общем и целом делает всё, что необходимо для реализации темной темы на сайте:

body.dark-theme {

background-color: #fefefe;
filter: invert(100) hue-rotate(180deg);
}
body.dark-theme * {
background-color: inherit;
}
body.dark-theme img:not([src*=".svg"]), body.dark-theme video, body.dark-theme div[style*="url"] {
filter: invert(100) hue-rotate(180deg);
}

Плюсы данного подхода:

  • Можно быстро адаптировать сайт к темной теме смартфона
  • Чем меньше CSS-правил и подключаемых файлов - тем меньше вес страницы

Минусы:

  • Теряются фирменные цвета, сайт становится ч/б за исключением картинок.
  • В некоторых случаях картинки немного выцветают после двойного перекрашивания (что на самом деле не всегда заметно глазу):

2. “Дорого и долго”. Индивидуальный подход

Переопределение стилей

Простой, но достаточно трудоемкий способ, подразумевающий под собой переопределение всех необходимых CSS-правил.

План реализации следующий:

Здесь мы также добавляем класс тегу html или body при помощи js, либо работаем с новой таблицей стилей dark-theme.css. Подробнее здесь.

Затем занимаемся переопределением каждого правила, которое затрагивает цветовое оформление блоков. Селектор при этом используем включая наш новый класс .dark-mode.

Пример:

body {

color: #221;
background: #fff;
}
a {
color: #00333c;
}
/* Стили для темного режима */
body.dark-theme {
color: #eaeaea;
background: #3c0000;
}
body.dark-theme a {
color: #ff7979;
}

CSS-переменные

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

body {

--text-color: #222;
--bkg-color: #fff;
--link-color: #0033cc;
}

Для темной темы:

body.dark-theme {

--text-color: #eaeaea;
--bkg-color: #3c0000;
--link-color: #ff7979;
}

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

body {

color: var(--text-color);
background: var(--bkg-color);
}
a {
color: var(--link-color);
}

На что стоит обращать внимание:

  • следует учесть все семантические элементы на странице.
  • свойство box-shadow — цветом управлять нельзя, нужно менять все свойства, либо оставлять тени светлыми.
  • SVG, встроенные в html-код — используется свойство fill, а не background и свойство stroke вместо color, либо наоборот.

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

Среди недостатков стоит отметить излишнюю трудоемкость, особенно в рамках крупного сайта, а не одностраничника, однако результат оправдает трудозатраты.

«Правильный» метод зависит от требований вашего проекта. Например, если вы создаете с нуля большой проект, вы можете использовать переменные CSS и заранее задать их, что поможет в дальнейшем справиться с большой базой кода. С другой стороны, если ваш проект уже давно создан и вам нужно просто быстро “накатить” темную тему на сайт, то стоит присмотреться к первому способу с использованием CSS-фильтра, а все “косяки” почистить вручную небольшим количеством стилей.

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

Более того, наша статья не говорит о том, что мы можем использовать только один метод. Иногда сочетание методов оказывается наиболее эффективным путем.

Внедрение темной темы на сайте

Для переключения между стандартной светлой и темной темой нам нужен специальный переключатель-кнопка:

<button class="toggle-theme">Темная тема</button>

Он может находиться как в шапке сайта, так и в любом другом удобном для взаимодействия месте.

Смена класса тега <body>

Общая идея такой реализации состоит в том, чтобы не затрагивая нашу тему «по умолчанию», создать полный набор цветовых стилей, используя специальный класс dark-theme, который будет задан тегу <body> при клике на специальную кнопку.

Скрипт для переключения класса:

// Селектор кнопки .toggle-theme

const btn = document.querySelector('.toggle-theme');
// Событие >клика по кнопке
btn.addEventListener('click', function() {
// При переключении меняем класс (удаляем или добавляем) в зависимости от текущего состояния
document.body.classList.toggle('dark-theme');
// Создаем cookie, чтобы затем проверять ее на сервере
var theme_cookie = document.body.classList.contains("dark-theme") ? "dark" : "light";
document.cookie = "theme=" + theme_cookie ;
})

Чтобы после перезагрузки страницы сайта наша тема оставалась включенной, мы можем использовать переменную cookie "theme", которую задаем в js, а затем проверяем на стороне сервера:

<?php

$theme_сlass = '';
if (!empty($_COOKIE['theme']) && $_COOKIE['theme'] == 'dark') {
$theme_сlass = 'dark-theme';
}
?>
<!DOCTYPE html>
<html lang="ru">
<body class="<?php echo $theme_сlass; ?>">
</body>
</html>

После этого можно переопределять стили для темного режима, используя CSS-фильтр или переопределение стилей, о чем мы говорили выше.

Использование разных таблиц стилей

Вместо того, чтобы хранить все стили вместе в одной таблице стилей, мы можем также переключаться между таблицами стилей для каждой темы. Этот способ предполагает, что у вас есть готовые полные таблицы стилей. Например, светлая тема по умолчанию, такая как light-theme.css и темная тема - dark-theme.css.

По умолчанию подключаем только одну таблицу стилей для стандартной светлой темы:

<!DOCTYPE html>

<html lang="ru">
<head>
< ! -- Light theme CSS -- >
<link rel="stylesheet" href="/css/light-theme.css" id="theme-toggle">
</head>
</html>

Здесь используем идентификатор #theme-toggle, чтобы мы могли обратиться к нему с помощью JavaScript для переключения между светлым и темным режимами. Только на этот раз мы переключаем файлы вместо классов:

// Селектор кнопки .toggle-theme

const btn = document.querySelector(".toggle-theme");
// Селектор таблицы стилей <link>
const theme = document.querySelector("#theme-toggle");
// Клик по кнопке
btn.addEventListener("click", function() {
// Если текущий урл содержит "light-theme.css"
if (theme.getAttribute("href") == "light-theme.css") {
// тогда переключим его на "dark-theme.css"
theme.href = "dark-theme.css";
var theme_cookie = "dark";
// Иначе
} else {
// переключаем его на "light-theme.css"
theme.href = "light-theme.css";
var theme_cookie = "light";
}
// Создаем cookie, чтобы затем проверять ее на сервере
document.cookie = "theme=" + theme_cookie ;
});

Также, как и в случае с переключением класса, проверяем переменную cookie на стороне сервера:

<?php

$theme_StyleSheet = 'light-theme.css';
if (!empty($_COOKIE['theme']) && $_COOKIE['theme'] == 'dark') {
$theme_StyleSheet = 'dark-theme.css';
}
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<link href="/css/<?php echo $theme_StyleSheet; ?>" rel="stylesheet" id="theme-toggle">
</head>

Информация о поддержке темной темы на вашем сайте для браузера

Чтобы проинформировать User-Agent браузера о предпочтениях системной цветовой схемы и указать, какие цветовые схемы поддерживаются на странице, мы можем использовать метатег color-scheme.

<meta name="color-scheme" content="dark light">

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

Для чего это нужно?

Когда этот метатег добавлен, то браузер принимает во внимание предпочтения цветовой схемы пользователя при рендеринге элементов страницы, контролируемых User-Agent (например, такие как <button> и <input>). Он отображает цвета согласно заданной теме для основного фона, элементов управления формы и прочих стилей, управляемых UA.

Поддержка тега браузерами:

Поддержка тега браузерами

На данный момент свойству не хватает широкой поддержки браузером, хотя Samsung Internet и Chrome для Android поддерживают его.

prefers-color-scheme

CSS медиа-запрос prefers-color-scheme позволяет определить на стороне браузера, предпочитает ли пользователь светлую или темную цветовую тему, в зависимости от настроек в операционной системе. Синтаксис CSS следующий: например, если пользователь предпочитает темную схему, то все правила CSS, предназначенные для нее следует указывать в рамках данного медиа-запроса:

@media (prefers-color-scheme: dark) {

body {
background: black;
}
}

И, для светлой темы, соответственно:

@media (prefers-color-scheme: light) {

body {
background: white;
}
}

Также предпочитаемую цветовую схему пользователя можно проверить средствами javascript, однако браузер должен поддерживать matchMedia.

const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

const userPrefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
if(prefersDark){
/*здесь можем добавлять класс для body, либо подключать иную таблицу стилей для темной темы*/
console.log("Пользователь предпочитает темную тему");
}

Версии браузеров с полной поддержкой matchMedia

Версии браузеров с полной поддержкой matchMedia


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

Заключение

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

Вы дочитали статью! Отличная работа!

  • В некоторых нюансах продвижения сайтов сложно разобраться без опыта. Вы можете доверить продвижение вашего сайта нам. Отправьте заявку и мы изучим ваш сайт и предложим эффективную стратегию продвижения вашего бизнеса в сети.
  • Подпишитесь на нашу рассылку - ежемесячно мы публикуем статьи про SEO-продвижение, онлайн-маркетинг, контекстную рекламу, новости отрасли и многое другое.
  • Понравилась статья? Поделитесь ссылкой на статью в социальных сетях - возможно, статья окажется полезной для ваших друзей и коллег.
  • Хотите стать экспертом?
    Предлагаем вам почитать другие наши статьи, вот некоторые из них:
  • Ищете работу? Приглашаем вас в наш дружный и профессиональный коллектив: интересные задачи, перспективы профессионального и личностного роста, одна из самых опытных команд в области SEO-продвижения в Санкт-Петербурге. Наши вакансии.

Рекомендуем ознакомиться со значениями терминов:

JavaScript / JSBM25ЧПУКоды ответа сервераМикроразметкаАдаптивная версткаschema.orgGET-параметрRobots.txtFTPСкриптЮзабилити сайтаСайдбарCanonicalGoogle Search ConsoleПарсерСтатичный web-сайтСтатичная web-страницаПагинацияРеферерCSSCMSОбфускацияIP-адресХостингФутерРедиректПингДоменБаг

Ваши комментарии|отзывы|вопросы