Make Light & Dark Visuals Customizable When Following The System Theme (#4744)

* Closes <https://github.com/emilk/egui/issues/4490>
* [x] I have followed the instructions in the PR template

---

Unfortunately, this PR contains a bunch of breaking changes because
`Context` no longer has one style, but two. I could try to add some of
the methods back if that's desired.

The most subtle change is probably that `style_mut` mutates both the
dark and the light style (which from the usage in egui itself felt like
the right choice but might be surprising to users).

I decided to deviate a bit from the data structure suggested in the
linked issue.
Instead of this:
```rust
pub theme: Theme, // Dark or Light
pub follow_system_theme: bool, // Change [`Self::theme`] based on `RawInput::system_theme`?
```

I decided to add a `ThemePreference` enum and track the current system
theme separately.
This has a couple of benefits:
* The user's theme choice is not magically overwritten on the next
frame.
* A widget for changing the theme preference only needs to know the
`ThemePreference` and not two values.
* Persisting the `theme_preference` is fine (as opposed to persisting
the `theme` field which may actually be the system theme).

The `small_toggle_button` currently only toggles between dark and light
(so you can never get back to following the system). I think it's easy
to improve on this in a follow-up PR :)
I made the function `pub(crate)` for now because it should eventually be
a method on `ThemePreference`, not `Theme`.

To showcase the new capabilities I added a new example that uses
different "accent" colors in dark and light mode:

<img
src="https://github.com/user-attachments/assets/0bf728c6-2720-47b0-a908-18bd250d15a6"
width="250" alt="A screenshot of egui's widget gallery demo in dark mode
using a purple accent color instead of the default blue accent">

<img
src="https://github.com/user-attachments/assets/e816b380-3e59-4f11-b841-8c20285988d6"
width="250" alt="A screenshot of egui's widget gallery demo in light
mode using a green accent color instead of the default blue accent">

---------

Co-authored-by: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>

examples/custom_font_style/src/main.rs

@@ -3,6 +3,7 @@
 
 use eframe::egui;
 use egui::{FontFamily, FontId, RichText, TextStyle};
