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) }}

Note: Utility customizing is unavailable.

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-visible
focus-within
active
visited
checked
disabled