【Cocoon、WordPress】Cocoonでダークテーマとライトテーマで配色を使い分ける方法をメモ書いておく

はじめに

自分で開設しているブログをダークテーマにも対応するようにしたときのメモを残しておきます。

設定方法

headタグにmetaタグを追加する。

以下のHTMLをheadタグ内に入れることで、ライトテーマとダークテーマを規定できます。

<meta name="color-scheme" content="light dark" />

そして、どうやったらCocoon上で設定できるかというと、
Cocoon設定の「アクセス解析・認証」タブ内で追加できます。
「ヘッド用コード」に書きたいmetaタグを書けばそれが追加されます。

そして、追加した後のページのソースコードにあることを確認。

CSSを書く。

次にCSSを書けば反映されます。Cocoon上のテーマエディターで書けば反映されます。
書くコードは以下の感じです。

@media(prefers-color-scheme: dark){
    /* ダークテーマのときのスタイル */
}
@media(prefers-color-scheme: light){
    /* ライトテーマのときのスタイル */
}

おしまい

是非、お役立て下さい！