Choose a layout

forced-color-adjust

Report an Issue

	Class	Description
forced-color-adjust-auto Sets forced-color-adjust to auto, allowing forced-colors mode (e.g. high-contrast) to override the element's colors. CSS Rules `.forced-color-adjust-auto { forced-color-adjust: auto; }` Usage `<element class="forced-color-adjust-auto" />` Responsive Prefix `.forced-color-adjust-auto` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:forced-color-adjust-auto" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="forced-color-adjust-auto:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="forced-color-adjust-auto:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before forced-color-adjust-auto::before" /> <element class="content-after forced-color-adjust-auto::after" />`	`.forced-color-adjust-auto`	Sets forced-color-adjust to auto, allowing forced-colors mode (e.g. high-contrast) to override the element's colors.
forced-color-adjust-none Sets forced-color-adjust to none, opting the element out of forced-colors mode overrides. CSS Rules `.forced-color-adjust-none { forced-color-adjust: none; }` Usage `<element class="forced-color-adjust-none" />` Responsive Prefix `.forced-color-adjust-none` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:forced-color-adjust-none" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="forced-color-adjust-none:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="forced-color-adjust-none:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before forced-color-adjust-none::before" /> <element class="content-after forced-color-adjust-none::after" />`	`.forced-color-adjust-none`	Sets forced-color-adjust to none, opting the element out of forced-colors mode overrides.