この記事は更新から24ヶ月以上経過しているため、最新の情報を別途確認することを推奨いたします。

目が痛い！！

パーソルプロセス&テクノロジーシステムソリューション事業部 DXソリューション統括部モダンアプリケーション部クラウドコンサルティンググループの西村和也と申します。(ここまで一息で言えた試しがありません…笑)

この記事をご覧になっている方は目の健康はいかがでしょうか。日ごろPCと格闘している日々を繰り返している私ですが、その結果めちゃめちゃ目が悪くなってしまいました。

Excel方眼紙のまっしろな画面を見つめていますと、大量の光子が網膜を直撃し作業の効率が下がってしまっていることを実感します。

できる限りダークモードを使って作業を行うことにしていますが、それでも不意に登場する真っ白な画面に目をヤラれてしまっています。

ユーザーに使ってもらうアプリケーションを作成するのは、我々開発者の使命です。

折角頑張って作ったのに画面がまぶしすぎてほとんど使われなくなってしまうのは、組織にとっても個人にとっても大きな痛手でしょう。

だからこそ、作成するアプリケーションすべてにダークモードを実装したい！！

そんな思いでこの記事を書こうと思います。

PowerAppでダークモードへの切り替えをするキャンバスアプリを作成する

新たにキャンバスアプリを作成し、「ダークモード検証」と名付けます。

また、次のような2画面を用意します。

これで準備は完了です。

上記のアプリが、ライトモードダークモード自由に切り替え可能になるように実装をしていきたいと思います。

「切り替え」で遊んでみる

PowerAppsの画面上に、「切り替えボタン」と「テキストラベル」を挿入します。

ボタンを切り替えたときの返り値で何が返されるかテキストラベルで確認するためです。

上記のような感じになりました。

続けて、ボタンを切り替えたときテキストボックスの値が切り替わるように関数を書いていきましょう。

テキストラベルのTextプロパティに、デフォルトで

"テキスト"

と文字列だけ入っています。それを以下のように変更してください。

Toggle1.Value

テキストラベルに、切り替えスイッチ(Toggle1)の値を入れています。

この状態で切り替えスイッチを動かしてみると、値が次のように変化していることが分かります。

スイッチがオンの時は

Toggle1.Text = true

オフの時は

Toggle1.Text = false

のようです。

切り替えスイッチを押したらダークモードに切り替わるようにしよう

Toggle1.Text = true

の場合はライトモード

Toggle1.Text = false

の場合はダークモードになるように画面の切り替えを行いましょう。

どうやら、Toggle1のDefaultプロパティはfalseのようです。

これを複数画面に渡って適用されるように変更しましょう。

まず、変数を設定します。

PowerAppsでは、すべての画面に渡って適用可能なグローバル変数をSet関数を用いて設定できます。

AppのOnStartプロパティにグローバル変数を設定したいと思います。OnStartは、キャンバスアプリが起動した瞬間に制御を行う際に使用します。

OnStartに以下のような関数を書きます。

Set(

DISPLAYMODE,

true

)

切り替えボタンのデフォルト値が、OnStartに設定したDISPLAYMODEと一致するようにします。

Toggle1のDefaultプロパティに、変数DISPLAYMODEを設定します。

OnStart時の制御をPowerAppsに反映させましょう。Appの右側三点リーダーを押し、[OnStartを実行します]をクリックしてください。

見た目ではわかりにくいですが、これで切り替えボタンにOnStart時の制御が反映されました。

続いて、ボタンを切り替えたと同時に画面の色が変わるよう制御を書き加えます。

左側ツリービューのScreen1をクリックし、Fillプロパティを確認すると値としてWhiteが入っています。

これを、切り替えボタンがオンの時は白オフの時はダークモードに切り替えようと思います。

Screen1のFillプロパティに、以下のような関数を書き加えてください。

If(

DISPLAYMODE=true,

White,

RGBA(21, 32, 43, 1)

)

ちなみに余談ですが、ダークモード時の色RGBA(21, 32, 43, 1)はTwitterのダークモードと同じ背景色です。

Twitterにあふれるコンテンツは楽しくて、無限に時間を消費できますよね。

さて、最後に切り替えボタンを押したら DISPLAYMODEの値が切り替わるように制御を加えましょう。

Toggle1のOnSelectプロパティに制御を加えます。OnSelectプロパティは「押したと同時に制御を加える」というものです。今回でしたら、DISPLAYMODEがtrueの時に切り替えスイッチを押したらfalseに変化し、DISPLAYMODEがfalseの時に切り替えスイッチを押したらtrueに変化するような制御を加えます。