Safariでダークモードを賢く使いこなす：CSS、JavaScript、Match Media API駆使のテクニック
CSS、macOS、SafariでOSがダークモードかどうかを検出する方法
CSS prefers-color メディアクエリを使用して、ユーザーがシステム設定で предпочитает темную цветовую схемуを選択しているかどうかを検出できます。これは、最もシンプルで直感的な方法ですが、Safari 15.5以降でのみサポートされています。
@media (prefers-color: dark) {
/* ダークモードのスタイル */
}
@media (prefers-color: light) {
/* ライトモードのスタイル */
}
利点:
- シンプルで直感的
- 追加のライブラリ不要
- Safari 15.5以降でのみサポート
JavaScriptとdocument.body.classListを使用する
document.body.classList プロパティを使用して、CSSクラスの存在を確認することで、OSがダークモードかどうかを検出できます。この方法は、すべての主要なブラウザで動作しますが、macOS 以外のオペレーティングシステムでは誤検知が発生する可能性があります。
const isDarkMode = document.body.classList.contains('dark-mode');
if (isDarkMode) {
// ダークモードのスタイルを適用
} else {
// ライトモードのスタイルを適用
}
- ほとんどのブラウザで動作
- macOS以外のオペレーティングシステムでは誤検知が発生する可能性がある
Match Media APIを使用して、prefers-color メディアクエリに変更を検出するリスナーを作成することで、OSがダークモードかどうかを検出できます。この方法は、すべての主要なブラウザで動作し、誤検知の可能性が低くなりますが、他の方法と比べて複雑です。
const prefersColorQuery = window.matchMedia('(prefers-color: dark)');
prefersColorQuery.addEventListener('change', (event) => {
if (event.matches) {
// ダークモードのスタイルを適用
} else {
// ライトモードのスタイルを適用
}
});
- すべての主要なブラウザで動作
- 誤検知の可能性が低い
- 他の方法と比べて複雑
最適な方法を選択する
使用する方法は、要件と優先順位によって異なります。
- シンプルで直感的な方法が必要な場合: CSS
prefers-colorメディアクエリを使用します (ただし、Safari 15.5以降でのみサポート)。 - すべての主要なブラウザで動作する必要がある場合: JavaScriptと
document.body.classListを使用します (ただし、macOS以外のオペレーティングシステムでは誤検知が発生する可能性があります)。 - 誤検知の可能性を低く抑え、すべての主要なブラウザで動作する必要がある場合: Match Media APIを使用します (ただし、他の方法と比べて複雑)。
その他の注意点
- ユーザーがブラウザ設定でダークモードを無効にしても、OSがダークモードの場合は検出される可能性があります。
- 一部のWebサイトは、独自のダークモード設定を提供している場合があります。
CSS prefers-color メディアクエリを使用する
body {
transition: background-color 0.3s ease;
}
@media (prefers-color: dark) {
body {
background-color: #333;
color: #fff;
}
}
@media (prefers-color: light) {
body {
background-color: #fff;
color: #333;
}
}
このコードは、ユーザーがシステム設定でダークモードを選択している場合、背景色を黒(#333)、文字色を白(#fff)に設定します。ライトモードの場合は、背景色を白(#fff)、文字色を黒(#333)に設定します。
const isDarkMode = document.body.classList.contains('dark-mode');
if (isDarkMode) {
// ダークモードのスタイルを適用
document.body.style.backgroundColor = '#333';
document.body.style.color = '#fff';
} else {
// ライトモードのスタイルを適用
document.body.style.backgroundColor = '#fff';
document.body.style.color = '#333';
}
このコードは、document.body.classList プロパティを使用して、CSSクラス dark-mode の存在を確認します。クラスが存在する場合、ダークモードのスタイルを適用します。存在しない場合は、ライトモードのスタイルを適用します。
Match Media APIを使用する
const prefersColorQuery = window.matchMedia('(prefers-color: dark)');
prefersColorQuery.addEventListener('change', (event) => {
if (event.matches) {
// ダークモードのスタイルを適用
document.body.style.backgroundColor = '#333';
document.body.style.color = '#fff';
} else {
// ライトモードのスタイルを適用
document.body.style.backgroundColor = '#fff';
document.body.style.color = '#333';
}
});
このコードは、Match Media APIを使用して、prefers-color メディアクエリに変更を検出するリスナーを作成します。リスナーが起動されると、event.matches プロパティを使用して、ユーザーがシステム設定でダークモードを選択しているかどうかを確認します。選択している場合は、ダークモードのスタイルを適用します。選択していない場合は、ライトモードのスタイルを適用します。
注意事項
- 上記のコードはあくまでサンプルであり、必要に応じて変更する必要があります。
- WebサイトのスタイルシートやJavaScriptコードにこれらのコードを統合する必要があります。
CSS、macOS、SafariでOSがダークモードかどうかを検出するその他の方法
環境変数を使用する
macOS Mojave以降では、WK_ 外観 環境変数が使用できます。この変数は、light または dark のいずれかに設定されます。
const isDarkMode = process.env.WK_APPEARANCE === 'dark';
if (isDarkMode) {
// ダークモードのスタイルを適用
} else {
// ライトモードのスタイルを適用
}
- macOS Mojave以降でのみサポート
- Webブラウザ以外で実行する場合に動作しない可能性があります
ネイティブモジュールを使用する
Electronなどのネイティブモジュールを使用して、オペレーティングシステムのダークモード設定にアクセスできます。これは、複雑なWebアプリケーションの場合に役立つ場合があります。
- 高度な制御が可能
- 設定が複雑
OS固有のAPIを使用する
macOSには、NSAppearanceCurrentEffectiveMode 関数など、OSがダークモードかどうかを検出するために使用できるOS固有のAPIがいくつかあります。これらのAPIは、Objective-CまたはSwiftで記述されています。
- macOSで高精度な検出が可能
- 開発が複雑
- macOS Mojave以降でのみサポートされるシンプルな方法が必要な場合: 環境変数を使用します。
- 複雑なWebアプリケーションで高精度な検出が必要な場合: ネイティブモジュールを使用します。
- macOSで高精度な検出が必要な場合: OS固有のAPIを使用します。
css macos safari
