【Blogger / Vaster2】Bloggerテーマをダークモードに対応させてみる

最近流行りのダークモード（物によってはダークテーマ）。
眼疲れ低減や、睡眠前ネット徘徊による睡眠の質低下を抑える効果があるとか無いとか。
そんなダークモードをBloggerのテーマにも反映させてみたらどうなのか？

Blogger/Vaster2のダークモード対応はcssの追加で可能

メディアクエリの特性1つprefers-color-schemeを使用します。

自分のブログにアクセスしてくるユーザー環境がダークモードを使用している場合、cssでスタイルを決定しています。

@media (prefers-color-scheme: dark) {.クラス名 {
    background: black;
    color: white;
}
}

上記(prefers-color-scheme: dark)とする事でダークモードを使っている場合に続くスタイルを適応させます。
(prefers-color-scheme: light)と記述するとライトモードを使っている場合のスタイルを適応します。

今回はVaster2の変更

cssを変更します。
テーマ（テンプレート）のバックアップを取り、cssを変更していきます。

Bloggerの管理画面より　テーマ＞＞HTMLの編集と進みテンプレートのHTMLを変更します。尚、変更については自己責任でお願いします。

以下はVaster2をダークテーマで表示させる時の大まかな対応箇所です。
cssの何処か(自身で判りやすいところ）に記述します。

@media (prefers-color-scheme: dark) {
.body-wrapper{
    background: black !important;
    color: #f5f5f5 !important;
}

.Header{
    background: black ;
    color: white;
}

.header-title a {
    background: black ;
    color: white !important;
}
.main-outer{
    background: black !important;
}

.article-list{
    background: black;
    color: #f5f5f5 !important;
}

  .article-list-title h2{
   color: #999;
}
}

クラスによっては!importantを使って優先的にスタイルする必要があります。

DEMOページを作っています。
以下のリンク先はダークモードでアクセスするとブラックベースのブログ、非ダークモードであれば通常の白ベースのブログが表示されます。

DEMO ブログ


割と簡単な変更なのでVaster2以外のテーマ（テンプレート）でも対応可能です。

尚、最小限の変更なのでもう少し細かい調整は行った方が良いかも知れません。
そのへんはお好みでお願いします。

以上