🕶️

macOSのDark Modeでpopover上のTextを選択するとテキスト色がおかしくなる

2023/08/06に公開

macOS上でSwiftUIを使ったビューを作成していたところ、ポップアップ内のTextを選択可能にして文字列を選択すると文字色が黒に変わってしまい読みづらくなるという問題に遭遇しました。

この記事では問題の説明と暫定対処を紹介します。

実行環境

  • macOS 13.5
  • Xcode 14.3.1

ソースコード

import SwiftUI

struct PopupView: View {
    var body: some View {
        Text("Hello, World!")
            .textSelection(.enabled)
            .popover(isPresented: .constant(true)) {
                Text("The quick brown fox jumps over the lazy dog")
                    .textSelection(.enabled)
                    .padding()
            }
            .padding()
    }
}

実行するとこのように表示されます (ダークモードのポップアップは半透明なのですが、スクリーンショットだと灰色になってしまうようです)。

ダークモード ライトモード

ウィンドウ上の通常のTextの文字列を選択するときはダークモードでもライトモードでも問題ありません。

ダークモード ライトモード

ところがpopoverモディファイアを使ったポップアップのTextの文字列を選択すると、ポップアップの色が変わり、選択されてない部分の文字列が黒色になってしまいました。

ダークモード ライトモード

ぐぐっても対処方法がわからなかったので試行錯誤してみたところ、popover上のTextのforegroundColorをダークモードのときには白に強制してあげるとひとまず問題が再現しなくなりました。

import SwiftUI

struct PopupView: View {
    @Environment(\.colorScheme) var colorScheme // ← 追加

    var body: some View {
        Text( "Hello, World!" )
            .textSelection(.enabled)
            .popover(isPresented: .constant(true)) {
                Text("The quick brown fox jumps over the lazy dog")
                    .foregroundColor(colorScheme == .dark ? .white : nil) // ← 追加
                    .textSelection(.enabled)
                    .padding()
            }
            .padding()
    }
}
ダークモード ライトモード

もしちゃんとした設定方法があるのであればコメントなりで教えていただければ幸いです。

Discussion