With the iOS13 update, dark mode is becoming more common

How to adapt darkmode has become a technical solution that the front end needs to consider. The following will be described according to my own project experience

Filter – Invert color

filter: invert(1) hue-rotate(180deg);

html {
  filter: invert(1) hue-rotate(180deg);
}
html img, html svg {
  filter: invert(1) hue-rotate(180deg);
  opacity: .85;
}
Copy the code

Set the root node to invert 180 degrees, then invert the image again (back to the original color) and lower the opacity slightly. Does not support IE, other end support is good

Filter – Reduced brightness

To change the brightness of the root node directly, quick adaptation, but not compatible with IE Filter: Brightness (.5);

html {
  filter: brightness(.5);
}
Copy the code

The layer mask

Background can be used as a mask, shadow can be used as a mask, and outline can be used as a mask.

<! -- BGC -- incompatible with IE -->
<div class="mask"></div>
.mask {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background-color: rgba(0, 0, 0, .1);
  z-index: 10000;
  pointer-events: none;
}

<! -- Shadow-compatible IE9+ -->
<div class="mask"></div>
.mask {
  position: fixed;
  top: 0; left: 0;
  box-shadow: 0 0 0 200vh rgba(0, 0, 0, .1);
  z-index: 10000;
}

<! -- Shadow-compatible IE8+ -->
<div class="mask"></div>
.mask {
  position: fixed;
  top: 0; left: 0;
  outline: 100vh solid rgba(0, 0, 0, .1);
  z-index: 10000;
}
Copy the code

Mode Selection Recommendation

  • If a lot of interactive animation is not involved, the first choice is to directly support the dark mode of the filter invert through the media query.
  • For those that do not follow system Settings but are controlled by user-set switches, this will not be a performance problem and will be compatible with the low end if you want to consider the low end compatibility recommendation mask