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

1. headタグにmetaタグを追加する。#

まず、以下のmetaタグをheadタグの中に追加する必要があります。

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

Cocoonでは、style.cssみたいにhtmlのエディターがあるわけではありませんが、metaタグを入れる際には、Cocoon設定の「アクセス解析・認証」タブ内で追加できます。「ヘッド用コード」に書きたいmetaタグを書けばそれが追加されます。「ヘッダー用コード」じゃないから注意！

それで、追加した後はページのソースコードにこんな記述があればOK。

2. CSSを書く。#

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

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

それを保存すれば終わりです。