light/darkモードが問題になる

egui自体はOSのカラーモードに自動で対応したり、はたまた簡単に自身のカラーモードを切り替えるためのウィジットがあったりして一見してなにも問題が無いように感じるのですが、現在どのモードで表示しているのか知るすべが無い（無いはずは無いと思うんだけど結構かじりついて見ていても取得方法が分かりません。

で、このままではダークモードでは見づらいとかその逆とかが起きてしまいます。

起動時にカラーモードを選択して動作するようには出来るのですが、途中でOSのカラーモードが切り替わるとeguiもそれに追従してしまいます。親切なんだかいやがらせなんだか。

このようにライトモードでは画像が見えなくなってしまった

簡単に使えるのが良くてeguiを使いたいわけなので丁寧にユーザビリティがどうの、というよりはとりあえず使えるものを素早くビルドしたい、そっちに全振りしたい。そういうスタンスでこの問題に向き合ってみましょう。（つまり、カラーモードが取得できるようになったとしても面倒だから対応したくないというスタンスです）

今回の対象バージョン

egui : 0.25.0
egui_extras : 0.25.0
eframe : 0.25.0

問題は背景の色が変わってしまうところにある。

ならば背景色が固定出来ればいい、そうでしょう。
ウィンドウの背景やパネルの背景は直接は指示出来ない様ですがフレームを使って色が指定できる様です。

コード

以下のようなコードをどこかに用意します。

fn new_frame(bgcolor: Color32) -> egui::containers::Frame {
    egui::containers::Frame {
        inner_margin: egui::style::Margin { left: 0.0, right: 0.0, top: 0.0, bottom: 0.0 },
        outer_margin: egui::style::Margin { left: 0.0, right: 0.0, top: 0.0, bottom: 0.0 },
        rounding: egui::Rounding { nw: 0.0, ne: 0.0, sw: 0.0, se: 0.0 },
        shadow: eframe::epaint::Shadow { extrusion: 0.0, color: Color32::DARK_GRAY },
        fill: bgcolor,
        stroke: egui::Stroke::new(0.0, Color32::BLACK),
    }
}

次に、update内の、CentralPanelを作成するところで.frame(...)を追加。

egui::CentralPanel::default()
    .frame(new_frame(Color32::DARK_GRAY))
    .show(&ctx, |ui| { .....

これで今回の問題は解決です。

実行するとダークグレーの背景で動作して、OSの方でカラーモードを変更しても表示については影響を受けなくなりました。

文字の色などはまだカラーモードの影響を受けていますがとりあえず画像が見えなくなるような事態は防げそうです。

文字要素にRichTextを使う

カラーモードの影響から抜け出しつつ、もっと自由に色とか大きさとか変えたくなるのでどっちにしてもこれを使います。

ui.label("Hello, world!);

これを

ui.label(
    egui::RichText::new("Hello, world!")
        .color(Color32::WHITE)
        .size(24.0)
);

こうします。

すると…

いろいろと自由を手にいれることができました。

※ フレームのマージンを整えるともっと見栄えするようになります

〆

今回はダーク/ライトモードの影響を受けて実際の運用で問題が起きない簡単な方法としてこのようにやってみました。

手軽なのがeguiのいいところだと思います…本当はもっといい解決方法があるかもしれませんがそれはのちのち…