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

2019/08/06 What's Up, サイト制作, 技術系 投稿者:竹内

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でダークモード設定にしていると連動して自動でダークモード表示になる」ところです。

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

Windows 7 の延長サポート終了まで

days
8
4
hours
0
9
minutes
1
6
seconds
4
3

Office 2010 の延長サポート終了まで

days
3
5
7
hours
0
9
minutes
1
6
seconds
4
3

カレンダー

 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
    123
45678910
11121314151617
18192021222324
25262728   
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

U・Iターン転職しませんか?
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)