日本語訳:

この記事は、暗いモードの実装に関する実用的なフレームワークを提示しており、単純な meta タグから高度な動的セレクターへと段階的に進みます。最も重要な洞察点は、開発者が必要に応じて、基本的なシステム好みに基づく検出か、洗練された手動制御の間のいずれ也可以选择できる点です。初期の手法は標準的な CSS ファルバックと別々のファイルに依存していた一方、最新の技術としては

light-dark()

関数や登場しつつある

:has()

セレクターがあり、これらによりユーザーが特定のクラスを適用することなく、非常に柔軟なデザインを実現することが可能になっています。しかしながら、現在のブラウザのサポートは不均一であり、例えば Safari は暗いモードにおけるアクセシブルなリンクの色で歴史的に困難に遭遇し、印刷プレビューをデフォルトで明けなテーマに戻す傾向があります。さらに、

light-dark()

関数などの機能は執筆当時の時点で普遍的にサポートされておらず、その直後の実現可能性が制限されていました。これからの将来に向けて、CSS Naked Day のようなイニシアチブは、カスタムスタイルを除去して色の干渉なしにサイトの動作をテストすることを促しています。ブラウザの能力が拡大につれ、より高度な実装レベルが標準化され、企業がアクセシビリティの課題を解決するだけでなく、異なるプラットフォームやデバイス間で一貫したユーザーエクスペリエンスを保証できるようになるでしょう。

ダークモードの 6 つのレベル（そしてそれ以上のもの）

骨格のみ · ベーシック · 無害 · ボールド · 二分割的 · バリスティック · Beyond · 誘惑的

今年のカスケード・ネイキッドデイ（CSS Naked Day）の間、私に起こったことは、視覚的に隠された議論への想起だけではありませんでした。私は、私が訪問したほぼすべてのサイトにおいて、スタイルが削除された後、ダークモードがほとんど見られなくなっていることに気づきました。これは、もしかしたらダークモードの 6 つのレベルについて話す時が来たかもしれない、と考えさせるものです。

このブログ記事の少しキャッチーさには欠けるが、より正確なタイトルは「色彩スキーム切替の 6 つのレベル」でした。まあいいでしょう。この記事内の例のコードの多くはダーク側を示しているため、タイトルには意味があります。ただ、逆にすることも可能であることを念頭に置いておいてください。

これ以上言う必要はありません、さっそく始めましょう。

レベル 1：骨格のみ（Barebone）

このレベルは簡単なほうですが、導入部で言及されたサイトでは、基本的なディレクティブが欠けていたようです。単一の行の CSS を使用せずに、ライトモードとダークモードの区別に参加することもでき、これは一般に素晴らしいことですが、特に 4 月 9 日（CSS ネイキッドデイ）には特に関連します。

単にドキュメントの

<head>

に以下のメタタグを追加するだけで、準備が整います。

<meta name="color-scheme" content="light dark">

Web ページがこのタグを含んでいると、ブラウザはユーザーの色スキーム好みに従うべきであると理解します。

content

属性内のエントリの順序は、少なくとも理論的には重要です。色スキームの好みが設定されていないユーザーは、スペース区切りリストの最初に表示されます。しかし、今日のオペレーティングシステムの設定には「選択しない」というオプションがないため、常に OS に合致するものになります。

content

属性に単一のエントリを指定することもできます。これにより、ユーザーの好みを考慮せずに対応するスキームを強制できますが、それはまた別の話です。

ある程度まで、このメタタグは次のレベルにおける HTML の同等物です。

レベル 2：ベーシック（Basic）

次に、ライト/ダークモード区別の CSS を用いた方法に進みましょう。

html {
	color-scheme: light dark;
}

ドキュメントの木（DOM）内にすでにメタタグがある場合、この宣言は必要ありません。HTML に対して制御権がない場合（例えば、コンテンツが CMS から来る場合など）、メタタグの使用を常に推奨します。これにより、ブラウザには

<head>

で色彩スキームディレクティブについて既に情報が与えられ、CSS が解析される前にその情報を得ることができます。

