【Advance】Zooloppaをダークモード対応にしてみる

Zooloppaをダークモード対応にする
基本カラーと画像の調整
白背景色部分の調整

CSS変数の追加
ダークモード用カラーの設定

その他のバランスを整える

cardクラス内
ズーロッパ東京とは、セクション
ファーストビューの背景画像

その他・全体調整

Zooloppaをダークモード対応にする

Zooloppaサイト（index.html）は現時点では何の設定もしていないので、ブラウザの設定を変えても表示は同じです。
ダークモード対応にするためのCSSを書いてみましょう。

ダークモード向けのカラーを設定は、下図のようにしてみます。
白背景部分を黒っぽく反転し、それ以外の部分は全体的にトーンを少し下げ暗くするイメージです。

基本カラーと画像の調整

CSS変数（カスタムプロパティ）について知ろうのレッスンでCSS変数にした4つのカラーうち、濃色2つの色を変えます。

タブレット向けのスタイル指定を書いている@mediaの上に、@media (prefers-color-scheme: dark) {}を追加。

ダークモード用のカラーを設定します。
画像の彩度・明るさを押さえるCSSも書いておきましょう。

@media (prefers-color-scheme: dark) {
    :root{
        --color_main: #638420;
        --color_accent: #d95626;
    }

    img {
        filter: saturate(90%) brightness(85%);
    }
}

白背景色部分の調整

cardクラスの背景色を変えてみます。

CSS変数の追加

@media (prefers-color-scheme: dark) {}の中に.card {...} と書いて色を変える。
これでも良いのですが、最終課題のデザインを見ると詳細ページの背景も白なのですよね。

更に追加するのは面倒なので、CSS変数を作ります。

ライトモードは白/ダークモードなら黒になる背景色--color_default-base
ライトモードは黒/ダークモードなら白になる文字色 --color_default-text

これは@mediaの外、共通のスタイル指定として書きます。

:root{
  --color_default-base: #FFFFFF;/* 白 */
  --color_default-text: #000000;/* 黒 */
}

作成した変数を使って、bodyに対してデフォルトカラーの設定を追加します。

body{
  margin: 0;
  background-color: var(--color_default-base);
  color: var(--color_default-text);
}

そして、.cardのbackground-colorプロパティの値も変数に置き換えます。
ブラウザで確認して、きちんと変数が読めていればOK。

ダークモード用カラーの設定

--colordefault-baseと --colordefault-textの、ダークモード用の色を設定します。

@media (prefers-color-scheme: dark) {
  :root{
    --color_default-base: #2d2d2d;
    --color_default-text: #F7F7F7;
    --color_main: #638420;
    --color_accent: #d95626;
  }
    ~ 以下略 ~

ブラウザをリロードすると、.cardクラスの配色が変わっているはずです。

その他のバランスを整える

スクロールダウンすると、文字が読みにくくなっていたり、問題点がいくつかあります。
問題点を見つけたら、その該当箇所のタークモード用カラーを書き足していきましょう。

cardクラス内

背景色を暗くした.cardの中身は、文字が見にくいですね。

以下2つを直します。

リンク色（--color_text-link）
イベントのカード内文字（.card-description）

@media (prefers-color-scheme: dark) {
  :root{
    --color_default-base: #2d2d2d;
    --color_default-text: #F7F7F7;
    --color_main: #638420;
    --color_accent: #d95626;
    --color_text-link: #66c4ff;
  }

  img {
    filter: saturate(90%) brightness(85%);
  }

  .card-description{
    color: (--color_default-text);
  }

}/* End prefers-color-scheme: dark */

ズーロッパ東京とは、セクション

背景色が明るく、pタグの文字が殆ど見えません。

背景色（--color_accent-subtle）を暗めに変えて、サクッと対応しておきます。

@media (prefers-color-scheme: dark) {}内

  :root{
    --color_default-base: #2d2d2d;
    --color_default-text: #F7F7F7;
    --color_main: #638420;
    --color_accent: #d95626;
    --color_accent-subtle: #1f1d0a;
    --color_text-link: #66c4ff;
  }

ファーストビューの背景画像

ダークモード用に、imgタグにはfilterを追加しました。
ですが、firstviewセクションに設定した背景画像にはフィルターが効いていませんよね。

@media (prefers-color-scheme: dark) {}の中に、下記のように書くと、firstviewセクション全体が暗くなってしまいます。

@media (prefers-color-scheme: dark) {}内

.firstview{
    filter: saturate(90%) brightness(85%);
}

背景画像だけの色味を変えたい場合、ちょっとややこしいCSSを書く必要があります。
疑似要素を使って、背景画像とテキストの間に1つレイヤー（要素）を追加するようなCSSを書きます。
その追加したレイヤーにフィルターをかけることで、背景画像だけを暗くするイメージです。

@media (prefers-color-scheme: dark) {}内

.firstview{
    position: relative;
    z-index: 0;
}

.firstview::before{
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    filter: saturate(90%) brightness(85%);
    z-index: -1;
}