Инвертирование цвета элемента (filter-invert)link

https://dev.ru.simai.io/ru/ui/utility/filter/filter-invert.php

Данный модификатор позволяет управлять инвертированием цвета элемента, превращая светлые тона в темные и наоборот.
Убираем адаптивность (sm, md, lg, xl), оставляем поддержку hover.

Классы и их значенияlink

Класс	Значение
.invert-none	filter: invert(0)
.invert	filter: invert(1)

Описаниеlink

Модификатор invert инвертирует цвета внутри элемента, делая светлые тона темными и наоборот.
Можно использовать hover:invert или hover:invert-none для изменения инвертирования при наведении курсора.

Синтаксисlink

• invert-none — без инвертирования (исходный цвет).
• invert — цвета инвертируются.
• Можно использовать hover:invert для инвертирования при наведении.

Пример использованияlink

<!-- Элемент без инвертирования -->
<div class="invert-none p-4 bg-primary color-on-surface-inverse">Исходный цвет</div>

<!-- Инвертирование цвета при наведении -->
<div class="invert-none hover:invert p-4 bg-secondary transition">
  Наведи, чтобы инвертировать цвета
</div>