Turning your website into dark mode only requires a simple line of CSS code:
html[theme='dark-mode'] {
filter: invert(1) hue-rotate(180deg);
}
Take a look at the final effect:
From the picture, we can see that the entire background of the website has become black, and the font has become white. How to implement specific conversion rules, we need to understand the properties of CSS.
The filter CSS property applies graphic effects such as blur or color shift to elements. Filters are usually used to adjust the rendering of images, backgrounds and borders.
The CSS standard contains some functions that have implemented predefined effects. For example, the commonly used invert and hue-rotate etc.
invert()
Invert the input image. The value defines the scale of the conversion. 100% of the value is completely reversed. A value of 0% means that the image does not change. The value will take a number between 0 and 1 or a percentage from 0% to 100%. If the value is not set, the value defaults to 0. So use this function to color web pages, black becomes white, and white becomes black.
We found that invert processed all the colors, but we only want to make white turn black, but red turn green is obviously unreasonable, we can handle it separately through the hue-rotate function.
hue-rotate()
Apply hue rotation to the image. The "angle" value sets the color circle angle value of the image to be adjusted. The value is 0deg, the image has no change. If the value is not set, the default value is 0deg. Although this value does not have a maximum value, a value exceeding 360deg is equivalent to another round. The hue rotation filter helps us process all other colors, not black and white. Rotating the hue by 180 degrees, we ensure that the color theme of the web page will not change, but only weaken its color.
Composite function
You can combine any number of functions to control rendering.