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

・・・このブログをダークテーマにも対応するようにしたいと思う。

実はダークテーマに設定するための方法が予想以上に簡単だったので、後回しにせずもう実装してしまいたいと思うのだよ。

煽るじゃん？　うん、今回Cocoonで設定する方法を紹介します。方法は簡単なんだけど、配色を選定する作業で詰まりそうだよね。

色々なサイトを見るけど、その作業が悩ましいからダークテーマを採用しているサイトがあまり増えてないんだろうね。

あまりメタな話をするな・・・！　君みたいな二次元キャラの髪色が地毛なのかどうかなんて視聴者はあまり聞きたくないと思うぞ・・・

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

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

うるせえ！！　おらっ！さっさと入れろっ！！

ふっふっふ・・・、実はそこも簡単で、Cocoon設定の「アクセス解析・認証」タブ内で追加できるんですわ。

「ヘッド用コード」に書きたいmetaタグを書けばそれが追加されます。「ヘッダー用コード」じゃないから注意！

お前はなんちゅう遊びをしているんだ・・・アリたちが路頭に迷うぞ・・・。それで、追加した後はページのソースコードにこんな記述があればOK。

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

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

そうなんだけど、やはり色をどうしようかだよね。広告も加味したデザインにしなきゃだから、悩ましい・・・あと、僕のアイコンも白基調で良いのだろうか？

む・・・確かにそうなんだが、文字にされるとなんか引っかかるものがあるな・・・

うるせえ。お前の色反転させんぞ。