CSS3 filter (filter) to achieve the sample code of gray or black mode of web page

front end

css3,filter can not only achieve the gray effect of web pages, but also assist in achieving the night mode effect. Let’s see how to implement it!

Introduction to filter properties

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Tip: Use spaces to separate multiple filters.

Website gray effect

This effects blog was first created when I was summarizing the commonly used CSS effects.

It can be easily achieved with the following code!

The code is as follows:

html {
   filter: grayscale(100%); //IE browser-webkit-filter: grayscale(100%); //Google browser-moz-filter: grayscale(100%); //Firefox-ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1); // Google Chrome}

Compared with the gray effect, the night mode is a little more difficult to achieve!

Night mode judgment

If it is pure web, you can use the prefers-color-scheme query statement in modern browsers.

The syntax is as follows:

no-preference The system does not inform the user of the color scheme to use.
light indicates that the system prefers a light theme.
dark indicates that the system prefers a dark theme.

For example:

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body { background: #333; color: white; }
}
/* Light mode */
@media (prefers-color-scheme: light) {
    body { background: white; color: #333; }
}

If you need to determine the system's dark or light theme in JavaScript code, you can use the native window.matchMedia() method, for example:

// Whether to support dark mode // Return true or false
window.matchMedia("(prefers-color-scheme: dark)").matches;

Night Mode Code

html {
    filter: invert(1) hue-rotate(.5turn);
}

After that, the picture will be reversed, which is very ugly.

img {
    filter: invert(1) hue-rotate(.5turn);
}

Add another layer to the picture, and it will be right side up, so the pure picture will be fine

Therefore, the combination can be set up like this:

html, img {
    filter: invert(1) hue-rotate(.5turn);
}
img {
    opacity: .75;    
}

But there is a problem with the background image and the black shadow. For the background image, you can set it as follows:

@media (prefers-color-scheme: dark) {
    html, img { 
        filter: invert(1) hue-rotate(180deg);
    }
   .bgfilter{
    filter: invert(1) hue-rotate(180deg);
  }
    .some-ele-box {
        box-shadow: none;
    }
}

question

The above settings are only for light backgrounds, and will not work for no background or transparent backgrounds.

In addition, special processing is required for each style. For example, you can use the filter as a global variable to perfectly match the night mode. For example:

@media (prefers-color-scheme: dark) {
    html {
        filter:invert(1) hue-rotate(180deg)
    }

    .dark-img,img {
        filter: invert(1) hue-rotate(180deg)
    }
   // Special processing for background images // Special processing for global colors // background-color: var(--darkColor)
}

This concludes this article about how to use CSS3 filter to create a gray or black mode on a web page. For more information about CSS3 filter, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. We hope that you will support 123WORDPRESS.COM in the future!