ダークモード

Ionicを使用すると、ダークカラースキームのサポートを含む、アプリのパレットを簡単に変更できます。ダークモードは、アプリのすべてのビューをダークパレットに変更する表示設定です。iOSとAndroidでシステム全体でサポートされているため、開発者がアプリに追加することを強く望んでいます。

ダークパレットの有効化

アプリでダークパレットを有効にするには、3つの方法があります。**常に**、**システム**の設定に基づいて、またはCSSの**クラス**を使用する方法です。

常に

Ionic Frameworkに付属のデフォルトのパレットは、明るい背景と暗いテキストで構成されるライトパレットです。ただし、適切なファイルに次のスタイルシートをインポートすることで、デフォルトのパレットをダークパレットに変更できます。

Angular

@import '@ionic/angular/css/palettes/dark.always.css';

JavaScript

import '@ionic/core/css/palettes/dark.always.css';

React

import '@ionic/react/css/palettes/dark.always.css';

Vue

import '@ionic/vue/css/palettes/dark.always.css';

これにより、アプリケーションカラーとステップカラーが:rootセレクターに設定されます。

次の例では、ダークモードのシステム設定に関係なく、常にダークパレットが表示されます。

重要

Ionicダークパレットをオーバーライドするために、.iosまたは.mdセレクターをターゲットにすることは避けてください。これらのクラスは各コンポーネントに追加され、グローバルに定義された変数よりも優先されます。代わりに、:root要素のモード固有のクラスをターゲットにすることができます。

システム

ダークモードを有効にするシステムアプローチには、ユーザーが好む配色スキームのシステム設定を確認することが含まれます。これは、新しいIonic Frameworkアプリを開始する場合のデフォルトです。適切なファイルに次のスタイルシートをインポートすると、システム設定からユーザーの好みが自動的に取得され、ダークモードが優先される場合にダークパレットが適用されます。

Angular

@import '@ionic/angular/css/palettes/dark.system.css';

JavaScript

import '@ionic/core/css/palettes/dark.system.css';

React

import '@ionic/react/css/palettes/dark.system.css';

Vue

import '@ionic/vue/css/palettes/dark.system.css';

これにより、アプリケーションカラーとステップカラーが、prefers-color-schemeのCSSメディアクエリがdarkの場合に設定されます。prefers-color-schemeメディアクエリはすべての最新のブラウザでサポートされています。古いブラウザのサポートが必要な場合は、CSSクラスアプローチを使用することをお勧めします。

次の例では、システム設定を使用してダークモードを表示するかどうかを決定します。

情報

システム設定の変更方法がわからない場合は、Windows 11とmacOSでダークモードを有効にする方法を参照してください。

重要

Ionicダークパレットをオーバーライドするために、.iosまたは.mdセレクターをターゲットにすることは避けてください。これらのクラスは各コンポーネントに追加され、グローバルに定義された変数よりも優先されます。代わりに、:root要素のモード固有のクラスをターゲットにすることができます。

CSSクラス

前のアプローチは、ファイルのインポートだけでダークパレットを有効にするのに優れていますが、その適用方法をより細かく制御する必要があるシナリオがあります。トグルを介して条件付きでダークパレットを適用する場合、またはシステム設定に基づいて機能を拡張する場合など、ダークパレットクラスファイルを提供します。このファイルは、特定のクラスがアプリに追加された場合にダークパレットを適用します。次のスタイルシートを適切なファイルにインポートすると、クラスを使用してダークパレットを使用するための必要なスタイルが提供されます。

Angular

@import '@ionic/angular/css/palettes/dark.class.css';

JavaScript

import '@ionic/core/css/palettes/dark.class.css';

React

import '@ionic/react/css/palettes/dark.class.css';

Vue

import '@ionic/vue/css/palettes/dark.class.css';

これにより、アプリケーションカラーとステップカラーが.ion-palette-darkセレクターに設定されます。これは、開発者によってアプリに適用する必要があります。

次の例では、サイト設定、システム設定、およびトグルを組み合わせて、ダークモードを表示するかどうかを決定します。サイトのパレットは、システム設定よりも優先されます。デモの読み込み時にシステム設定がサイトのパレットと異なる場合、サイトのパレットが使用されます。

情報

システム設定の変更方法がわからない場合は、Windows 11とmacOSでダークモードを有効にする方法を参照してください。

重要

インポートされたダークパレットで動作させるには、.ion-palette-darkクラスをhtml要素に追加する必要があります。

システムUIコンポーネントの調整

