Zooloppaをダークモード対応にしてみる | SkillhubAI（スキルハブエーアイ）

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

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

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

file

基本カラーと画像の調整

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

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

file

ダークモード用のカラーを設定します。画像の彩度・明るさを押さえる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 {...} と書いて色を変える。これでも良いのですが、最終課題のデザインを見ると詳細ページの背景も白なのですよね。

file

更に追加するのは面倒なので、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);
}

file

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

file file

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

--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クラスの配色が変わっているはずです。

file

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

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

cardクラス内

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

file

以下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 */

file

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

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

file

背景色（--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;
  }

file

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

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

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

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

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

file

背景画像だけの色味を変えたい場合、ちょっとややこしい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;
}

file

疑似要素（:before）や絶対配置（position: absolute;）については、以下の講座をご確認下さい。

無料講座

HTML&CSSでつくるWebサイト制作入門

その他・全体調整

大まかな配色が出来たら「そのままでも影響はないけれど、違和感があるなぁ…」という部分を調整していきます。

例えば、以下のような部分です。

各セクション背景色
headerのlogo（画像）の色味
text-whiteクラスの色

今回はダークモードの配色がキッチリ決まっていませんから、ここまで暫定で決めた色・Filterなどの設定を微調整しても良いです。全体のバランスを見ながら、整えてみて下さい。

本レッスン素材として、以下のファイルをダウンロードしてご確認いただけます。

レッスン部分の内容：indexAdv-01.html/css
全体を調整したもの：indexAdv-02.html/css

完成見本とは全く別のカラーリングをしてみても面白いですね。お好きなように設定してみて下さい！

レッスン一覧へ