Инвертирование цвета элемента
Класс invert заменяет каждый цвет элемента противоположным, invert-none
возвращает исходные. Берите их для одноцветных значков и схем, которые должны
читаться на светлом и тёмном фоне.
Пример
Значения
При наведении
Наведите указатель на изображение: цвета возвращаются.
Классы
| Класс | CSS | Значения |
|---|---|---|
invert |
--sf-blur:; --sf-brightness:; --sf-contrast:; --sf-grayscale:; --sf-hue-rotate:; --sf-invert:; --sf-saturate:; --sf-sepia:; --sf-drop-shadow:; filter: var(--sf-blur) var(--sf-brightness) var(--sf-contrast) var(--sf-grayscale) var(--sf-hue-rotate) var(--sf-invert) var(--sf-saturate) var(--sf-sepia) var(--sf-drop-shadow); --sf-invert: invert(1) |
— |
invert-none |
--sf-blur:; --sf-brightness:; --sf-contrast:; --sf-grayscale:; --sf-hue-rotate:; --sf-invert:; --sf-saturate:; --sf-sepia:; --sf-drop-shadow:; filter: var(--sf-blur) var(--sf-brightness) var(--sf-contrast) var(--sf-grayscale) var(--sf-hue-rotate) var(--sf-invert) var(--sf-saturate) var(--sf-sepia) var(--sf-drop-shadow); --sf-invert: invert(0) |
— |
Условия (что это): ширина экрана — нет; состояния — hover:. Например: hover:invert.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Одноцветная графика
Чёрная схема или значок, нарисованные без цветов темы, становятся белыми:
<img class="invert" src="diagram-black.svg" alt="Схема">
Для собственных SVG надёжнее цвета темы: цвет заливки и цвет обводки сами меняются вместе с темой.
Ограничения
- На элементе действует один класс фильтра. Каждый класс семейств фильтра
(
blur-*,brightness-*,contrast-*,grayscale,hue-rotate-*,invert,saturate-*,sepia) задаёт свойствоfilterцеликом и сбрасывает функции остальных семейств, поэтому изblur-small grayscaleостаётся только тот класс, чьё правило стоит в CSS позже. Чтобы сложить два фильтра, поставьте второй класс на обёртку. - Класс с
hover:тоже задаёт фильтр целиком: при наведении он заменяет фильтр элемента, а не добавляется к нему. - Любое значение, в том числе
invert-none, создаёт у элемента новый контекст наложения и содержащий блок для потомков сposition: fixed. - Инверсия не следует за темой: класс действует одинаково в светлой и тёмной теме. Чтобы инвертировать только в одной теме, задайте фильтр в CSS темы проекта.