ダークパレットを開発するとき、特定のシステムUIコンポーネントがダークモードに適切に調整されていないことに気付く場合があります。これを修正するには、color-schemeを指定する必要があります。color-schemeのブラウザ互換性で、クロスブラウザサポートの詳細を確認してください。

ネイティブコンポーネントだけでなく、主にIonicコンポーネントを使用している場合でも、color-schemeはスクロールバーなどのアプリケーションの側面にも影響を与える可能性があります。color-schemeを使用するには、アプリケーションのheadに次のHTMLを追加する必要があります。

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

これにより、ページはレンダリングに適した配色スキームを示すことができます。または、要素ごとにこれを行うために、次のCSSを追加することもできます。

color-scheme: light dark;

デフォルトのスクロールバー	color-schemeを使用したスクロールバー

color-schemeの詳細については、配色スキームに関するWeb.devガイドを参照してください。

注意

color-schemeはキーボードには適用されません。ダークモードがキーボードでどのように動作するかについては、キーボードドキュメントを参照してください。

注意

iOS 15のSafariのステータスバーまたはmacOSのSafariのツールバーの下にあるテーマカラーをカスタマイズしたい開発者の場合、theme-colorメタを参照してください。

Ionicダークパレット

Ionicには、3つの異なる方法で有効化できる推奨されるダークパレットがあります。常に、システムの設定に基づいて、またはCSSクラスを使用する方法です。これらの各メソッドには、対応する名前のダークパレットファイルをインポートすることが含まれます。

参照のために、各ファイルの内容を以下に示します。これらの変数は、関連するダークパレットファイルをインポートすることで設定され、アプリにコピーする必要はありません。変更される変数、およびさらなるカスタマイズのための追加変数については、テーマセクションを参照してください。

常に (dark.always.css)

**常に**ダークパレットは、次の方法で動作します。

1. :rootセレクターで、すべてのモードのIonicカラーをダークパレットに合わせて設定します。:rootセレクターはhtmlセレクターと同じですが、特異度が高くなっています。
2. :root.iosセレクターを使用して、iOSデバイスのダークパレットの変数を設定します。
3. :root.mdセレクターを使用して、MDデバイスのダークパレットの変数を設定します。

注意

Ionicダークパレットの変数をオーバーライドする場合は、特異度に注意することが重要です。たとえば、--ion-item-background変数は各モードに対して設定されているため、:rootセレクターではオーバーライドできません。:root.iosなど、より高い特異度を持つセレクターが必要です。

情報

Ionicのダークパレットの内容は、GitHubで確認できます。常にダークパレットを適用するために使用されるCSSは、リポジトリにあります。

システム (dark.system.css)

システムダークパレットは以下の動作をします。

1. :rootセレクターで、すべてのモードのIonicカラーをダークパレットに合わせて設定します。:rootセレクターはhtmlセレクターと同じですが、特異度が高くなっています。
2. :root.iosセレクターを使用して、iOSデバイスのダークパレットの変数を設定します。
3. :root.mdセレクターを使用して、MDデバイスのダークパレットの変数を設定します。
4. prefers-color-schemeのCSSメディアクエリがdarkの場合にのみ、これらの変数を適用します。

注意

Ionicダークパレットの変数をオーバーライドする場合は、特異度に注意することが重要です。たとえば、--ion-item-background変数は各モードに対して設定されているため、:rootセレクターではオーバーライドできません。:root.iosなど、より高い特異度を持つセレクターが必要です。

情報

Ionicのダークパレットの内容は、GitHubで確認できます。システムダークパレットを適用するために使用されるCSSは、リポジトリにあります。

クラス (dark.class.css)

クラスダークパレットは以下の動作をします。

1. .ion-palette-darkセレクターで、すべてのモードのIonicの色をダークパレットに合うように設定します。.ion-palette-darkクラスは、アプリのhtml要素に追加する必要があります。
2. .ion-palette-dark.iosセレクターを使用して、iOSデバイスでダークパレットの変数を設定します。
3. .ion-palette-dark.mdセレクターを使用して、MDデバイスでダークパレットの変数を設定します。

注意

Ionicのダークパレット変数を上書きしたい場合は、特異性に注意することが重要です。例えば、--ion-item-background変数は各モードに対して設定されているため、.ion-palette-darkセレクターでは上書きできません。.ion-palette-dark.iosなどの、より高い特異性のセレクターが必要です。

情報

Ionicのダークパレットの内容は、GitHubで確認できます。クラスダークパレットを適用するために使用されるCSSは、リポジトリにあります。