夜、自分のアプリを開いたら文字が読めなくなっていました。プライバシーポリシーまで整えて公開目前だったのに、iPhoneの設定を「ダーク」にした瞬間、白い背景に白い文字が重なって画面が真っ白に見えたのです。今回は、そのときに直した箇所と原因の記録です。
1. 白背景に白文字という初歩的な事故
原因はすぐに分かりました。背景色もテキストの色も、両方とも自分で指定した固定の白（Color.whiteやRGB値）だったのです。
Text("こんにちは")
.foregroundColor(.white) // ライトモードでは見えないミス
Rectangle()
.fill(Color.white)ライトモードで開発していたときは、背景が薄いグレーで文字が黒だったので何の問題もありませんでした。しかしダークモードに切り替わると、システムが背景を自動で黒っぽく変えたのに、自分で固定していた文字色は白のまま動かず、結果的に「白背景に白文字」と同じ状態が発生していたのです。
2. .primaryと.secondaryに置き換えて解決した
色を固定値で指定するのをやめ、SwiftUIが用意しているセマンティックカラー（システムが自動で明暗を切り替えてくれる色）に置き換えました。
Text("こんにちは")
.foregroundColor(.primary) // ライト/ダーク両対応
Rectangle()
.fill(Color(.systemBackground)).primary（本文用の色）や.secondary（補足文用の色）、Color(.systemBackground)（背景色）に変更しただけで、それまで手動で切り替えを考えていた部分が全部自動対応になりました。「色を自分で決めない」という発想の転換が必要だったと気づきました。
3. アイコン画像だけダークモードで浮いて見えた
文字色を直して一安心していたら、今度はアプリ内で使っているカスタムアイコン画像だけが、ダークモードの黒背景の中で白い四角い枠が浮いて見える不具合に気づきました。
原因は、PNG画像の背景が透過ではなく白で書き出されていたことでした。ライトモードでは背景と同化して気づかなかったのですが、ダークモードにした瞬間に白い四角形として浮き上がってしまったのです。画像編集ソフトで背景を透過に書き出し直すことで解決しました。「ライトモードで違和感がない」ことと「透過されている」ことはイコールではないと学びました。
4. Xcodeプレビューでの確認を後回しにしていた
そもそも、これらの不具合に公開直前まで気づかなかったのは、開発中ずっとライトモードの実機だけで確認していたからでした。Xcodeのプレビューには、実は環境設定を切り替えて両方のモードを同時に表示する機能があると後から知りました。
#Preview {
ContentView()
.preferredColorScheme(.dark)
}こうしてプレビュー側でダークモードを指定しておけば、コードを書きながらその場で崩れに気づけます。「最後にまとめて確認する」のではなく、「書きながら常に両方見える状態にしておく」方が、結果的に手戻りが少なかったです。
まとめ
- 色をハードコーディングすると、ダークモード切り替え時に文字が見えなくなることがある
.primaryやColor(.systemBackground)などのセマンティックカラーに置き換えると、明暗の自動対応が効く- 画像は「ライトモードで違和感がない」だけでは不十分。背景が透過されているか確認する
- Xcodeプレビューで
.preferredColorScheme(.dark)を使えば、開発中から両モードをその場で確認できる
ダークモードは「設定でオンオフするだけの見た目のオプション」だと軽く見ていましたが、色の指定方法そのものを見直すきっかけになりました。
次は、SwiftLintを導入してコードの書き方が変わった話をまとめます。
本記事は生成AI（Claude）を活用して執筆・編集しています。内容は実体験に基づき、執筆者本人が確認・監修しています。
コメント