ワードプレスにダークモードを実装【最低限の労力で…】

ワードプレスにダークモードを実装【最低限の労力で…】

web初心者向け
スポンサーリンク

10代の頃からずっとそうなんですが、どうも目が「光」に弱いんですよね。

照明が暗めのとこでモニタの光、スマホの光を浴びてるとすぐに偏頭痛がやってくるため、

モニタの光、スマホの光ともに照明抑え気味で作業しています。

なので最近の「ダークモード」の流れは大歓迎、対応できるもの全てタークモードで表示させています。

というわけで、このサイトもダークモードを実装してみます。

ダークモードを王道のやり方で実装してみる

巷でよく見るのがこのやり方。

ユーザーがOSでダークモードをONにしているかどうか判断して黒を白にする、みたいなことをcssでやってくれるみたいです。

CSSだけでWebページをダークモード対応。ついにChromeにも対応した prefers-color-scheme が超便利

早速この一文をcssに付け足してみました。

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

するとこう画面が変化しました。

これがbefore
これがafter

なんか想像と違うぞ!?

文字は白くなっているけど背景は白いまま。

どうも<main>のエリア他、様々な場所に色がすでに背景色が指定されている様子。

ならば「ダークモード時はこの要素やクラスにはこの色」みたいな指定が必要。

すでに出来上がっているサイトだと大変ですねコレ…

王道をあきらめ邪道なやり方で実装

ダークモードだけに邪道…

という冗談は置いといて、こんな物を見つけました。

「たった1行のCSS」とは、prefers-color-scheme: dark;の紹介ではありません。...
coliss.com
coliss.com

cssのfilterで全体の色相を反転させるという、なんというパワープレイ。

@media (prefers-color-scheme: dark) {
  body {
    filter: invert(1) hue-rotate(180deg);
  }
}

この一文を足したらこうなりました。

before
after

見事に背景は黒、文字は白に反転できました。

ただ写真まで反転してしまうという難点も…

.dark-theme img{
    filter: invert(1) hue-rotate(180deg);
}

を付け加えてimg要素だけfilterの適用を除外しています。

他にも除外したい要素があれば付け加えていきます。

コレは簡単!

ちなみに対応ブラウザ

対応ブラウザはこちら。想像通りIEさんは対応してない様子。

まぁいいか…

https://caniuse.com/#feat=css-filters

最終的に…

  • ダークモードON/OFF切り替えスイッチを実装
  • 切替時に0.5秒のデュレーション
  • 効果の微調整

を施しました。

ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺め…
www.webcreatorbox.com
webcreatorbox.com

デュレーション・スイッチ実装jsはこちらのサイトをめっちゃ参考にしました。

ちなみにボタンはこちらのサイトより

フォームのデザインをかっこよくするチェックボックスのCSSサンプルをまとめました。 デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも…
kodocode.net
kodocode.net

以上を付け加えてこんな感じになりました

良いですね!

ワードプレス中身いじるの面倒でボタンをサイドバー上部に入れちゃいましたが…

(これは余裕ある時にヘッダーに移植する)

ツメの甘いところは多々あるものの、思ったより簡単にできました。

みなさんもぜひ目に優しいサイトをお試し下さい。