【Blogger/QooQ】QooQをダークモードに対応させてみた

Vaster2でダークモードに対応させてみましたが、同様にQooQでも対応させてみました。

Blogger / QooQダークモード対応

基本的にはVaster2の時と同じ。
cssにメディアクエリ特性の1つprefers-color-schemeを使用しますが、クラス・IDの構成等が独自な構成なので見合った追加・変更をする事になります。

基本型は以下。

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

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

今回はQooQの変更

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

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

1例として、以下の感じでダークモードに対応させました。
cssの何処か(自身で判りやすいところ）に記述します。

/* ダークモード向け */
:root {
  --Dark-bg: #333333;
  --Dark-bg2: #444444;
  --Dark-color:#f5f5f5;
}

@media (prefers-color-scheme: dark) {body{
    background:  var(--Dark-bg) !important ;
    color:  var(--Dark-color) !important ;
}
#header-inner{
    background:  var(--Dark-bg2) ;
}
.list-item-inner{
    background:  #808080 ;
}
#single {
    background:  var(--Dark-bg)  !important ;
}
.mrp-post{
    background:  var(--Dark-bg)  !important ;
}

#sub-content .widget, .collapsible {
background:  var(--Dark-bg) !important ;
}
#footer {
    background: var(--Dark-bg2) !important ;
}
}

ちょっと説明

今回ダークモード時の色（カラーコード）を指定する時、rootを使い変数として色（カラーコード）登録して使います。
今後の変更を考えると、この方法が分かりやすかったので。

変数宣言は--から始めて、続いて変数名を付けます。
:で区切り値を記述。

以下の感じ。
--Dark-bg:#333333;

使いたい箇所で変数を呼び出して使います。
こんな感じ。
var(--Dark-bg:#333333;)

今回の変更ではbackgroundやcolorに指定する色（カラーコード）を変数で呼び出して色を指定しました。
色以外でも使えますよ。

DEMOページを作っています。

当ブログはまだ反映していない為、以下のリンク先にQooQによるデモブログを用意しています。

ダークモードの環境でアクセスするとブラックベースのブログ、非ダークモードであれば白ベースのブログが表示されます。

DEMO ブログ


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

以上