Press/to search

Theme

Theme Invert v1.0.9

Utilities for sets page theme either dark or light by applying force invert with color correction.


Class

attributecss
theme="invert"html[theme="invert"], img[theme="invert"], [theme="invert"] { filter: invert(1) hue-rotate(180deg);

Usage

The basic set up for theme="invert" attribute is with the <html> tag. This allows the utility to attenuate colors of the page theme but not changing any color of it.

<html theme="invert">
...
</html>

But, the images and some other elements will look inverted. To compensate that, apply the same theme="invert" attribute to all affected elements, like in the example.

<html theme="invert">
...
<!-- e.g. To compensate inverted image -->
<img theme="invert">
<!-- e.g. To compensate other inverted elements -->
<y theme="invert"></y>
<span theme="invert"></span>
...
</html>

Simulate

To simulate theme="invert" on a Chrome-based web browser at the developer tools, by pressing CTRL+SHIFT+I and find your way to enable the Rendering options in the picture below. You 'll find the Emulate CSS media feature prefers-color-scheme menu.

Chrome prefers-color-scheme simulator

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.