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;
        }
    }
}

這個也大致可用。這是最省事的辦法。