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

body.dark-theme {


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


}

Поддержка браузерами свойства 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-изображения исключаем из правила обратного инвертирования, т.к. они зачастую используются для иконок и различных маркеров, и, как правило, отлично инвертируются.

Возвращаем изображениям первоначальный вид после применения свойства 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

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

Заключение

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