DarkMode(4)：css滤镜 颜色反转实现深色模式

在《DarkMode(1)：产品应用深色模式分析》提过，单纯反转是不行的。但是，把不需要反转的，在反转过来。或者用js，给想要反转的，加上反转样式，再对其他的做微调。这样个人觉得，开发成本是最低的

@media (prefers-color-scheme: dark) {

 // one

 .app{

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

  img,button,.active {

    //filter: brightness(.8) contrast(1.2);

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

  }

 }

 // two

 div:not(.no-invert){

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

 }

 // three

 :not(img) { filter: invert(100%) hue-rotate(180deg); } 

}

老外说：It’s not 100% accurate in my case, because my dark background color is not perfectly black, but it’s better than nothing.

真正实战与项目，一般是这样的

.dark-mode-box {

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

    // 不需要反转的，在反转回去

    // 图片

    img,

    iframe,

    // element 元素

    .el-tag--primary, .el-tag--success, .el-tag--warning, .el-tag--error,

    .el-button--primary, .el-button--primary,

    .invert-restore{

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

    }

    .invert-restore{

        // 反转回去的，里面的东西，在去除反转

        img{

            filter: none;

        }

    }

}

这个也大致可用。这是最省事的办法。