ダークモードにする理由は？

ダークモードが嫌いな人はいないでしょう。お気に入りのウェブサイトやデスクトップアプリケーションからモバイルデバイスまで、ダークモードは今やどこにでもあります。顧客体験に関して言えば、ダークモードはユーザーに喜ばれる洗練された体験を提供するための素晴らしい武器です。そこで、「ダークモードを自分のWebサイトに導入するにはどうすればいいか」という疑問が湧いてきます。 Mendix 応用？"

その方法をお教えします。とても簡単です!

まず最初に、ダークモード対応が必要なアプリケーションを見つけます。前回の Mendix 皆さんはLato Bikesをご存知かもしれません。私たちは、 Mendix 養子縁組の旅 ヨハン・デン・ハーン氏の基調講演.

特に製品ページは非常に明るいので、ダーク モード処理が適しています。その方法を見てみましょう。

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

まず、プロジェクトに DarkMode という新しいモジュールを追加し、モジュールに単一のユーザー ロールを追加します (すべてのユーザーがダーク モードを使用できるようにします)。この新しいモジュールで、_darkmode.scss という SASS ファイルを作成します。— 必ずメイン ファイルにインポートとして追加してください。

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

html 本文{

背景色: $gray-darker;
色:#fff;
h1、h2、h3、h4、h5、.widget-eventTime、.widget-timeline-title、h6、.h1、.h2、.h3、.h4、.h5、.h6{

色:#fff;

}
//ここでスタイルの追加を続けます… 

}

全体的な見た目と雰囲気に満足するまで、背景色、境界線、フォント色を少しずつ上書きしていきます。こんな感じです...

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

「html body」に「.darkmode」スタイルを追加します。これにより、bodyにクラス「darkmode」が追加されるたびに、新しいルック アンド フィールが適用されます。

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

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

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

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

Microflow データ ソースは DS_DarkMode であり、現在のセッションにリンクされた DarkMode エンティティを返すか、まだ存在しない場合は、現在のセッションにリンクされた新しいエンティティを返します。次のようになります...

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

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

非同期関数 JS_DarkMode(isEnabled) をエクスポートします。

// ユーザーコードの開始 

if(有効){

document.body.classList.add(“ダークモード”);

場合} else {

document.body.classList.remove(“ダークモード”);

}

// エンドユーザーコード 

}

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

公開されると、ヘッダーにスイッチ コントロールが表示され、フリックするとダーク モード スタイルを適用したり削除したりできます。さらに一歩進んで、顧客のデスクトップ テーマの設定を検出し、それを使用してダーク モードを適用するかどうかを選択することもできます。

if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches){
document.body.classList.add(“ダークモード”);
}

この記事がダーク モードの実装に役立つことを願っています。役に立った場合は、ぜひご連絡いただき、スクリーンショットやリンクをお送りください。どのように機能しているかをぜひお聞かせください。