アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

アイコン画像を含めたWebサイトのダークモード対応を実現するCSSの話

こんにちは、鴨田です。
最近、仕事でダークモード対応することがあり、各種アイコンなどの対応で行ったことを書き記します。

1. ダークモード対応のCSSの基本

まずは、普通にダークモード対応のCSSを作成しましょう。
必要最小限のHTML(とCSS)のサンプルです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ダークモード対応</title>
    <style>
        body {
            background: #fff;
            padding: 20px;
        }

        h1 {
            font-size: 24px;
            color: #333;
        }

        h1::before {
            content: "ライト";
        }

        @media (prefers-color-scheme: dark) {
            body {
                background: #333;
            }

            h1 {
                color: #fff;
            }

            h1::before {
                content: "ダーク";
            }
        }
    </style>
</head>
<body>
    <h1>モードです</h1>
</body>
</html>

かんたんですね。
ダークモード対応したい場合は、

@media (prefers-color-scheme: dark) {
    //ここにダークモード時のCSSを記述します
}

これだけです。

コード的な説明を行うと、モード切替によって、

  • 背景色が白:黒
  • フォント色が黒:白
  • 文字列がライト:ダーク

にそれぞれ切り替わります。

2. Windows/Macでのダークモード変更

Windows10の場合は、

  1. 左下のWindowsボタン
  2. メニュー:設定
  3. 設定ウィンドウ:個人用設定:色
  4. 規定のアプリモードを選択:白 or 黒

(白がライトモード、黒がダークモードです)

Macの場合は、

  1. システム環境設定
  2. 一般
  3. 外観モード:ライト or ダーク

3. 各モードでのHTMLの確認

スクリーンショット
f:id:asial-kamo:20191030171623p:plain

iframeによるデモページ
demo.asial.co.jp

4. アイコン用の画像を用意する

そして、本題のアイコンのダークモード対応です。
行うこととしては、アイコン画像を用意します。
透過PNGでもマスク画像にはできますが、出来ればSVG形式の画像が良いです。
解像度の高いアイコンPNG画像であれば、それでも構いません。

SVG形式のアイコン画像を作成する場合、Adobe Illustratorを使用して、いくつか方法でSVG形式での書き出しが可能です。
(次の1と2/3ではSVGの中身が少し異なりますが、特に問題ありません)

  1. メニュー -> ファイル -> 別名で保存 -> 「ファイルの種類」を「SVG」にして保存
  2. メニュー -> ファイル -> 書き出し -> 書き出し形式 ->「ファイルの種類」を「SVG」にする
  3. SVGにしたいオブジェクトを選択 -> 右クリックメニュー ->書き出し用に追加 -> 単一/複数のアセットとして ->アセットの書き出しウィンドウ内の「形式」を「SVG」にして「書き出し」

3.の方法が一番手軽にできるのではないかと思います。
画像の用意ができたら、HTMLとCSSを記述します。

ここでは、アシアルロゴのSVG画像を使用します。

5. アイコンのダークモード対応

先程のHTMLにロゴ画像の記述の追加を行います。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ダークモード対応</title>
    <style>
        body {
            background: #fff;
            padding: 20px;
        }

        h1 {
            font-size: 24px;
            color: #333;
        }

        h1::before {
            content: "ライト";
        }

        .asial-logo {
            display: block;
            width: 300px;
            height: 100px;
            -webkit-mask: url(logo.svg) no-repeat center;
            background: linear-gradient(to right, #EE7D45, #EE7D45 23.5%, #231815 23.51%, #231815 100%);
        }

        @media (prefers-color-scheme: dark) {
            body {
                background: #333;
            }

            h1 {
                color: #fff;
            }

            h1::before {
                content: "ダーク";
            }

            .asial-logo {
                background: #fff;
            }
        }
    </style>
</head>
<body>
    <h1>モードです</h1>
    <div class="asial-logo"></div>
</body>
</html>

ポイントとしては、画像を、imgタグ、あるいは、divタグなどのbackgorundプロパティ、で設定するのではなく、
divタグなどの-webkit-maskプロパティに使用して、色をbackgroundプロパティで指定するということです。

このサンプルでは、モードに応じて、アシアルロゴが

  • ライトモード:シンボルマークがオレンジ、ロゴタイプが黒
  • ダークモード:シンボルマーク、ロゴタイプともに白

に切り替わります。

6. 各モードでのHTMLの確認

スクリーンショット
f:id:asial-kamo:20191030172121p:plain

iframeによるデモページ
demo.asial.co.jp

まとめ

いかがでしたでしょうか。
とてもかんたんにアイコンを含めたダークモード対応が出来たのではないでしょうか。
これを機会に、ぜひ皆様の管理されているWebサイトをダークモード対応してみてください。