Filters

Invert Filter

Utilities for sets filter inverts effect to an element.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
invert-0	filter: invert(0)
invert-1	filter: invert(1.0)

Usage

Filter: OFF

Filter: ON

<img class="invert-1 ..." src="...">

<div class="invert-1 ..." style="background-image:url(...)"> ... </div>

HTML

.dummy {
  @extend
    .invert-1;
}

SCSS

Set auto dark theme enabled to an element with added (dark) prefix.

<img class="invert-1 (dark)invert-0 ..." src="...">

<div class="invert-1 (dark)invert-0 ..." style="background-image:url(...)"> ... </div>

HTML

.dummy {
  @extend
    .invert-1,
    .\(dark\)invert-0;
}

SCSS