アプリにダークモードを実装する方法

なぜダークモードなのですか？

ダークモードが好きではない人はいますか？お気に入りのウェブサイトやデスクトップアプリケーションからモバイルデバイスまで、最近はどこにでもあります。カスタマーエクスペリエンスに関する限り、ユーザーが喜ぶ洗練されたエクスペリエンスを矢筒に追加するのは素晴らしい矢印です。したがって、これは「Mendixアプリケーションにダークモードを実装するにはどうすればよいですか？」という疑問を投げかけます。

方法を説明するためにここにいます。とても簡単です。

最初に行うことは、ダークモード処理が必要なアプリケーションを見つけることです。最新のMendixWorldに参加した方は、Lato Bikesに精通しているかもしれません。これは、Johan den Haanの基調講演でMendixの採用の旅を示すために作成した会社です。

特に製品ページは非常に明るく、ダークモード処理で使用できます。それをどのように行うかを見てみましょう。

ダークモード、ステップバイステップ

まず、DarkModeという新しいモジュールをプロジェクトに追加し、モジュールに単一のユーザーロールを追加します（すべてのユーザーがダークモードの使用を許可されている必要があります）。この新しいモジュールでは、_darkmode.scssという名前のSASSファイルを作成します。 —インポートとしてメインファイルに追加してください。

次に、新しいSASSファイルで、ダークテーマの作成を開始します。私はすべてのオーバーライドとしてそれを行うのが好きなので、通常は次のようなものから始めます。

html body{

background-color: $gray-darker;
color:#fff;
h1, h2, h3, h4, h5, .widget-eventTime, .widget-timeline-title, h6, .h1, .h2, .h3, .h4, .h5, .h6{

color:#fff;

}
//Continue adding styles here…

}

全体的なルックアンドフィールに満足するまで、背景色、境界線、フォントの色を1つずつ上書きします。こんな感じです…

満足のいくテーマができたら、顧客がそれを使用するかどうかを選択できるように、テーマを切り替え可能にする必要があります。このデモンストレーションの目的のために、このセッションに適用されるトグルとして構築しますが、顧客のアカウントにリンクされた永続的な設定を簡単に作成できます。そのためには、SASSファイルにビットを追加する必要があります。

「.darkmode」スタイルで「htmlbody」を追加します。これは、クラス「ダークモード」がボディに追加されるたびに、新しいルックアンドフィールが適用されることを意味します。

次に行うことは、ダークモードがオンかオフかを追跡するエンティティを追加することです。このデモンストレーションでは非永続的にし、お客様のセッションにリンクします。次に、セキュリティを関連付けの場合は「読み取り専用」に設定し、有効フラグの場合は「読み取り/書き込み」に設定します。

その後、お客様にオンとオフを切り替える方法を提供します。いくつかのアイコンを取得して、新しいイメージコレクションに追加します。1つはライトモード用、もう1つはダークモード用です。

次に、そのブール値を切り替えるためのSwitchコントロールを持つスニペットを作成します。以前に作成したDarkModeエンティティを使用する必要があります。まず、次のようなスニペット…

最後に追加された列は、大きな領域に配置された場合に一元化するのに役立ちます。データソースはスニペットのコンテキストエントリではなく、DataViewであることがわかります。これは、スイッチをすべてのページで使用できるように、レイアウトテンプレートに配置するためです。レイアウトテンプレートでスニペットを使用する場合は、独自のデータソースを読み込む必要があります。この場合は、DataViewとMicroflowを使用して読み込みます。

MicroflowデータソースはDS_DarkModeであり、現在のセッションにリンクされているDarkModeエンティティを返すか、まだ存在しない場合は、現在のセッションにリンクされている新しいエンティティを返す必要があります。このように見えるはずです…

スニペットで最後に行うことは、スイッチにOnChangeイベントを与えることです。そのイベントはNanoflowをトリガーする必要があります。 NanoflowをOCh_DarkModeToggleと呼びましたが、Nanoflowが行うのはJavaScriptアクションを呼び出すことだけです。このアクションは、呼び出されたときに「darkmode」クラスをボディに追加または削除します。これは、JavaScriptクラスのトグルメソッドを使用して簡単に行うことができますが、絶対に使用できるように、より明示的にすることにしました。

まず、IsEnabledのパラメーターを使用してアクションを作成し、次にこの関数を追加しました。

export async function JS_DarkMode(isEnabled) {

// BEGIN USER CODE

if(isEnabled){

document.body.classList.add(“darkmode”);

}else{

document.body.classList.remove(“darkmode”);

}

// END USER CODE

}

最後のステップは、スニペットをレイアウトテンプレートに追加することです。これで、準備は完了です。