ダークモード対応しました。(β版)詳細はこちら。

シンプルなダークモード対応Cocoonスキンを作りました

ブログ
hiro(管理人)
hiro(管理人)

アプリはダークモード対応になっていってるのに、Webサイトは全然ですよね…

と、ずっと思っていたのですが、サイトを見る側の人間からすればどうしようもありません。(実は無い事も無いけど…)
だったらせめて自分のサイトぐらいはダークモードに対応していて欲しいなぁと思いまして、全くの初心者ですがCSSを駆使して何とかCocoonのダークモード対応スキンを作成しました。

どれぐらい需要があるかわかりませんが、後日不具合を修正して公開しようと考えています。
もし自分以外にも「ダークモードに対応させたい!」とお考えの方がいた時に簡単にお手伝い出来ればいいなと思っております。

もし不具合を発見された方は、お手数ですがこの記事のコメント欄にてお知らせ下さい。出来る限り早く対処させて頂きますが、上で述べた通り私はプログラミングを始めて本格的にやったような初心者です。他のスキン作成者の方々の様にすぐに修正出来ない事をご了承下さい。

このスキンの特徴

このスキンは大きく2つの特徴があります。

1. ダークモード対応

スキン名に入っている通り、ダークモードに対応したスキンです。(おそらくCocoonでは初)
今までWordpressサイトをダークモードに対応させるには

  1. 対応したテーマの使用
  2. 専用CSSの作成
  3. プラグイン(JavaScript?)

の3択ほどしかなく、とてもハードルが高いものでした。実際僕もプラグインによるダークモードを試したものの、上手く動作しませんでした。

しかもプラグインは動作がどんどん重くなってしまうというデメリットもあります。なので出来る限りプラグインには依存したくありません。

幸いな事に、Cocoonには全てのCSSを作らなくても良い、「スキン」という機能があります。その為「作ってしまえ!」みたいな軽いノリで作成を始めました。

どんな仕組み?

簡単に説明させて頂くと、ユーザーのOSの設定状態を読み込んで、それに合わせてダークモードとライトモードを切り替えています。

その為他のサイトでたまに見られる「ダークモード切り替えボタン」等は一切有りません。ユーザーが変更したいと思った場合はOSの設定を切り替えて頂く必要があります。

ダークモードに対応させる上で大切なのは、「ユーザーが意図せずにダークモードになる事」であるとも考えています。
その為、ダークモードは見にくいとならない様に気を付けたつもりです。

また、色変更が簡単に出来る事が出来ます。

先ほど色変更を行っていると言いましたが、実は詳しく書くとCSSの変数を利用しています。この変数をユーザーの設定に合わせて変更しているという事ですね。

そしてその色は頭にまとめて指定しているので、頭の変数の部分の色を自由に変更して頂ければ細かな調整も可能です。ただ予想している部分と異なる要素の色が変更されてしまう可能性があるので、変更される場合は慎重に調整して下さい。

もちろん100%GNU GPLですからご自由に改造して頂いて結構です。

2.キーカラー対応

このテーマではCocoonのSILKというスキンを作成されているろこさんが提唱されている「スキンをキーカラーでの制御」に対応しています。

多くのCocoonスキンには色違いが用意されていますが、スキンの色だけを他の色に変更したいCocoonユーザーは多いと思います。

色まで固定されてしまうと、同じCocoonスキンを使用している他のサイトとデザインが完全にかぶりますし、Cocoonの汎用性も大きく欠けてしまいます。

スキンをCocoon設定のキーカラーに対応させることで、ユーザーがサイトのキーカラーを自由に設定できるようにカスタマイズしましょう。

https://dateqa.com/cocoon/#skin-php

参考コードをお借りしてどうにかこのスキンでもキーカラーに対応出来るようにしました。

ただ、全体的に少し青に寄った配色になってしまっているので、気になる方はご自身で色変更をして下さい。

確認している不具合

  • フッターメニューのホバー時(仕様のため修正予定なし)

もし不具合を発見された方がいらっしゃいましたら、大変申し訳お手数ですがぜひ当記事コメント欄かお問い合わせフォームよりご連絡下さい。

もう少し作り込もうと考えている点は以下の通りです。

  • タグ・カテゴリーのホバーエフェクト
  • エディターボックスのアイコンのホバーエフェクト

動作の様子

ぜひご自身でダークモードとライトモードを切り替えてご確認下さい。

見出し(これはH3です)

H4

H5
H6

文字

文章はこの様に表示されます。太字斜体もこの様に表示されます。

マーカーテスト アンダーラインマーカーテスト

マーカーテスト アンダーラインマーカーテスト

マーカーテスト アンダーラインマーカーテスト

引用

引用

引用元が表示されます

ヘッター1ヘッター2ヘッター3
111
123
136
1410
フッターラベルフッターラベルフッターラベル

Cocoon Block

名前
名前

吹き出しテスト

案内ボックス

アイコンボックス

タブボックス

タイムラインのタイトル
  • ラベル
    タイトル1

    タイトル説明

  • ラベル
    タイトル2

    タイトル説明

アイコンリスト
  • リスト1
  • リスト2
  • リスト3

白抜きボックス

付箋風ボックス

トルクボックス(色指定が必要です。)

見出し

見出しボックス(色指定が必要です。)

見出し

タブ見出しボックス(色指定が必要です。)

見出し

ラベルボックス

マイクロコピーテキスト

あいうえお

マイクロコピーバルーン

カキクケコ

最後までご覧頂きありがとう御座いました。もしこの記事が「イイナ!」と思ったらぜひSNSシェアSNSフォローをよろしくお願い致します!
もし宜しければ気軽にコメントして頂けるとありがたいです!
ブログ
\この記事をシェアする/
\hiroをフォローする/
Hirosite

コメント

タイトルとURLをコピーしました