用途
新着
履歴
分類

CSS ダークモードをCSSで出し分け

CSS ダークモードをCSSで出し分け
OSでダークモードの時、CSSで検知し、スタイルを変更するサンプルです。

OSで暗いところ用のダークなモードの切り替えは、だいぶ浸透してきました。

サイト側でも個別でダークモードを用意していたサイトもあるかもしれません。

やはりそれではUX的によろしくないのでCSSで連動することができるよう標準化されました。

以下、ダークモードの状態を検知して、出し分けています。


OSのダークモードがOFFです
OSのダークモードがONです
OSのダークモードをONにしてアクセスするとこの部分のスタイルが反転します

@media で出しわけができます。

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

CSS


#demo_dark {
    display: none;
}
#demo_div {
    background-color: rgb(0, 255, 170);
   color: rgb(20, 20, 68);
    padding:10px;
    margin:20px 0;
    border-radius:10px;
}

@media (prefers-color-scheme: dark) {
    #demo_normal {
        display: none;
    }
    #demo_dark {
        display: block;
    }
    #demo_div {
        background-color: rgb(20, 20, 68);
        color: rgb(0, 255, 170);
    }
}
ブラウザの対応はこちらをチェック
公開 2021-06-03 00:38:01
更新 2021-06-03 00:50:57
このページの二次元コード
CSS ダークモードをCSSで出し分け

人気のサンプル

search -  category -  about
© 2024 kipure
Top