Power Apps アプリヘッダーの色を環境毎に変えてみた（プレビュー機能）

投稿日:2025/11/14
投稿者:関

お客様より、『UAT環境と本番環境の区別がつくように何かできますか？』とのご相談をいただきました。
（なお、UAT環境にはヘッダーに「サンドボックス」と表示されています）

過去には、別のお客様でUAT環境と本番環境を取り違えて、誤って本番データを上書きしてしまった事例もありました。
このままでは重大な事故につながる恐れがあると考え、対応策について調査を進めました。

たしかテーマを変えれば・・・

Defaultから青に変更してみたら、この管理画面は変更されましたが、アプリは変わりませんでした。
調査すると下記の用に更新されていました。

モデル駆動型アプリでモダン テーマを使用する（Microsoft Learn）

※このモダンに刷新された外観には新しいテーマ システムが付属しているため、クラシック テーマ は適用されません。

アプリの設定で下記を「いいえ」に変更すればテーマの変更で対応可能ですが、その場合は新しいフォームの見た目や操作性の改善が無効になってしまいます。
（それでは対応できません……）

アプリ テーマを変更する（プレビュー機能：2025/11/14時点）

新しいやり方を確認すると「カスタム テーマ XML」を作り、ソリューション内で環境変数に設定すればいいみたいです。
今回は、開発環境に緑の背景色、UAT環境に青の背景色を準備しました。
（プレビュー機能なので本番環境は未設定です）

1 XML

1)開発環境用（ソリューションでWebリソースとして、roit_HeaderColorと定義）
<AppHeaderColors
background=”#12783F”
foreground=”#FFFFFF”
backgroundHover=”#165A31″
foregroundHover=”#FFFFFF”
backgroundPressed=”#0F1C12″
foregroundPressed=”#FFFFFF”
backgroundSelected=”#153D23″
foregroundSelected=”#FFFFFF”
/>
※アプリ ヘッダーの背景色を緑色、テキストを白色、その他

2)UAT環境用（ソリューションでWebリソースとして、roit_AppHeaderColorと定義）
<AppHeaderColors
background=”#004A99″
foreground=”#FFFFFF”
backgroundHover=”#005FCC”
foregroundHover=”#FFFFFF”
backgroundPressed=”#003366″
foregroundPressed=”#FFFFFF”
backgroundSelected=”#3366CC”
foregroundSelected=”#FFFFFF”
/>
※アプリ ヘッダーの背景色を青色、テキストを白色、その他

2 環境変数（ソリューションの設定より、「アプリ ヘッダーの色を上書きする」を使用）

① 環境内、全てのアプリで設定したい場合にXML名を設定
② このソリューション内のアプリだけに適用したい場合にXML名を設定（アプリの公開が必要）

3 結果

1. 全環境のアプリ（開発環境用のXML使用）
   
2. ソリューション内のアプリ（UAT環境用のXML使用）
   

4 ソリューション

まとめ

この機能はプレビュー機能であり（仕様の変更や機能停止の可能性があります）、本番環境での使用は推奨されません。
ただし、UAT環境のみに適用することで、本番環境との見た目の違いが明確になり、お客様の操作ミス防止につながると考えています。
また、保守を担当する筆者としても、安心して作業を進められるようになりました。