+use std::collections::BTreeMap;
 
 fn main() -> eframe::Result {
     env_logger::init(); // Log to stderr (if you run with `RUST_LOG=debug`).
@@ -28,8 +29,7 @@ fn heading3() -> TextStyle {
 fn configure_text_styles(ctx: &egui::Context) {
     use FontFamily::{Monospace, Proportional};
 
-    let mut style = (*ctx.style()).clone();
-    style.text_styles = [
+    let text_styles: BTreeMap<TextStyle, FontId> = [
         (TextStyle::Heading, FontId::new(25.0, Proportional)),
         (heading2(), FontId::new(22.0, Proportional)),
         (heading3(), FontId::new(19.0, Proportional)),
@@ -39,7 +39,7 @@ fn configure_text_styles(ctx: &egui::Context) {
         (TextStyle::Small, FontId::new(8.0, Proportional)),
     ]
     .into();
-    ctx.set_style(style);
+    ctx.all_styles_mut(move |style| style.text_styles = text_styles.clone());
 }
 
 fn content(ui: &mut egui::Ui) {

examples/custom_keypad/src/main.rs

@@ -16,7 +16,7 @@ fn main() -> eframe::Result {
         options,
         Box::new(|cc| {
             // Use the dark theme
-            cc.egui_ctx.set_visuals(egui::Visuals::dark());
+            cc.egui_ctx.set_theme(egui::Theme::Dark);
             // This gives us image support:
             egui_extras::install_image_loaders(&cc.egui_ctx);
 

examples/custom_style/Cargo.toml

@@ -0,0 +1,23 @@
+[package]
+name = "custom_style"
+version = "0.1.0"
+license = "MIT OR Apache-2.0"
+edition = "2021"
+rust-version = "1.76"
+publish = false
+
+[lints]
+workspace = true
+
+[dependencies]
+eframe = { workspace = true, features = [
+    "default",
+    "__screenshot", # __screenshot is so we can dump a screenshot using EFRAME_SCREENSHOT_TO
+] }
+env_logger = { version = "0.10", default-features = false, features = [
+    "auto-color",
+    "humantime",
+] }
+egui_demo_lib.workspace = true
+egui_extras = { workspace = true, features = ["image"] }
+image = { workspace = true, features = ["png"] }

examples/custom_style/README.md

@@ -0,0 +1,7 @@
+Example of how to customize the style.
+
+```sh
+cargo run -p custom_style
+```
+
+![](screenshot.png)

examples/custom_style/src/main.rs

@@ -0,0 +1,69 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
+#![allow(rustdoc::missing_crate_level_docs)] // it's an example
+
+use eframe::egui::{
+    self, global_theme_preference_buttons, style::Selection, Color32, Stroke, Style, Theme,
+};
+use egui_demo_lib::{View, WidgetGallery};
+
+fn main() -> eframe::Result {
+    env_logger::init(); // Log to stderr (if you run with `RUST_LOG=debug`).
+    let options = eframe::NativeOptions {
+        viewport: egui::ViewportBuilder::default().with_inner_size([350.0, 590.0]),
+        ..Default::default()
+    };
+    eframe::run_native(
+        "egui example: custom style",
+        options,
+        Box::new(|cc| Ok(Box::new(MyApp::new(cc)))),
+    )
+}
+
+fn setup_custom_style(ctx: &egui::Context) {
+    ctx.style_mut_of(Theme::Light, use_light_green_accent);
+    ctx.style_mut_of(Theme::Dark, use_dark_purple_accent);
+}
+
+fn use_light_green_accent(style: &mut Style) {
+    style.visuals.hyperlink_color = Color32::from_rgb(18, 180, 85);
+    style.visuals.text_cursor.stroke.color = Color32::from_rgb(28, 92, 48);
+    style.visuals.selection = Selection {
+        bg_fill: Color32::from_rgb(157, 218, 169),
+        stroke: Stroke::new(1.0, Color32::from_rgb(28, 92, 48)),
+    };
+}
+
+fn use_dark_purple_accent(style: &mut Style) {
+    style.visuals.hyperlink_color = Color32::from_rgb(202, 135, 227);
+    style.visuals.text_cursor.stroke.color = Color32::from_rgb(234, 208, 244);
+    style.visuals.selection = Selection {
+        bg_fill: Color32::from_rgb(105, 67, 119),
+        stroke: Stroke::new(1.0, Color32::from_rgb(234, 208, 244)),
+    };
+}
+
+struct MyApp {
+    widget_gallery: WidgetGallery,
+}
+
+impl MyApp {
+    fn new(cc: &eframe::CreationContext<'_>) -> Self {
+        setup_custom_style(&cc.egui_ctx);
+        egui_extras::install_image_loaders(&cc.egui_ctx); // Needed for the "Widget Gallery" demo
+        Self {
+            widget_gallery: WidgetGallery::default(),
+        }
+    }
+}
+
+impl eframe::App for MyApp {
+    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
+        egui::CentralPanel::default().show(ctx, |ui| {
+            ui.heading("egui using a customized style");
+            ui.label("Switch between dark and light mode to see the different styles in action.");
+            global_theme_preference_buttons(ui);
+            ui.separator();
+            self.widget_gallery.ui(ui);
+        });
+    }
+}

examples/custom_window_frame/src/main.rs

@@ -36,7 +36,7 @@ impl eframe::App for MyApp {
             ui.label("This is just the contents of the window.");
             ui.horizontal(|ui| {
                 ui.label("egui theme:");
-                egui::widgets::global_dark_light_mode_buttons(ui);
+                egui::widgets::global_theme_preference_buttons(ui);
             });
         });
     }

examples/screenshot/src/main.rs

@@ -54,9 +54,9 @@ impl eframe::App for MyApp {
                             .add(egui::Label::new("hover me!").sense(egui::Sense::hover()))
                             .hovered()
                         {
-                            ctx.set_visuals(egui::Visuals::dark());
+                            ctx.set_theme(egui::Theme::Dark);
                         } else {
-                            ctx.set_visuals(egui::Visuals::light());
+                            ctx.set_theme(egui::Theme::Light);
                         };
                         ctx.send_viewport_cmd(egui::ViewportCommand::Screenshot);
                     } else if ui.button("take screenshot!").clicked() {