両方の方法は、エージェントのデフォルトスタイルおよびそれに付随するライトモードとダークモードに準拠することを可能にします。次にいくつかの CSS を追加するが、同時に CSS システムカラーの使用のみを限定すれば、既にかなり整ったデザインを実現できます。実は、このサイトのページスタイルスイッチャーには「None」と「Basic」というエントリがあり、それらはレベル 1 とレベル 2 に相当します。

ここですべての 2 つの方法の違いが生じます。常に全体ドキュメントに適用されるメタタグとは異なり、CSS の

color-scheme

宣言はルート要素だけでなくどこでも設定できます。これにより、いくつかの追加の利用シナリオが可能になりますが、私は別のブログ記事でそれらを取り上げます。

レベル 3：無害（Benign）

私たちはベーシックな段階を過ぎましたが、まだ浅い水域にあります。比較的新しく CSS に加えられた、つまり

light-dark()

カラー関数によって、単純なライト/ダークモードの調整が可能になります。

html {
	background-color: light-dark(black, white);
	color: light-dark(white, black);
}

この関数は 2 つの引数をとり、どちらもカラーであるべきです。最初の引数はライトモードで適用され、2 つ目の引数の役割はおそらくご想像の通りでしょう。実際のカラーを単に指定するか、あるいはカスタムプロパティを含めるか、それはあなた次第です。

このブログ記事全体のどの部分においても、執筆時点でのブラウザサポートが特に良くないのは、このレベルのみです。しかし、そこには至ります。

レベル 4：ボールド（Bold）

次に、従来のメディアクエリに進みます。

@media (prefers-color-scheme: dark) {
	html {
		background-color: black;
		color: white;
	}
}

ライトまたはダークのいずれをクエリしても、メディアクエリにより最大のカスタマイズが可能で、単にカラーを変更するだけでなく何でも行うことができます。暗いモードで画像の不飽和化を行うフィルターを使用したいですか？それを実行しましょう。ボックスシャドウを輪郭線に置き換えることも可能ですね。

レベル 5：二分割的（Bisectional）

メディアクエリは HTML でも使用できます。それをメディア属性として追加すると、各スキームのためのスタイルシートを作成できる場合があります。

<link media="screen and (prefers-color-scheme:light)" rel="stylesheet" href="light.css">
<link media="screen and (prefers-color-scheme:dark)" rel="stylesheet" href="dark.css">

大幅なカスタマイズを行う場合、専用ファイルの用意は理にかなっています。ブラウザはクエリに一致しない CSS ファイルを無視する可能性があり、ダウンロードするものが一つ減ります。

レベル 6：バリスティック（Ballistic）

当然のことながら、ここにも JavaScript が役割を果たします。

matchMedia

関数を使用して、他のメディアクエリと同様にライトまたはダークスキームをクエリできます。

const isDarkScheme = window.matchMedia('(prefers-color-scheme:dark)');

そして何をすることも可能です。

現実には、一つの車線にとどまらず、上記のすべてのレベルからの技術を組み合わせることができます。

レベル 7：Beyond（超える）

ユーザーの好みに依存する必要はなく、色彩スキームスイッチャーを構築できます。

そうする場合、注意が必要です。ライトまたはダークモードの好みは真偽値（ブール状態）ではなく、最初はデフォルトで「Automatic」つまり

prefers-color-scheme

に従うのがよいからです。それに基づいてスキームスイッチャーを構築することにより、ユーザーが 3 つのモードの一つを選択できるようにします。

すでに読み取った全てのことを知っていたら、これ以降のものがあります。

レベル 8：誘惑的（Beguiling）

Web デベロッパーがレベル 7 の色彩スキームスイッチャーを作成する場合、通常 HTML 要素に

.dark

というクラスを追加し、時には

data-theme="dark"

というエレガントな属性さえ追加することがあります。しかし、もはやそれらのいずれ也不需要です。なぜなら、

:has()

を使用して真のものをクエリできるからです。

html:has(meta[name="color-scheme"][content="dark"]) {
	--color-bg: black;
	--color-text: white;
}

それをライブで確認するには、「Color scheme switcher, 2024 edition」という私の companion の作品をご覧ください。

コメントと議論

私は間違いなくそれを含んだ
<head>
を持つサイトをいくつか見ました！
ですが、同意します。最近では利用可能な CSS の力が非常に多いです。新しいスタイルを持つ新しいサイトから始める場合、ライトモードとダークモードを本当に簡単に実装できます。🙂

