【Cocoon】ダークモード対応スキン切り替え

2020.12.12 — WordPress — 1 min read

やりたいこと

ダークモードに対応したい
Cocoonの明るいスキンと暗いスキンを切り替えて使いたい

【追記】
ダークモード対応スキンが実装した
「Simple Darkmode」スキンを同梱追加

こだわりがなければ，追加されたスキンが簡単でオススメ．
以下はこだわりたい人用．

追加したプログラム

functions.php

1// スキン切り替え
2function get_skin_url(){
3  if( 'dark' === $_COOKIE['color_theme_value'] ) {
4// skin-dark-ruri がスキンのフォルダ（ダークモード用）
5    return get_template_directory_uri().'/skins/skin-dark-ruri/style.css';
6  } else {
7// skin-mixblue がスキンのフォルダ（ライトモード用）
8    return get_template_directory_uri().'/skins/skin-mixblue/style.css';
9  }
10}

javascript.js

1/** モバイル端末なら true 、それ以外なら false を返す */
2function isMobile(){
3  var regexp = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
4  return (window.navigator.userAgent.search(regexp) !== -1);
5}
6
7// ダークモードの判定
8var os_color = '';
9if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
10  os_color = 'dark';
11} else {
12  os_color = 'light';
13}
14
15// クッキーの有効確認，読込，比較，保存
16if(navigator.cookieEnabled){
17  var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)color_theme_value\s*\=\s*([^;]*).*$)|^.*$/, "$1");
18  if ((os_color == 'light') && (!cookieValue)) {
19  } else if (os_color != cookieValue) {
20    if (os_color == 'dark') {
21      document.cookie = "color_theme_value=dark; path=/; max-age=31536000";
22    } else {
23      document.cookie = "color_theme_value=light; path=/; max-age=31536000";
24    }
25// モバイル端末用のクッションアラート
26    if (isMobile()) {
27      if (os_color == 'dark') {
28        alert("ダークモードへ移行します");
29      } else {
30        alert("ライトモードへ移行します");
31      }
32    }
33// ページのリロード
34    location.reload();
35  }
36}

参考サイト

Cocoonテーマのスキン切り換えデモを実装する方法
 【JavaScript】【PHP】【WordPress】ダークモードの実装

その他
JavaScriptでスマホかどうか判別する

課題

ダークモード使用ユーザーが初回訪問時に一瞬だけフラッシュする
ダークルリのスキンがAMPに対応していない
モバイル端末のスキン切り替え時，1~2秒待ってからリロードしないと反映されないため，クッション用アラートを入れているが，人によっては不審に思ってしまうかもしれない

とりあえず，ダークモード使用者が少ないこと，今は記事を書くことを頑張ったほうがいいこと，を考慮して，1つ目と3つ目の課題はこのまま保留．

2つ目の課題のAMP対応は，普通のAMPページで表が崩れすぎて，修正もめんどくさそうだったので，そもそもAMP対応をやめる方向で，雑に解決．

Tips

プログラムを書くときに試行錯誤して得た知見のまとめ

クッキーの寿命

クッキーの寿命指定には，「max-age」と「expires」の2種類がある．

	max-age	expires
指定値	秒数	日数
優先度	強い	弱い
PCでの挙動	想定通り	想定通り
スマホでの挙動	想定通り	ブラウザ終了時に削除

このため，「max-age」で指定したほうが想定通りの動きになる．
「expires」の方が優しいクッキーのため，問題なければこちらの方が良い．

※各端末での挙動は，著者の端末で確認したもので，他の端末は未確認である点に注意．

ページのリロード周りの動作

プログラムではモバイル端末に対して，クッションを挟んでいる．
元々はクッションがなくても，即リロードでスキンの切り替えができていた．
CDNを導入した前後で，即切り替えができなくなり，クッションを挟んだ．
原因はCDNではないかもしれないが，メモとして．

phpでのスキンの指定

本当は，Cocoon設定でのスキンでライトモードを，phpプログラムでのスキンでダークモードを，それぞれ個別に設定できるようにしたかった．
しかし，開発環境がダークモードだと，プログラムのスキン指定が強いためか，Cocoon設定のスキンまで上書きされたり，変更できなかったりする．
そのため，プログラムで，ダークモードとライトモードの両方を直接指定したほうが，変な挙動は起こしにくいと考えられる．

— WordPress —

【Cocoon】ダークモード対応 スキン切り替え