Add egui::widgets::global_dark_light_mode_buttons

CHANGELOG.md

@@ -12,6 +12,7 @@ NOTE: [`eframe`](eframe/CHANGELOG.md), [`egui_web`](egui_web/CHANGELOG.md), [`eg
 * `TextEdit::layouter`: Add custom text layout for e.g. syntax highlighting or WYSIWYG.
 * `Fonts::layout_job*`: New text layout engine allowing mixing fonts, colors and styles, with underlining and strikethrough.
 * Add feature `"serialize"` separatedly from `"persistence"`.
+* Add `egui::widgets::global_dark_light_mode_buttons` to easily add buttons for switching the egui theme.
 
 ### Changed 🔧
 * Label text will now be centered, right-aligned and/or justified based on the layout.

egui/src/style.rs

@@ -801,11 +801,9 @@ impl WidgetVisuals {
 impl Visuals {
     /// Show radio-buttons to switch between light and dark mode.
     pub fn light_dark_radio_buttons(&mut self, ui: &mut crate::Ui) {
-        ui.group(|ui| {
-            ui.horizontal(|ui| {
-                ui.radio_value(self, Self::light(), "☀ Light");
-                ui.radio_value(self, Self::dark(), "🌙 Dark");
-            });
+        ui.horizontal(|ui| {
+            ui.selectable_value(self, Self::light(), "☀ Light");
+            ui.selectable_value(self, Self::dark(), "🌙 Dark");
         });
     }
 

egui/src/widgets/mod.rs

@@ -121,3 +121,19 @@ pub(crate) fn shadow_ui(ui: &mut Ui, shadow: &mut epaint::Shadow, text: &str) {
         ui.color_edit_button_srgba(color);
     });
 }
+
+/// Show a small button to switch to/from dark/light mode (globally).
+pub fn global_dark_light_mode_switch(ui: &mut Ui) {
+    let style: crate::Style = (*ui.ctx().style()).clone();
+    let new_visuals = style.visuals.light_dark_small_toggle_button(ui);
+    if let Some(visuals) = new_visuals {
+        ui.ctx().set_visuals(visuals);
+    }
+}
+
+/// Show larger buttons for switching between light and dark mode (globally).
+pub fn global_dark_light_mode_buttons(ui: &mut Ui) {
+    let mut visuals = ui.ctx().style().visuals.clone();
+    visuals.light_dark_radio_buttons(ui);
+    ui.ctx().set_visuals(visuals);
+}

egui_demo_lib/src/wrap_app.rs

@@ -113,7 +113,7 @@ impl WrapApp {
         // A menu-bar is a horizontal layout with some special styles applied.
         // egui::menu::bar(ui, |ui| {
         ui.horizontal_wrapped(|ui| {
-            dark_light_mode_switch(ui);
+            egui::widgets::global_dark_light_mode_switch(ui);
 
             ui.checkbox(&mut self.backend_panel.open, "💻 Backend");
             ui.separator();
@@ -222,12 +222,3 @@ fn clock_button(ui: &mut egui::Ui, seconds_since_midnight: f64) -> egui::Respons
 
     ui.add(egui::Button::new(time).text_style(egui::TextStyle::Monospace))
 }
-
-/// Show a button to switch to/from dark/light mode (globally).
-fn dark_light_mode_switch(ui: &mut egui::Ui) {
-    let style: egui::Style = (*ui.ctx().style()).clone();
-    let new_visuals = style.visuals.light_dark_small_toggle_button(ui);
-    if let Some(visuals) = new_visuals {
-        ui.ctx().set_visuals(visuals);
-    }
-}