@sarajw@front-end.social への返信。
喜ばしいことですね。また、異なるサイトを訪問しているようだようです。😅
CSS ネイキッドデイのためのウェブリング（webring）もありでしょうか？🤔

@CSSence@mas.to への返信。
ネイキッドデイのためだけにある少し特有のようです… おう、ナビゲーションバーや iframes などを使えばどうでしょう！旧式ですが…

@sarajw@front-end.social への返信。
フレームセット？いいえ、待ってください、それは逆効果になるかもしれません… adactio.com/journal/17916

@CSSence@mas.to への返信。
CSS ネイキッドリング？素晴らしい！参加します！
通常のリングですが、裸になる必要があることを示す URL パラメータ付きのものでもよいですか？
js-naked day のためにも機能するかもしれません @zachleat@zachleat.com。
その通り、私のサイトがネイキッドデイの間にもライト/ダーク好みを正しくサポートしていたことにほとんど確信があります。😉

@villepreux@mastodon.social への返信。
ダーク＆ライトの色スキームの好みがまだ尊重されます。

そのようだそうです。😀👍
よくできました！他にも多くのハイブリッドなレベルがあります。変数とカラーチェンジャー JS、隠された自動カラースキーム: gist.github.com/iamdtms/ddc4e556805e60652c21c06281d5b3c2

言及すべきことは、非常に最近まで（おそらく最新のバージョンまで）、Safari はダークモード用のアクセシブルなリンクカラーを持っていませんでした。昨年の CSS ネイキッドデイに、私のウェブサイトでのこの問題を発見し、メタタグを削除してライト色スキームのみを使用することにしました。今年は、古いバージョンの Safari を使用する人々にとってアクセシブルでない体験を生み出す可能性があることを知っていても、メタタグを追加しました。テキストボックスに暗いモードの Safari においては目立つ境界がないことに気づきました。
私は、将来 CSS ネイキッドデイのためにサイトをアクセシブルに保つのに十分なスタイルを含めることになるかもしれないと思うようになりました。なぜならユーザーエージェントスタイルは完全にアクセシブルではないからです（適切で構文的な HTML でも同様）。

@knowler@sunny.garden への返信。
その通り、良い指摘です。一方、そこにある多くのウェブサイトが一年間ずっとアクセシブルでないことに気づくと、4 月 9 日が私たちの最も心配の少ない日になります。

@CSSence@mas.to, @knowler@sunny.garden への返信。
あの日の a11y（アクセシビリティ）の失敗を見るのは、一種の部分のように思えますが、誰もがうまく機能するように尽力することは良いことです。

なぜ

screen and ...

が Bisectional の例にあるのか不思議です。プレフィックスがない場合のデフォルトは

all and ...

であり、印刷機からスタイルを隠さないと限り同様の効果があります。

@pepelsbey@mastodon.social への返信。
はい、印刷機から隠すのがアイデアだったと推測されます。それらはいずれもテーマに依存しないコアスタイルシートまたは専用のプリントスタイルシートで処理されているはずです。
なので、私はおそらく安全のために

screen

を使ったかったのですし、#DarkMode のために印刷機が使ってしまうと大量のインクが浪費されるかもしれませんね。😉

@CSSence@mas.to への返信。
サンプルページをデフォルトのダークモードスタイルを有効化して印刷しましたが、黒い文字だけ白纸になりました。すべてのブラウザが印刷に適用しないようです。

@pepelsbey@mastodon.social への返信。
興味深いです。私もテストを行いました。メディアクエリテストページを開いて、印刷プレビューでは

prefers-color-scheme

は常にライトを報告します。これは当然のことです。そして、あなたの結果の原因でもあると推測されます。知っておくだけで嬉しいです。（私は Firefox と Chromium のみテストできました。）

@CSSence@mas.to への返信。
悲しいことに、黒い紙と白いインクがあるなら、わかりますね。😄

@pepelsbey@mastodon.social への返信。
🤣

@pepelsbey@mastodon.social, @CSSence@mas.to への返信。
ダークモードの印刷機！

ご協力ください

Mastodon でご意見を述べていただいても、または単にこの記事を共有していただいても結構です。

ダークモードの 6 つのレベル