ダークモードへの対応テストを行っています。詳細はこちらをご覧下さい。

ダークモードについて

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

アプリはだんだんダークモード対応になっているのに、WEBってまだ対応しているところ少ないですよね。

って思ったのでCSSを作ることにしました。幸いにも神テーマであるCocoonにはスキンというすべてのCSSを指定しなくても部分的に変更でき、そして簡単に変更できる機能があります。

こちらを利用して作成致しましたので、後日配布させて頂きます。

ただ、何とかダークモードが欲しいとプログラミングすらほぼ初めての初心者が作ったものになります。なので、本当に知識ゼロの所からスタートしています。
今後不具合等や機能修正を行っては行きますが、他のスキン作成されている方の様に素早く対応出来ません。ご了承下さい。

今後もしも不具合等の修正方法を知っている方がいらっしゃいましたら、ご教授頂けるととても有り難いです。

どんなスキン?

今回はCocoon開発者であるわいひらさんがお作りになったCOLORS(ブルー)というスキンを改造する形で作成させて頂きました。

基本的な原理としては、ユーザーのOS上の設定に基づいて色を変数を利用し変更しています。そのため、ユーザーがサイト上で切り替えをできるボタン等の実装は行っていません。(そもそも僕の技量では無理です。)
したがって、ユーザーが「ライトモードに変更したい」と思ってもOS上の設定を変更していただかない限り不可能となってしまっています。

IOSでの設定方法は以下を参照して下さい。

iOSのダークモード設定変更方法はこちらを参照して下さい。

【随時更新】現状確認している不具合

不具合を発見されましたらお手数ですが当記事のコメント欄にてお知らせ頂けるとありがたいです。
不具合の他にも「ここの配色はこれの方が良いのでは?」などのご意見もお待ちしております。
現状確認している不具合は以下の通りです。

  • サイトマップの背景
  • フッターメニューをマウスで選択時

また現状もう少し作り込もうと考えている機能は以下の通りです。

  • タブ見出しボックス
  • ラベルボックス

見た目・動作状況

以下の通りに動作します。ご自身でOSの色設定を切り替えてご確認下さい。

現状動作確認をしたOS・ブラウザは以下の通りです。

  • Windows10 Chrome
  • iOS Safari

H2

H3

H4

H5
H6

引用

引用元

アンダーラインテスト

アンダーラインテスト

アンダーラインテスト

アイコンボックス

案内ボックス

タブボックス

付箋風ボックスタイトル

アイコンリスト
  • 2
  • 3
タイムラインのタイトル
  • ラベル
    タイトル

    1個目

  • ラベル
    タイトル

    2個目

見出し

見出しボックス見出し

見出し

タブ見出しボックス見出し

見出し

ラベルボックス

マイクロバルーン

あいうえお

マイクロコピーテキスト

あいうえお

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

コメント

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