OSやブラウザのダークモードに対応した「Simple Darkmode」スキンを同梱追加

スキン
この記事は約3分で読めます。

Hirositeを運営されているhirositeさんが作成されたSimple Darkmode(シンプルダークモード)を同梱させていただきました。

シンプルなダークモード対応Cocoonスキン(Simple-Darkmode)を作りました
hiro(管理人) アプリはダークモード対応になっていってるのに、Webサイトは全然ですよね… と、ずっと思っていたのですが、サイトを見る側の人間からすればどうしようもありません。(実は無い事も無いけど…)しかも最新のWordpress純正

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

「Simple Darkmode」スキン

Simple Darkmodeは、通常はこんなデザインのスキンです。

シンプルダークモードの通常デザイン

ただ、OSやブラウザなどの設定がダークモードになっているときは、以下のようにダークモードで表示されるスキンです。

シンプルダークモードのダークモード

なので、表示は訪問者環境のダークモード設定状態に依存するスキンになります。

レイアウト

主なレイアウトはこちら。

見出し

通常

通常の見出し

ダークモード

ダークモードの見出し

引用

通常

通常の引用

ダークモード

ダークモードの引用

テーブル

通常

通常のテーブル

ダークモード

ダークモードのテーブル

マーカー

装飾もダークモードに対応しています。

通常

通常のマーカー

ダークモード

ダークモードのマーカー

ボックス

各種ボックスも全てダークモードに対応しています。

通常

通常のアイコンボックス

通常のタブボックス

ダークモード

ダークモードのアイコンボックス

ダークモードのタブボックス

ブログカード

通常

通常のブログカード

ダークモード

ダークモードのブログカード

吹き出し

通常

通常の吹き出し

ダークモード

ダークモードの吹き出し

エントリーカード

インデックスのカードデザインはこんな感じ。

通常

通常のエントリーカード

ダークモード

ダークモードのエントリーカード

こんな感じで非常に綺麗なダークモードを楽しめる好きになっています。

サイトキーカラーの変更にも対応

このスキンはキーカラー対応となります。「Cocoon設定→全体→キーカラー」にある「サイトキーカラー」と、「サイトキーテキストカラー」を設定する事でサイトイメージを変更できます。

「サイトキーカラー」を設定することでデフォルトで灰色(#757575)で設定されている部分の色を変更する事が可能です。

例えばこちらのヘッダー部分の青色(水色)部分は「サイトキーカラー」で変更してあります。

シンプルダークモードの通常デザイン

シンプルダークモードのダークモード

「サイトキーテキストカラー」は「サイトキーカラー」の背景の上にのるテキストの色です。「サイトキーカラー」に合わせて設定して下さい。

主要なOSにおける、ダークモードへの変更方法

  • iOS iPad OSの場合:設定→ディスプレイと明るさ→”ダーク”へ変更
  • Androidの場合:設定→ディスプレイ→”ダークテーマ”をオンに変更
  • Windowsの場合:設定→個人用設定→色→「規定のアプリモードを選択」を”ダーク”へ変更
  • Mac OSの場合:システム環境設定→一般→外観モードを”ダーク”へ変更
    ※バージョンによって設定方法が異なる、又は設定出来ない場合があります。
なお、Internet Explorerではダークモードが動作せず、ライトモードのみの動作となります。その他主要ブラウザ(Chrome・ Edge・Safari等)では動作確認をしています。

設定方法

今回紹介したスキンは、Cocoon親テーマに同梱されています。

利用するには、Cocoon設定の「スキン」タブからスキンを適用して保存してみてください。

Cocoon設定からシンプルダークモードを選択する

詳細はこちらご参照ください。

シンプルなダークモード対応Cocoonスキン(Simple-Darkmode)を作りました
hiro(管理人) アプリはダークモード対応になっていってるのに、Webサイトは全然ですよね… と、ずっと思っていたのですが、サイトを見る側の人間からすればどうしようもありません。(実は無い事も無いけど…)しかも最新のWordpress純正
タイトルとURLをコピーしました