アプリはダークモード対応になっていってるのに、Webサイトは全然ですよね…
と、ずっと思っていたのですが、サイトを見る側の人間からすればどうしようもありません。（実は無い事も無いけど…）
しかも最新のWordpress純正テーマはダークモードに対応した見たいです。
だったらせめて自分のサイトぐらいはダークモードに対応していて欲しいなぁと思いまして、全くの初心者ですがCSSを駆使して何とかCocoonのダークモード対応スキンを作成しました。
そしてわいひらさんを始めその他Cocoonフォーラムの皆様のお力をお借りして、不具合の修正を行い、Cocoonに同梱させて頂きました！（ver2.3.7より）
Cocoon設定のスキンタブより設定してご利用頂けます。
もし不具合を発見された方は、お手数ですがCocoonフォーラムに連絡して頂きますようお願いします。
スキンご利用にあたって
初めに（このスキンのプログラムについて）
WordPressやCocoonのソースコードはGPLライセンスとして公開されており、また後述しますが、このスキンはSILKというスキンを作成されたろこさんが公開されているソースコードを利用しています。
WordPressを使用しているため同梱するスキンライセンスもGPLになります（本来CSS、JSまではGPLにする必要はないのですが、Cocoonは100％GPLにしたく思います）。
Cocoon公式サイト（https://wp-cocoon.com/skin-make/）
したがって、このスキンもGPLライセンスとさせて頂きます。
改変及びソースコードの使用に問題はありませんが、それによって作成されたプログラムはGPLライセンスとする必要があり、またその他制約が付きます。ご利用の方はご自身でGPLライセンスをしっかりとご確認下さい。
FAQ
- Qダークスキン（ダークエンジなど）とは何が異なりますか？
- A
ダークモードに対応しており、ユーザー（サイト訪問者）の設定次第で、ライトモード（一般的なCocoonのデザイン）とダークモード（他のダークスキンなどと同じデザイン）を切り替える事が出来ます。
サイトをダーク（暗色・黒系）系のデザインにする為のものではありません。
- Qダークモード切り替えボタンはありますか？
- A
切り替えボタンは有りません。
「あくまでもユーザーが見やすい様に。」を開発のメインコンセプトにしたため、徐々に普及したスマホアプリのダークモード対応と同じ設定だけで使える様に設計しました。
”切り替えボタン”というのは日本のサイトではまだ普及しておらず、また日常的に使うスマホアプリにも存在しないため、取り払っております。
- Qどうやって使いますか？
- A
スキンをCocoon設定画面よりスキンを有効化して下さい。
また、Cocoon設定→全体→キーカラーにある”サイトキーカラー”と、”サイトキーテキストカラー”を設定する事を推奨しています。
サイトキーカラーを設定することで灰色（#757575）で設定されている部分の色を変更する事が可能です。
サイトキーテキストカラーはサイトキーカラーの背景の上にのるテキストの色です。サイトキーカラーに合わせて設定して下さい。その他の設定は不要です。
- Qどの端末で動作しますか？
- A
iOS・Android・Mac OS・Windows（いずれも最新版）で動作確認しております。
主要なOSにおける、ダークモードへの変更方法
iOS iPad OSの場合：設定→ディスプレイと明るさ→”ダーク”へ変更
Androidの場合：設定→ディスプレイ→”ダークテーマ”をオンに変更
Windowsの場合：設定→個人用設定→色→「規定のアプリモードを選択」を”ダーク”へ変更
Mac OSの場合：システム環境設定→一般→外観モードを”ダーク”へ変更
※バージョンによって設定方法が異なる、又は設定出来ない場合があります。
なお、Internet Explorerではダークモードが動作せず、ライトモードのみの動作となります。その他主要ブラウザ（Chrome・ Edge・Safari等）では動作確認をしています。
- Qその他制限等はありますか？
- A
WordPressでの執筆・編集時はOSをライトモードにして作業を行って下さい。編集画面をダークモードで利用すると一部が黒くなり正常に編集できません。（吹き出しや引用ブロックなど）
このスキンの特徴
このスキンは大きく2つの特徴があります。
ダークモード対応
スキン名に入っている通り、ダークモードに対応したスキンです。（同梱されたCocoonスキンでは初）
今までWordpressサイトをダークモードに対応させるには
- 対応したテーマの使用
- 専用CSSの作成
- プラグイン（JavaScript？）
の3択ほどしかなく、とてもハードルが高いものでした。実際僕もプラグインによるダークモードを試したものの、上手く動作しませんでした。
しかもプラグインは動作がどんどん重くなってしまうというデメリットもあります。なので出来る限りプラグインには依存したくありません。
幸いな事に、Cocoonには全てのCSSを作らなくても良い、「スキン」という機能があります。その為「作ってしまえ！」みたいな軽いノリで作成を始めました。
どんな仕組み？
簡単に説明させて頂くと、ユーザーのOSの設定状態を読み込んで、それに合わせてダークモードとライトモードを切り替えています。（iOSのダークモードやWindowsの規定のアプリモードなど）
その為他のサイトでたまに見られる「ダークモード切り替えボタン」等は一切有りません。ユーザーが変更したいと思った場合はOSの設定を切り替えて頂く必要があります。
ダークモードに対応させる上で大切なのは、「ユーザーが意図せずにダークモードになる事」であるとも考えています。
その為、ダークモードは見にくいとならない様に気を付けたつもりです。
また、簡単に色を変更する事が出来ます。
先ほど設定に応じて色変更を行っていると言いましたが、実は詳しく書くとCSSの変数を利用しています。この変数をユーザーの設定に合わせて変更しているという事ですね。
そしてその色は頭にまとめて指定しているので、頭の変数の部分の色を自由に変更して頂ければ細かな調整も可能です。ただ予想している部分と異なる要素の色が変更されてしまう可能性があるので、変更される場合は慎重に調整して下さい。
もちろん100%GNU GPLですからご自由に改造して頂いて結構です。
キーカラー対応
このスキンではCocoonのSILKというスキンを作成されているろこさんが提唱されている「スキンをキーカラーでの制御」に対応しています。
多くのCocoonスキンには色違いが用意されていますが、スキンの色だけを他の色に変更したいCocoonユーザーは多いと思います。
色まで固定されてしまうと、同じCocoonスキンを使用している他のサイトとデザインが完全にかぶりますし、Cocoonの汎用性も大きく欠けてしまいます。
スキンをCocoon設定のキーカラーに対応させることで、ユーザーがサイトのキーカラーを自由に設定できるようにカスタマイズしましょう。
SILK公式サイト https://dateqa.com/cocoon/#skin-php
参考コードをお借りしてどうにかこのスキンでもキーカラーに対応出来るようにしました。
ただ、キーカラー適応部以外の色が全体的に少し青に寄った配色になってしまっているので、気になる方はご自身で色変更をして下さい。
動作の様子
ぜひご自身でダークモードとライトモードを切り替えてご確認下さい。
見出し（これはH3です）
H4
H5
H6
文字
文章はこの様に表示されます。太字や斜体もこの様に表示されます。
マーカーテスト アンダーラインマーカーテスト
マーカーテスト アンダーラインマーカーテスト
マーカーテスト アンダーラインマーカーテスト
引用
引用
引用元が表示されます
表
| ヘッター1 | ヘッター2 | ヘッター3 |
|---|---|---|
| 1 | 1 | 1 |
| 1 | 2 | 3 |
| 1 | 3 | 6 |
| 1 | 4 | 10 |
| フッターラベル | フッターラベル | フッターラベル |
Cocoon Block
吹き出しテスト
案内ボックス
タブボックス
- ラベルタイトル1
タイトル説明
- ラベルタイトル2
タイトル説明
白抜きボックス
付箋風ボックス
トルクボックス（色指定が必要です。）
見出しボックス
ここでは、枠の色を指定していません。
タブ見出しボックス
ラベルボックス
あいうえお
ファイル形式でのダウンロード
※こちらのファイルはあくまでもベータ版であるので、利用は自己責任でお願いします。
ご自身で小テーマのテーマフォルダーに入れて頂くと、使用する事が出来ます。
ただ現状まだ不具合が出る可能性があるので、テスト環境等での利用をお勧めします。
最新バージョン 1.4.3
※Cocoon同梱版:ver 1.4.2
変更点
- スキン制御による予期せぬ動作のブロックの追加
- タグクラウドの表示に対応
コメント
早速利用させていただきました。
ダークモード時のタグクラウドのリンク文字色が薄いグレーで視認性が低いように感じましたがいかがでしょうか。
「.tagcloud a」 が 「color: #faf8f7」あたりだといいのではと思いますがいかがでしょうか。
ご確認いただけますと幸いです。
よろしくお願いします。
使って頂きありがとうございます。
タグクラウドは自分があまり使っておらず、わいひらさん（Cocoon作者の方）とのお話でも話題にならなったので見逃してました。
想定していた動作と異なったので、修正次第わいひらさんにお願いしてアップデートしてもらいます。