Add custom style example

Cargo.lock

@@ -1052,6 +1052,17 @@ dependencies = [
  "env_logger",
 ]
 
+[[package]]
+name = "custom_style"
+version = "0.1.0"
+dependencies = [
+ "eframe",
+ "egui_demo_lib",
+ "egui_extras",
+ "env_logger",
+ "image",
+]
+
 [[package]]
 name = "custom_window_frame"
 version = "0.1.0"

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_dark_light_mode_buttons, style::Selection, Color32, Stroke, Style,
+};
+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.light_style_mut(use_light_green_accent);
+    ctx.dark_style_mut(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_dark_light_mode_buttons(ui);
+            ui.separator();
+            self.widget_gallery.ui(ui);
+        });
+    }
+}