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

Cocoonダークモードスキンを作りました

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

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

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

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

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

スキンの解説

今までダークモードに対応させるには

  1. 専用CSSの作成
  2. プラグイン(JavaScript?)

の2択ほどしかありませんでした。僕もプラグインによるダークモードを試したものの、上手く動作しませんでした。

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

幸いな事に、Cocoonには全てのCSSを作らなくても良い、「スキン」という機能があります。これを利用して作成しました。

どんな仕組み?

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

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

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

1番のメリット

個人的に1番のメリットだと考えているのが、色変更が簡単に出来る事です。

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

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

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

デザイン上悩んでいる事

ダークモード時の黄色マーカーの色を今とても悩んでいます。アンダーラインであれば現在のこの色でいいかなと考えているのですが、どうしても全体マーカー?の色が思い付きませんでした。

ぜひご意見を頂けるとありがたいです。

もしかしたら「統一した方がいいのでは?」というご意見もあるかと思いますので、そのような意見もお待ちしております。

確認している不具合

  • フッターメニューのホバー時(仕様のため修正予定なし)
  • 検索案内における検索ボタンホバー時

もう少し作り込みたい機能は以下の通りです。

  • マーカー色

動作の様子

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

見出し(これはH3です)

H4

H5
H6

文字

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

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

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

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

引用

引用

引用元

フッター1フッター2フッター3
111
123
136
1410

Cocoon Block

hiro(管理人)
hiro(管理人)

吹き出しテストしています。

案内ボックスです。

アイコンボックスです。

タブボックスです。

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

    タイムライン1個目

  • ラベル2
    タイトル

    タイムライン2個目

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

白抜きボックス

付箋風ボックス

見出し

見出しボックス

見出し

タブ見出しボックス

見出し

ラベルボックス

マイクロコピーテキスト

マイクロテキストは上のやつです。

マイクロコピーバルーン

マイクロバルーンは上のやつです。

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

コメント

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