はじめに

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

設定方法

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

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

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

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

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

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

是非、お役立て下さい！