ネイティブモバイルアプリにダークモードを実装する

ジュリア・チョウ
2023 年 2 月 9 日
分読み

ブログヘッダー - ネイティブモバイルアプリにダークモードを実装する方法

現在、ほとんどの携帯電話には、ユーザーがライトモードとダークモードを切り替えるための機能が組み込まれています。ユーザーの携帯電話がすでにダークモードになっているのに、調整できずにライトモードで明るく光っているアプリがある場合、アプリを使用するユーザーの全体的なエクスペリエンスが損なわれます。このため、ネイティブモバイルアプリにダークモードを実装する方法を知っておくことが重要です。

幸いなことに Mendix多くのコードがバックグラウンドで事前に構築されているため、プロセスは簡単です。

このチュートリアルは、 Mendix モデラーバージョン 9.20。他のバージョンでは異なる場合があります。

この投稿の内容

この記事では、ダークモードを作成する方法について説明します。 Mendix ネイティブモバイルアプリ。最終的には、ユーザーのモバイル設定に応じて、アプリが自動的にダークモード (またはライトモード) に切り替わるようになります。携帯電話がすでにダークモードになっている場合は、アプリもダークモードで表示され、その逆も同様です。

この投稿の内容 NOT 自己紹介

この投稿は、ライトモードとダークモードを切り替えるスイッチを作成する方法に関するチュートリアルではないことに注意してください。(詳細については、以下を参照してください。) アプリにダークモードを実装する方法) 今日私たちが目指しているのは、ユーザーの携帯電話がダークモードになっているときに、アプリを自動的にダークモードバージョンに切り替える方法です。

チュートリアル

ステップ1: カスタムテーマモジュールを作成する

カスタムテーマモジュールを作成する場合、使用する方法は、Web アプリのカスタムテーマモジュールを作成する方法と似ています。アプリエクスプローラーで右クリックし、「モジュールの追加」を選択します。

ネイティブモバイルアプリのダークモードの実装_アプリエクスプローラーを右クリックしてモジュールの追加を選択

必ず認識しやすい名前に変更してください。たとえば、ブランド名が「Smith Company」の場合、テーマモジュールの名前は「smith_theme」のようになります。この例では、モジュールの名前を「sampleapp_theme」に変更しました。

ネイティブモバイルアプリのダークモードの実装_テーマモジュール名

このモジュールを UI リソースモジュールとしてマークする必要もあります。モジュールを右クリックして、「これを UI リソースモジュールとしてマークする」を選択します。これでモジュールが緑色に変わります。

ネイティブモバイルアプリのダークモードの実装_モジュールをUIリソースモジュールとしてマークして緑色にする

これを UI リソースモジュールとしてマークすると、チームはカスタムスタイルが配置されている場所をすばやく見つけられるようになります。

カスタムテーマモジュールを作成することは、特定のブランドに関連するすべてのスタイルを 1 か所にグループ化する効果的な方法です。このブランドに属する別のアプリで同じスタイルを再利用する必要がある場合は、カスタムテーマモジュールをエクスポートして、新しいアプリにインポートするだけです。

ネイティブモバイルアプリでは、カスタムクラスはカスタムテーマモジュール内の「main.js」に追加されます。これは、themesource > [カスタムテーマモジュール] > main.js にあります。

ネイティブモバイルアプリのダークモードの実装_カスタムテーマモジュール内のmaindotjsにカスタムクラスが追加されます

ここでダークモード機能も追加します。

ステップ2: ダークモードを作成するために必要なモジュールを追加する

アプリのダークモードを作成するには、「main.js」ファイルに 2 つの項目を追加する必要があります。

まず、ファイルの先頭に「外観」モジュールを追加する必要があります。このモジュールを追加すると、アプリの優先配色を決定できます。（「外観」の詳細については、次のリンクを参照してください。 https://reactnative.dev/docs/appearance).

次に、「darkMode」変数を追加する必要があります。これは、アプリ内の特定のコンポーネントにダークモードバージョンを実装する前に必要です。コードは次のようになります。

ネイティブモバイルアプリのダークモードの実装_ダークモード変数を追加するためのコード

ステップ3: テストする

この例では、テキストと画像を含むタブコンテナーを作成しました。

ネイティブモバイルアプリのダークモードの実装_テキストと画像を含むタブコンテナ

アプリを実行すると、次のようになります。

ネイティブモバイルアプリのダークモードの実装_タブと見出しが追加されたアプリの実行時の外観のサンプル

注: 現在、アプリはライトモードとダークモードの両方でこのように見えます。

タブコンテナーにクラスを割り当てましょう。タブコンテナーをダブルクリックし、[外観] に移動してクラスを割り当てます。この例では、クラスは「sampleTab」です。

ネイティブモバイルアプリのダークモードの実装_タブコンテナにクラスを付与する

注意: クラスはキャメルケースにする必要があります (最初の単語の最初の文字は小文字になり、その後の単語の最初の文字は大文字になります)。

「main.js」ファイルで、タブの背景色、インジケーター（選択されたタブの下線）、ラベル、アクティブラベルを変更します。

ネイティブモバイルアプリのダークモードの実装_タブ、インジケーター、ラベル、アクティブラベルの背景色を変更するためのコード

8行目のコメントに示されているように、ダークモードの代替スタイルを追加する形式は、変数のプロパティに darkmode ? [ダークモード] : [ライトモード] を追加することです。

すべてを保存してプロジェクトを実行します。

結果

ライトモードでの結果は次のとおりです。

ネイティブモバイルアプリのダークモードの実装_ライトモードでのアプリの例

ダークモードでの結果は次のとおりです。

ネイティブモバイルアプリのダークモードの実装_ダークモードのアプリの例

ライトモードとダークモードの両方で、色とコントラストを自由に試してみてください。こちらは、参考までにアプリのより洗練されたバージョンです。

ライトモード：

ネイティブモバイルアプリのダークモードの実装_ライトモードのより洗練されたバージョン

注: 本の画像は私が作成したものです。

ダークモード：

ネイティブモバイルアプリのダークモードの実装_ダークモードのより洗練されたバージョン

注: 本の画像は私が作成したものです。

Studio Pro モデラーのアプリレイアウトとコードを含む、より高度なバージョンのプロジェクトファイルは、ここからダウンロードできます。 https://www.mendix.com/wp-content/uploads/DarkModeSampleApp-2.mpk_.zip

ご学習いただきありがとうございます。このチュートリアルをお楽しみいただければ幸いです。