ひらりんこさんが記事にしていたダークモード。 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等を使う時には ダークモードの設定にしています。 閲覧者の方の目にも優しいホームページ作りを もっと意識していかなければならないかもしれませんね。 ぴの子
Staff blog