CSS3 filter (filter) example code for realizing the gray or black mode of web pages

Time:2021-10-14

front end

The implementation of CSS3 and filter can not only realize the gray effect of web pages, but also help to realize the effect of night mode. Let’s look at the implementation!

Introduction to filter property


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

Tip: separate multiple filters with spaces.

Website gray effect

At the beginning of the establishment of this effect blog, I wrote it when summarizing the common effects of CSS.

Just the following code can be easily implemented!

The code is as follows:

html {
   filter: grayscale(100%);// Internet Explorer
  -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 browser
}

Compared with the gray effect, the realization of night mode is a little more difficult!

Night mode judgment

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

The syntax is as follows:

The no preference system does not inform the user of the color scheme used.
Light indicates that the system tends to use light themes.
Dark indicates that the system tends to use dark themes.

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 judge the depth of the system theme in JavaScript code, you can use the native window. Matchmedia() method, for example:

//Does it support dark mode
//Returns 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 turn around and look ugly


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

Add another layer to the picture, and the reverse is positive, so that the pure picture is OK

Therefore, the combination can be set as follows:


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

However, there is a problem with the black shadow in the background image. 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;
    }
}

problem

The above settings only work for light background, no background or transparent background.

In addition, special treatment should be made for each style. For example, you can cooperate with filter to make global variables, so as to perfectly match the night pattern. For example:

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

    .dark-img,img {
        filter: invert(1) hue-rotate(180deg)
    }
   //Special treatment of background picture
  //Global color special handling
   //background-color: var(--darkColor)
}

This is the end of this article about the sample code of CSS3 filter (filter) to realize the gray or black mode of web pages. For more information about CSS3 filter, please search the previous articles of developpaer or continue to browse the relevant articles below. I hope you will support developpaer in the future!

Recommended Today

Seven Python code review tools recommended

althoughPythonLanguage is one of the most flexible development languages at present, but developers often abuse its flexibility and even violate relevant standards. So PythoncodeThe following common quality problems often occur: Some unused modules have been imported Function is missing arguments in various calls The appropriate format indentation is missing Missing appropriate spaces before and after […]