「Darkmode.js」Webサイトを手軽にダークモード表示に

Webサイトを手軽にダークモード表示にすることができるスクリプト「Darkmode.js」というものがあるそうですので、弊社のWebサイトも対応させてみたいと思います。

Darkmode.js公式サイト

Darkmode.js

英語はあまり得意ではありませんが、簡単な文章なのでなんとなくわかります。
CSSの『mix-blend-mode』を使用してダークモード表示化しているとのことです。

CSSの『mix-blend-mode』は現在のところ、IEとEdgeが対応しておりません。

使い方

HTMLの場合

以下のコードをHTMLに貼り付けるだけです。
注意点としまして、このスクリプトは「bodyタグ内」に設置する必要があるようです。

WordPressの場合

WordPressを使用しているサイトではプラグインで対応しましょう。どちらか一方を導入して下さい。

・ Blackout: Dark Mode Widget
　　→ プラグインページはこちら

・ Dark Mode for WordPress
　　→ プラグインページはこちら

当サイトに設置してみましたが、設定方法は特になく、インストールして有効にするだけで大丈夫です。
当サイトでは「Dark Mode for WordPress」の方が相性が良かったようです。「Blackout: Dark Mode Widget」では画像やヘッダー領域など広範囲の色が変わってしまい調整が大変そうでした。

利用可能なオプション

公式サイトではオプションの設定方法も書かれています。オプションを含めた記述の仕方は下記の通りとなります。
WordPressプラグインではオプションの記述はできませんが初期値の状態で十分運用できるようになっています。

ダークモード切り替えボタンの「🌓」はオプションの「label:」で指定してあげる必要があります。
「🌓」はユニコードの特殊文字です「🌓」と記述します。コピペでそのまま使おうとするとうまく表示されないこともあるのでご注意下さい。

注目して頂きたいのが「autoMatchOsTheme：」初期値でtrue（有効）になっているので別途設定は必要ありませんが、デバイスのOSのテーマがダークモードだった場合に自動でダークモード表示になる機能となります。
また、「saveInCookies:」の項目は有効にすることで、一度ダークモード表示にするとCookieを使ってダークモード表示のままサイト内を巡回できます。

WordPressにHTML用のコードを貼り付けたら？

当サイトはWordPressです。WordPressにHTML用のコードを貼り付けたらどうなるのか試してみたところ切り替えボタンの挙動は大丈夫だったのですが、ページ遷移で白表示に戻ってしまったりするのでWordPressは素直にプラグインで対応した方が良さそうです。

CSSを調整する

特定の文字の色を変更したり、ボタンはダークモードを適用しないなどCSSで調整できます。

またダークモードを適用したくない要素に対してclassで”darkmode-ignore”を指定することによって個別に調整も可能です。

切り替えボタンを表示させずにダークモード表示に固定する場合

ネディアのサイトに実装します

↑導入直後の当サイトです。
WordPressなのでプラグインの「Dark Mode for WordPress」を利用しました。プラグインを有効にしただけでは文字色や罫線が暗いままで全然だめでした。フッターも何故かオレンジ色になっています。
15個ほど個別にCSSで上書き調整を行っています。表示確認をしながら30分ほどで調整完了しました。

IEとEdgeが対応していないのでスマホ表示のみ対応

CSSの『mix-blend-mode』は現在のところ、IEとEdgeが対応しておりません。
スマホでIEやEdgeを使っている人はいないと思いますので、スマホ表示のみ対応という形式で実装してみたいと思います。

実装してみて気になったところ

予定通りスマホ表示のみダークモード表示へ切り替えるボタンが表示されるようになりました。実装にあたりいくつか気になるところがありました。

・IEとEdgeが対応していない。
→IEとEdgeが対応していない部分は他にも対応方法はあると思いますが、今回はスマホブラウザのシェアの関係でスマホ表示のみ対応という形で実装しました。

・スクリプト設置後にCSSでのカラー調整は必要。
→「たったコレだけ」のような謳い文句ではありましたが、CSSの調整は必要です。

・bodyタグ内に記述する必要があることがわかりにくかった。
→最初はbodyタグ外に設置してしまい動作しませんでした。公式サイトでは設置場所の記載はなかったように思います。

・サイト表示高速化プラグインの「Autoptimize」と併用できない。
→サイト表示高速化プラグイン「Autoptimize」を有効にすると、Cookie保存のページ遷移が出来ず白ベースの表示に戻ってしまいました。他にも相性の悪いプラグインがあるかもしれません。

・表示切り替えボタンが画像などの要素の裏側に配置されてしまう。（特に画面の狭いスマホ表示）
→切り替えボタンが要素の裏側に配置されてしまうのはもしかすると弊社の環境が要因かもしれません。画面外の読み込みを遅らせる機能（Lazy Load関連）が影響している可能性もあります。下記のようにCSSでz-indexを調整しました。

まとめ

手軽に導入できるダークモード表示化スクリプトだったと思いますが、その後の調整に結構時間がかかりました。
せっかく当サイトに導入したので、しばらく運用してみようと思いました。
特に良かったのは「デバイスのOSでダークモード設定にしていると連動して自動でダークモード表示になる」ところです。

久しぶりにスクリプトの検証を行ってみて楽しいお勉強の時間になりました。