概要

Android 10（APIレベル29）およびiOS 13では、 Androidのダークテーマ およびiOSのダークモード として知られる、すべてのユーザーインターフェイス要素にシステム全体のダークな外観が導入されています。 ユーザーがインターフェイスを切り替えて、周囲の照明条件に基づいてアプリケーションのコンテンツに集中できるようにするだけでなく、デバイスの画面技術に応じて電力使用量を削減できるという多くの利点があります。

Android用ダークテーマ

デフォルトでは、既存のNativeScriptアプリケーションはAndroidのダークテーマの影響を受けません。変更なしで、ライト（明るい）テーマと同じように表示されます。

Androidのダークテーマをサポートするには、アプリケーションのテーマは、ここで説明されている DayNightテーマから継承する必要があります。

ただし、Android 10（APIレベル29）は、開発者が前述のように明示的にDayNightテーマを設定せずにダークテーマを迅速に実装する機能を提供します。 この機能はForce Darkと呼ばれます。

リリース6.2以降、NativeScriptはデフォルトでForce Dark機能を有効にして新しいアプリケーションを作成し、そのままでダークテーマのサポートを提供します。

Force Darkは、アクティビティのテーマでandroid:forceDarkAllowedをtrueに設定することで有効になります。 特に、NativeScript CLI 6.2以降で作成されたすべてのプロジェクトには、<project>/app/App_Recoures/Android/src/main/res/values/styles.xmlファイルに次のスニペットが含まれています。

...

<!-- theme to use AFTER launch screen is loaded-->
<style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
	<item name="android:forceDarkAllowed">true</item>
	<item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>

	<item name="colorPrimary">@color/ns_primary</item>
	<item name="colorPrimaryDark">@color/ns_primaryDark</item>
	<item name="colorAccent">@color/ns_accent</item>
</style>

<style name="AppTheme" parent="AppThemeBase">
</style>

...

Force Darkに対応するようにプロジェクトを更新する場合は、上記のように <project>/app/App_Recoures/Android/src/main/res/values/styles.xmlファイルに、<item name="android:forceDarkAllowed">true</item>を追加する必要があります。

iOSのダークモード

バージョン6.2より前のバージョンで構築された既存のNativeScriptアプリケーションは、iOSのダークモードの影響を受けません。両方のモードで同じように見えます。

iOS 13以降、ダークモードはデフォルトで有効になっており、Xcode 11以上のツールでビルドされたすべてのアプリケーションは、システムの外観の変更に自動的に反応します。

NativeScriptフレームワークのサポートは、バージョン6.2以降、ネイティブウィジェットの完全なセットが、LightとDarkの両方のシステムの外観ですぐに使用できるように適合されています。 したがって、これまでのアプリケーションが両方のモードで同じように見えた場合、6.2にアップデートすると、そのモードはダークモードで変更され、壊れているように見える可能性があります。

ただし、アプリケーションのダークモードのサポートに時間をかける必要がある場合は、 アプリケーションの<project>/app/App_Recoures/iOS/Info.plistファイルにUIUserInterfaceStyleキーを含めることで無効化できます。

...

<key>UIUserInterfaceStyle</key>
<string>Light</string>

...

仕組み

バージョン6.2以降、NativeScriptは実行中のモバイルオペレーティングシステムのシステムの外観を検出し、それぞれのCSSクラスをアプリケーションのルートビューに適用します。 特に、iOS 13.0でアプリケーションをライトモードで実行すると、.ns-lightCSSクラスがアプリケーションのルートビューに割り当てられます。 同様に、システムの外観をライトからダークに変更すると、.ns-lightクラスが.ns-darkに置き換えられます。その逆も同様です。

この動作を説明するために、以下のサンプルCSSスタイルは、アプリケーションのページをライトシステムの外観ではライトブルー色で、ダークシステムの外観ではダークブルーでペイントします。

.ns-light Page {
	background-color: lightblue;
}

.ns-dark Page {
	background-color: darkblue;
}

さらに、アプリケーションモジュールはsystemAppearanceプロパティとsystemAppearanceChangedイベントを提供します。 これにより、現在のシステムの外観モードを簡単に検出し、変更時のアプリケーションの動作やスタイルを更新できます。

NativeScriptテーマの統合

NativeScriptテーマは、明るいシステムと暗いシステムの両方の外観に対してアプリケーションの美しい外観を提供します。詳細については、テーマのGithubリポジトリを参照してください。