Skip to main content
Version: v8

ダークモード

Ionic では、ダークな配色をサポートするなど、アプリのパレットを簡単に変更できます。ダークモードは、アプリのすべてのビューをダークパレットに変更する表示設定です。iOS と Android でシステム全体でサポートされているため、開発者にとってアプリに追加することが非常に望ましいです。

ダークパレットを有効にする​

アプリでダークパレットを有効にする方法は 3 つあります: always ダークパレットを有効にする方法、system OS の設定に基づく方法、class CSS のクラスを使用する方法です。

Always​

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

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

これは:rootセレクタにapplication colorsとstepped colorsを設定します。

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

重要

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

System​

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

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

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

以下の例では、ダークモードを表示するタイミングを決定するためにシステム設定を使用しています。

info

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

重要

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

CSS Class​

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

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

これは .ion-palette-dark セレクタの application colors と stepped colors を設定するもので、開発者がアプリに適用する必要があります。

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

info

Not sure how to change the system settings? Here's how to enable dark mode on Windows 11 and on macOS.

重要

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

システム UI コンポーネントを調整する​

ダークパレットを開発する際、特定のシステム UI コンポーネントがダークモードに正しく調整されていないことに気付くかもしれません。これを修正するには、color-schemeを指定する必要があります。ブラウザ間のサポートの詳細については、color-schemeのブラウザ互換性を参照してください。

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

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

これにより、ページは、どのカラースキームでレンダリングするのが快適かを示すことができます。また、次の CSS を追加して、要素ごとに設定することもできます。

color-scheme: light dark;
Default scrollbarScrollbar with color-scheme
A default light-themed scrollbar in an application interface.A dark-themed scrollbar in an application interface, demonstrating the effect of the &#39;color-scheme&#39; property.

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

note

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

note

iOS 15 の Safari でステータスバー下のテーマカラーや、macOS の Safari でツールバーのテーマカラーをカスタマイズしたい開発者は、theme-color Metaを参照してください。

Ionic Dark Palette​

Ionic には推奨のダークパレットがあり、3 種類の方法で有効にできます： always、systemの設定に基づく方法、CSS classを使用する方法です。それぞれの方法には、対応する名前のダークパレットファイルをインポートすることが含まれます。

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

alwaysダークパレットは、以下のように動作します：

  1. :rootセレクタで、すべてのモードのIonic カラーをダークパレットに補完するように設定します。:rootセレクタは、詳細度が高いことを除いて、html セレクタと同一です。
  2. :root.iosセレクタを使用して、iosデバイスでダークパレットの変数を設定します。
  3. :root.mdセレクタを使用して、mdデバイスでダークパレットの変数を設定します。
caution

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

info

Ionic のダークパレットの内容はGitHub で確認できます。alwaysダークパレットを適用するために使用される CSS は、リポジトリで見つけることができます。

Contents

Edit this page