Evg
31 Января 2022
Темный режим с использованием CSS-фильтра
Нажмите на значёк «Темный режим» в шапке сайта, чтобы посмотреть CSS-фильтр в действии.
Флажок только переключает dark-mode класс <body> элемента.
Что делает dark-mode класс?
html.dark-mode {
filter: invert(100%);
}Установленное filter свойство invert(100%) инвертирует все цвета на странице.
Мы можем обработать отдельно Img и сделать, чтобы изображения не выглядели как фотонегативы.
Можно использовать такой селектор:
:not(img) { filter: invert(100%) } Что значительно сократить код.
Мы можем добавьте hue-rotate (180deg), это сделает invert немного лучше.
filter: invert(100%) hue-rotate(180deg);И т.д. Это позволило убрать немного css, который требует поддержки.
4
310
Заметил, так действительно более универсально. Но для большого проекта возможно стоит использовать переменные?
Да, это возможно. Тут большое поле деятельности. Переменные более гибко могут позволить подойти к элементам. Но на данный момент, инвертировать цвета, проще и быстрей сделать. )