【FlutterFlow】Run Modeにすると白と黒が変わってしまう場合の解決法

FlutterFlowのRun Modeで開発中のアプリの動作確認をした時に、開発画面で白文字、白背景を指定しているのに黒文字、黒背景で表示されてしまう場合の解決法です。

（下の画像では上部余白が異なっていますがこれは正常の挙動と思われます）

PCはM1 Macbook Air、ブラウザはGoogle Chromeを使っています。

外観モードを「ライト」にする

結論、PCの外観モードを「ライト」に変更することが解決法です。

僕は普段は目への負担が少なく感じる「ダーク」を使っているのですが、それを影響で単純に白文字・白背景が反転していたようです。（Run Modeはその設定の影響を受けてしまうよう）

Macの場合ですが、外観モードは以下の手順で確認することができます。

システム環境設定 > 一般 ＞ 外観モード

「ライト」に変更すると、開発画面と同じ色で表示されます。

余談

ちなみに、Previewモード（下画像の赤枠）だとPCの外観モードの設定に関係なく、開発画面の色がそのまま反映されるので、色味を確認する場合はPreviewモードで確認するのが良いかと思います。