エスエムティの愉快な仲間たち

ひらりんこさんが記事にしていたダークモード。
2019年辺りから言葉はよく聞くようになりましたね。

ホームページをダークモードに対応させるには
いくつかの方法がありますが、
一番簡単なのはメディアクエリを使う方法です。

————————————
@media (prefers-color-scheme:dark) {
    body {
       background-color: #000;
       color: #FFF;
    }
}
————————————

OSの設定をダークモードにした際に
上記CSSが当たるようになります。

◆Darkmode.Js
https://darkmodejs.learn.uno/

「Darkmode.Js」なるものもあるようです。

CDN配布されている「darkmode-js.min.js」を読み込み、
「new Darkmode().showWidget();」と記述するだけで
簡単に設定可能なようですね。
これは初めて知ったので使ってみようかな。

◆Dark Mode Widget
https://wordpress.org/plugins/blackout-darkmode-widget/

Wordpress用のプラグインもあるみたいです。
無料で使えるので試してみても面白いかも。

私自身、スマホ・SNS・Youtube等を使う時には
ダークモードの設定にしています。
閲覧者の方の目にも優しいホームページ作りを
もっと意識していかなければならないかもしれませんね。

ぴの子