はじめに
自分で開設しているブログをダークテーマにも対応するようにしたときのメモを残しておきます。
設定方法
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){
/* ライトテーマのときのスタイル */
}
おしまい
是非、お役立て下さい！
↧