jQuery で ダークモード設定時に画像をすり替える

はじめに

ちょっと凝ったダークモードを設定して、ユーザーにより良いWeb体験を提供します。

一般的には

style.css

// MDNより転載

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

とか

puutin.html

<picture>
<source media="prefers-color-scheme: dark" src="nightpuutin.jpg">
<img src="moonpuutin.jpg">
</picture>

とかやるらしいのですが・・・・

ユーザーが今すぐ簡単に切り替えられない、という大問題があります。

一般消費者アンケート調査において

OSのダークモード設定だけに頼っていいですか？

とお伺いしたものの、デザイン見てから判断したいので、Webで動的に変更したい

というご意見が比較的多めでした。

Webサイトに設定画面を作ってみましょう。

あえて、設定画面の具体的なつくり方は、ここでは申しません。

cookieやLocalstrageに保存できるものを作るとよいでしょう。

しかし、設定画面を実行する上で、以下のスクリプトが必要となります。

mql.js

/*
Usage

mql(undefined | "" | "default") - OS Setting
mql("Light") - Light mode
mql("Dark") - Dark mode

*/

function mql(cook) {
	var mql = window.matchMedia('(prefers-color-scheme: dark)').matches,
		_body=$('body');

	if(cook === undefined || cook == "" || cook == "default") {
		if(mql) {
			_body.removeClass('Light');
			_body.addClass('Dark');
		} else {
			_body.removeClass('Dark');
			_body.addClass('Light');
		}
	} else if(cook == "Dark") {
		_body.removeClass('Light');
		_body.addClass('Dark');
	} else {
		_body.removeClass('Dark');
		_body.addClass('Light');
	}


	// imgタグを書き換える
	$('img').each(function() {
		var t=$(this);
		if(t.data('darksrc') !== undefined) {
			// 初回のみ
			if(t.data('tmplightsrc') === undefined) {
				t.data('tmplightsrc', t.attr('src'));
				t.data('tmpdarksrc', t.data('darksrc'));
			}
		}
	});

	// 画像を動的にライト、ダークで書き換える
	// <img src="light.jpg" data-darksrc="dark.jpg">
	$('img').each(function() {
		var t=$(this);
		if(t.data('tmpdarksrc') !== undefined) {
			t.attr('src', t.data(
				_body.hasClass('Dark')
				? 'tmpdarksrc'
				: 'tmplightsrc'
			));
		}
	});
}

使い方は

• mql(undefined 等);
• mql("Light");
• mql("Dark");

CSSの書き方

style.scss

body.Dark {
  element {
    //ダークモード時
  }
}

body.Light {
  element {
    // ライトモード時
  }
}

imgタグの書き方

sample.html

<img src="ライト.jpg" data-darksrc="ダーク.jpg">

さいごに

この方式を用いることで、OS設定によるダークモードに対応していない
ブラウザ(Windows用Firefoxが現状対応していません）でも
ユーザー操作によってダークモードに設定することができます。

更に、必要に応じてライトモードとダークモードの画像を簡単にすりかえられるようにすることで
ユーザーの体験向上を図ることができます。