アイコン画像を含めたWebサイトのダークモード対応を実現するCSSの話
asial-kamo
こんにちは、鴨田です。
最近、仕事でダークモード対応することがあり、各種アイコンなどの対応で行ったことを書き記します。
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の場合は、
- 左下のWindowsボタン
- メニュー：設定
- 設定ウィンドウ：個人用設定：色
- 規定のアプリモードを選択：白 or 黒
(白がライトモード、黒がダークモードです)
Macの場合は、
- システム環境設定
- 一般
- 外観モード：ライト or ダーク
4. アイコン用の画像を用意する
そして、本題のアイコンのダークモード対応です。
行うこととしては、アイコン画像を用意します。
透過PNGでもマスク画像にはできますが、出来ればSVG形式の画像が良いです。
解像度の高いアイコンPNG画像であれば、それでも構いません。
SVG形式のアイコン画像を作成する場合、Adobe Illustratorを使用して、いくつか方法でSVG形式での書き出しが可能です。
次の1と2/3ではSVGの中身が異なりますが、バージョンによる違いです。
1はSVG1.1での書き出し、2/3はSVG2.0での書き出しになります。
- メニュー -> ファイル -> 別名で保存 -> 「ファイルの種類」を「SVG」にして保存
- メニュー -> ファイル -> 書き出し -> 書き出し形式 ->「ファイルの種類」を「SVG」にする
- SVGにしたいオブジェクトを選択 -> 右クリックメニュー ->書き出し用に追加 -> 単一/複数のアセットとして ->アセットの書き出しウィンドウ内の「形式」を「SVG」にして「書き出し」
3.の方法が一番手軽にできるのではないかと思いますが、
SVG1.1だけにしか対応してないブラウザもあるので、1の方法を推奨します。
画像の用意ができたら、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プロパティで指定するということです。
このサンプルでは、モードに応じて、アシアルロゴが
- ライトモード：シンボルマークがオレンジ、ロゴタイプが黒
- ダークモード：シンボルマーク、ロゴタイプともに白
に切り替わります。
まとめ
いかがでしたでしょうか。
とてもかんたんにアイコンを含めたダークモード対応が出来たのではないでしょうか。
これを機会に、ぜひ皆様の管理されているWebサイトをダークモード対応してみてください。
