Ссылки Поиск Написать В избранное NO

Блоггер / Блог 2020 год

RSS лента новостей, Подписка по Email

Темная тема для сайта на чистом CSS

Понимаю, что темная тема - тренд 2019 года, но я как-то никогда особо не любил темные сайты. Да, когда-то я пытался их делать, но проблем было слишком много. А тут вот заболел и от смартфона стали слишком сильно уставать глаза. Пришлось переключиться на темный дизайн.

И тут я заметил, что не только приложения переключаются на темный шаблон, но и некоторые сайты! А вот это - уже очень интересно. Быстрый поиск показал, что достаточно использовать медиазапрос @media (prefers-color-scheme: dark).

И любой сайт можно легко перевести на темную тему:

(18.09.2020 work) Темная тема для сайта - на чистом CSS

Как же быстро добавить темную тему на сайт?

Начнем с небольшой шутки! Понятно, что так делать не нужно. Но забавно будет просто инвертировать цвета на сайте. Ну, кроме картинок.
@media (prefers-color-scheme: dark) {
html {filter: invert(1);}
html img {filter: invert(1);}
}

Но давайте сделаем что-то более серьезное. Например, вот такие стили я подбирал для начала работы над своим сайтом.
@media (prefers-color-scheme: dark) {
body {background-color: #373737; color: #d6d6d6;}

A {color: #e27878;}
a:hover {color: #c53636;}
a:visited {color: #b0b0e0;}

font[color="#000000"] {color: #ffffff;}
font[color="blue"] {color: #7676ff;}
font[color="red"] {color: #f36262;}
font[color="#666666"] {color: #9a9898;}

img, iframe {filter: brightness(0.7); transition: filter 0.3s;}
img:hover, iframe:hover {filter: brightness(1);}

textarea, input, button, select {background: #373737; color: #fff;}
}

Понятно, что фон не должен быть черным, а текст - белым. Это очень бьет по глазам. А для всех очень контрастных цветов нужно подобрать более блеклые аналоги. Что и показано в примере выше.

Еще в статьях рекомендуют использовать для картинок opacity: 0.7; но я решил ограничиться фильтром brightness(0.7); добавив его и ко фреймам тоже. Да, не так универсально для старых браузеров, но теперь через картинки не будет просвечивать цветной фон. Хотя, чего нам беспокоиться о старых браузерах, когда сам медиа запрос prefers-color-scheme не так и универсален.

Как еще можно адаптировать элементы? Например, для белых счетчиков я просто инвертировал цвета.
#counter {filter: invert(78%);}

#logo img {filter: brightness(100%);}

А некоторые картинки меню можно просто осветлить на 100 - 1000%, если лень их перерисовывать. Хотя... тут тоже ничего сложного нет. Достаточно наложить фильтр с белым цветом в Фотошопе.

В принципе, это все! Дальше остается только тестировать, тестировать и еще раз тестировать. Но у меня темные темы для сайтов (в среднем) занимали не более 40 строк. Где одна строка - один элемент, который я изменил.