Я долго считал тёмные темы на сайтах и в приложениях глупостью и неудобным для восприятия контента костылём. Но моя новая привычка скролить ленты перед сном заставила понять, что тёмное оформление всё же комфортнее для зрения.
Я изучил несколько статей, где предлагались разные решения, включая подключение скриптов, но эта мера мне показалась излишней. Я быбрал способ на чистом CSS. При этом для меня было важным перекрашивать не только фон и текст на странице, но и логотип.
Фон и текст
В таблице стилей прописываем, какие цвета должны быть у фона страницы и текста:
:root {
--var-bgcolor: #fff;
--var-fontcolor: #000;
}
И ссылаемся на эти данные для тела страницы:
body {
background-color: var(--var-bgcolor);
color: var(--var-fontcolor);
}
Для того, чтобы тема страницы менялась автоматически в зависимости от установок на устройстве пользователя, используем функцию prefers-color-scheme. Здесь мы указываем, как будут выглядеть фон и текст при включенной тёмной теме. Я выбрал два оттенка серого цвета, не создающих резкого контраста при использовании друг с другом:
@media (prefers-color-scheme: dark) {
:root {
--var-bgcolor: #222;
--var-fontcolor: #eee;
}
}
Теперь при включении на устройстве пользователя тёмного режима, тема на сайте также автоматически меняется на тёмную, причём даже без обновления страницы.
Логотип
Для того, чтобы логотип менял свой цвет при включении тёмного режима, предварительно сохраняем его файл в векторном формате SVG. В этом помогут Adobe Illustrator, Figma, Inkscape или любой другой векторный редактор.
В процессе поисков решения я встретил рекомендацию прогонять SVG через оптимизаторы вроде SVGOMG, чтобы код файла был проще и чище.
Скачиваем оптимизированный логотип и открываем в любом текстовом редакторе, например Блокнот на Windows или Noto на Mac. Увидим примерно такой код, вместо многоточия в path будет длинная последовательность символов — это координаты всех точек изображения:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 417.5 417.5" style="enable-background:new 0 0 417.5 417.5;" xml:space="preserve">
<path d="..."/>
</svg>
Копируем этот код и вставляем прямо в разметку страницы, где должен находиться логотип, добавляем в тег svg класс logotype, получится так:
<svg class="logotype" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 417.5 417.5" style="enable-background:new 0 0 417.5 417.5;" xml:space="preserve">
<path d="..."/>
</svg>
Возвращаемся в таблицу стилей добавляем в описание светлой темы строку про заливку логотипа (у меня он по умолчанию чёрный):
:root {
--var-bgcolor: #fff;
--var-fontcolor: #000;
--var-fill: #000;
}
Описание тёмной темы дополняем требованием к цвету лого при включении тёмного режима и ссылаемся на эти данные для изображения логотипа:
@media (prefers-color-scheme: dark) {
:root {
--var-bgcolor: #222;
--var-fontcolor: #eee;
--var-fill: #eee;
}
}
.logotype {fill: var(--var-fill);}
Готово, теперь тёмный режим автоматом перекрашивает и логотип.
