ウェブページでグレーまたはブラックモードを実現するための CSS3 フィルターコード

フィルター: なし | ぼかし() | 明るさ() | コントラスト() | ドロップシャドウ() | グレースケール() | 色相回転() | 反転() | 不透明度() | 彩度() | セピア() | url();

html{
   フィルター: グレースケール(100%); //IE ブラウザーの webkit フィルター: グレースケール(100%); //Google ブラウザーの moz フィルター: グレースケール(100%); //Firefox の ms フィルター: グレースケール(100%);
  -o-filter: グレースケール(100%);
  フィルター:progid:DXImageTransform.Microsoft.BasicImage(グレースケール=1);
  -webkit-filter: grayscale(1); // Google Chrome}

/* ダークモード */
@media (優先カラースキーム: 暗い) {
    本文 { 背景: #333; 色: 白; }
}
/* ライトモード */
@media (優先カラースキーム: 明るい) {
    本文 { 背景: 白; 色: #333; }
}

// ダークモードをサポートするかどうか // true または false を返す
window.matchMedia("(prefers-color-scheme: dark)").matches;

html{
    フィルター: invert(1) hue-rotate(.5turn);
}

画像 {
    フィルター: invert(1) hue-rotate(.5turn);
}

html、画像 {
    フィルター: invert(1) hue-rotate(.5turn);
}
画像 {
    不透明度: .75;    
}

@media (優先カラースキーム: 暗い) {
    html、画像 { 
        フィルター: 反転(1) 色相回転(180度);
    }
   .bgフィルター{
    フィルター: 反転(1) 色相回転(180度);
  }
    .some-ele-box {
        ボックスシャドウ: なし;
    }
}

@media (優先カラースキーム: 暗い) {
    html{
        フィルター:反転(1) 色相回転(180度)
    }

    .dark-img,img {
        フィルター: 反転(1) 色相回転(180度)
    }
   // 背景画像に対する特別な処理 // グローバルカラーに対する特別な処理 // background-color: var(--darkColor)
}