Theme
Theme Auto v1.0.9
Utilities for sets page theme either dark or light based on web browser or app settings with color correction.
Class
attribute | css |
---|---|
theme="auto" | @media(prefers-color-scheme: dark) { html[theme="auto"], img[theme="auto"], [theme="auto"] { filter: invert(1) hue-rotate(180deg) }} |
Usage
The basic set up for theme="auto"
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="auto">
...
</html>
But, the images and some other elements will look inverted. To compensate that, apply the same theme="auto"
attribute to all affected elements, like in the example.
<html theme="auto">
...
<!-- e.g. To compensate inverted image -->
<img theme="auto">
<!-- e.g. To compensate other inverted elements -->
<y theme="auto"></y>
<span theme="auto"></span>
...
</html>
Simulate
To simulate theme="auto"
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.

Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |