From a22dc2e2fa4b91283c68dae901c8fa9dacbf18d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tau=20G=C3=A4rtli?= <git@tau.garden>
Date: Wed, 7 Aug 2024 16:21:01 +0200
Subject: [PATCH] Add separate light and dark styles

---
 crates/eframe/src/epi.rs                   |   2 +-
 crates/egui/src/context.rs                 | 100 +++++++++++++++++----
 crates/egui/src/memory.rs                  |  46 +++++-----
 crates/egui/src/memory/theme.rs            |  40 +++++++++
 crates/egui/src/style.rs                   |  25 ++----
 crates/egui/src/ui.rs                      |   6 +-
 crates/egui/src/widgets/mod.rs             |  12 ++-
 crates/egui_demo_lib/src/demo/scrolling.rs |   7 +-
 examples/custom_font_style/src/main.rs     |   6 +-
 examples/custom_keypad/src/main.rs         |   2 +-
 examples/screenshot/src/main.rs            |   4 +-
 11 files changed, 173 insertions(+), 77 deletions(-)

diff --git a/crates/eframe/src/epi.rs b/crates/eframe/src/epi.rs
index 3b303dce1ee..a8108db3f2c 100644
--- a/crates/eframe/src/epi.rs
+++ b/crates/eframe/src/epi.rs
@@ -53,7 +53,7 @@ pub struct CreationContext<'s> {
     /// The egui Context.
     ///
     /// You can use this to customize the look of egui, e.g to call [`egui::Context::set_fonts`],
-    /// [`egui::Context::set_visuals`] etc.
+    /// [`egui::Context::set_dark_visuals`] etc.
     pub egui_ctx: egui::Context,
 
     /// Information about the surrounding environment.
diff --git a/crates/egui/src/context.rs b/crates/egui/src/context.rs
index d9f107c6d6f..2b3e2930779 100644
--- a/crates/egui/src/context.rs
+++ b/crates/egui/src/context.rs
@@ -1625,7 +1625,7 @@ impl Context {
         self.options(|opt| opt.style().clone())
     }
 
-    /// Mutate the [`Style`] used by all subsequent windows, panels etc.
+    /// Mutate the [`Style`]s used by all subsequent windows, panels etc. in both dark and light mode.
     ///
     /// Example:
     /// ```
@@ -1634,30 +1634,93 @@ impl Context {
     ///     style.spacing.item_spacing = egui::vec2(10.0, 20.0);
     /// });
     /// ```
-    pub fn style_mut(&self, mutate_style: impl FnOnce(&mut Style)) {
-        self.options_mut(|opt| mutate_style(std::sync::Arc::make_mut(&mut opt.style)));
+    pub fn style_mut(&self, mut mutate_style: impl FnMut(&mut Style)) {
+        self.options_mut(|opt| {
+            mutate_style(std::sync::Arc::make_mut(&mut opt.dark_style));
+            mutate_style(std::sync::Arc::make_mut(&mut opt.light_style));
+        });
+    }
+
+    /// The [`Style`] used by all subsequent windows, panels etc in dark mode.
+    pub fn dark_style(&self) -> Arc<Style> {
+        self.options(|opt| opt.dark_style.clone())
+    }
+
+    /// Mutate the [`Style`] used by all subsequent windows, panels etc in dark mode.
+    ///
+    /// Example:
+    /// ```
+    /// # let mut ctx = egui::Context::default();
+    /// ctx.dark_style_mut(|style| {
+    ///     style.spacing.item_spacing = egui::vec2(10.0, 20.0);
+    /// });
+    /// ```
+    pub fn dark_style_mut(&self, mutate_style: impl FnOnce(&mut Style)) {
+        self.options_mut(|opt| mutate_style(std::sync::Arc::make_mut(&mut opt.dark_style)));
+    }
+
+    /// The [`Style`] used by all new windows, panels etc. in dark mode.
+    /// Use [`Self::set_theme`] to choose between dark and light mode.
+    ///
+    /// You can also change this using [`Self::dark_style_mut`]
+    ///
+    /// You can use [`Ui::style_mut`] to change the style of a single [`Ui`].
+    pub fn set_dark_style(&self, style: impl Into<std::sync::Arc<crate::Style>>) {
+        self.options_mut(|opt| opt.dark_style = style.into());
+    }
+
+    /// The [`Visuals`] used by all subsequent windows, panels etc. in dark mode.
+    ///
+    /// You can also use [`Ui::visuals_mut`] to change the visuals of a single [`Ui`].
+    ///
+    /// Example:
+    /// ```
+    /// # let mut ctx = egui::Context::default();
+    /// ctx.set_dark_visuals(egui::Visuals { panel_fill: egui::Color32::RED, ..Default::default() });
+    /// ```
+    pub fn set_dark_visuals(&self, visuals: crate::Visuals) {
+        self.dark_style_mut(|style| style.visuals = visuals);
+    }
+
+    /// The [`Style`] used by all subsequent windows, panels etc in light mode.
+    pub fn light_style(&self) -> Arc<Style> {
+        self.options(|opt| opt.light_style.clone())
+    }
+
+    /// Mutate the [`Style`] used by all subsequent windows, panels etc in light mode.
+    ///
+    /// Example:
+    /// ```
+    /// # let mut ctx = egui::Context::default();
+    /// ctx.light_style_mut(|style| {
+    ///     style.spacing.item_spacing = egui::vec2(10.0, 20.0);
+    /// });
+    /// ```
+    pub fn light_style_mut(&self, mutate_style: impl FnOnce(&mut Style)) {
+        self.options_mut(|opt| mutate_style(std::sync::Arc::make_mut(&mut opt.light_style)));
     }
 
-    /// The [`Style`] used by all new windows, panels etc.
+    /// The [`Style`] used by all new windows, panels etc. in light mode.
+    /// Use [`Self::set_theme`] to choose between dark and light mode.
     ///
-    /// You can also change this using [`Self::style_mut`]
+    /// You can also change this using [`Self::dark_style_mut`]
     ///
     /// You can use [`Ui::style_mut`] to change the style of a single [`Ui`].
-    pub fn set_style(&self, style: impl Into<Arc<Style>>) {
-        self.options_mut(|opt| opt.style = style.into());
+    pub fn set_light_style(&self, style: impl Into<std::sync::Arc<crate::Style>>) {
+        self.options_mut(|opt| opt.light_style = style.into());
     }
 
-    /// The [`Visuals`] used by all subsequent windows, panels etc.
+    /// The [`Visuals`] used by all subsequent windows, panels etc. in light mode.
     ///
     /// You can also use [`Ui::visuals_mut`] to change the visuals of a single [`Ui`].
     ///
     /// Example:
     /// ```
     /// # let mut ctx = egui::Context::default();
-    /// ctx.set_visuals(egui::Visuals::light()); // Switch to light mode
+    /// ctx.set_light_visuals(egui::Visuals { panel_fill: egui::Color32::RED, ..Default::default() });
     /// ```
-    pub fn set_visuals(&self, visuals: crate::Visuals) {
-        self.options_mut(|opt| std::sync::Arc::make_mut(&mut opt.style).visuals = visuals);
+    pub fn set_light_visuals(&self, visuals: crate::Visuals) {
+        self.light_style_mut(|style| style.visuals = visuals);
     }
 
     /// The number of physical pixels for each logical point.
@@ -2863,11 +2926,18 @@ impl Context {
 }
 
 impl Context {
-    /// Edit the active [`Style`].
-    pub fn style_ui(&self, ui: &mut Ui) {
-        let mut style: Style = (*self.style()).clone();
+    /// Edit the [`Style`] used in dark mode.
+    pub fn dark_style_ui(&self, ui: &mut Ui) {
+        let mut style: Style = (*self.dark_style()).clone();
+        style.ui(ui);
+        self.set_dark_style(style);
+    }
+
+    /// Edit the [`Style`] used in light mode.
+    pub fn light_style_ui(&self, ui: &mut Ui) {
+        let mut style: Style = (*self.light_style()).clone();
         style.ui(ui);
-        self.set_style(style);
+        self.set_light_style(style);
     }
 }
 
diff --git a/crates/egui/src/memory.rs b/crates/egui/src/memory.rs
index 6bcf401a2db..c8249b21005 100644
--- a/crates/egui/src/memory.rs
+++ b/crates/egui/src/memory.rs
@@ -168,9 +168,12 @@ impl FocusDirection {
 #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
 #[cfg_attr(feature = "serde", serde(default))]
 pub struct Options {
-    /// The default style for new [`Ui`](crate::Ui):s.
+    /// The default style for new [`Ui`](crate::Ui):s in dark mode.
     #[cfg_attr(feature = "serde", serde(skip))]
-    pub(crate) style: std::sync::Arc<Style>,
+    pub(crate) dark_style: std::sync::Arc<Style>,
+
+    /// The default style for new [`Ui`](crate::Ui):s in light mode.
+    pub(crate) light_style: std::sync::Arc<Style>,
 
     /// Whether to update the visuals according to the system theme or not.
     ///
@@ -279,7 +282,8 @@ impl Default for Options {
         };
 
         Self {
-            style: Default::default(),
+            dark_style: std::sync::Arc::new(Theme::Dark.default_style()),
+            light_style: std::sync::Arc::new(Theme::Light.default_style()),
             theme_preference: ThemePreference::System,
             fallback_theme: Theme::Dark,
             system_theme: None,
@@ -301,22 +305,7 @@ impl Default for Options {
 
 impl Options {
     pub(crate) fn begin_frame(&mut self, new_raw_input: &RawInput) {
-        if self.theme_preference == ThemePreference::System {
-            let theme_from_visuals = Theme::from_dark_mode(self.style.visuals.dark_mode);
-            let current_system_theme = self.system_theme.unwrap_or(theme_from_visuals);
-            let new_system_theme = new_raw_input.system_theme.unwrap_or(self.fallback_theme);
-
-            // Only update the visuals if the system theme has changed.
-            // This allows users to change the visuals without them
-            // getting reset on the next frame.
-            if current_system_theme != new_system_theme || self.system_theme.is_none() {
-                self.system_theme = Some(new_system_theme);
-                if theme_from_visuals != new_system_theme {
-                    let visuals = new_system_theme.default_visuals();
-                    std::sync::Arc::make_mut(&mut self.style).visuals = visuals;
-                }
-            }
-        }
+        self.system_theme = new_raw_input.system_theme;
     }
 
     /// The currently active theme (may depend on the system theme).
@@ -329,7 +318,10 @@ impl Options {
     }
 
     pub(crate) fn style(&self) -> &std::sync::Arc<Style> {
-        &self.style
+        match self.theme() {
+            Theme::Dark => &self.dark_style,
+            Theme::Light => &self.light_style,
+        }
     }
 }
 
@@ -337,8 +329,9 @@ impl Options {
     /// Show the options in the ui.
     pub fn ui(&mut self, ui: &mut crate::Ui) {
         let Self {
-            style, // covered above
-            theme_preference: _,
+            dark_style, // covered above
+            light_style,
+            theme_preference,
             fallback_theme: _,
             system_theme: _,
             zoom_factor: _, // TODO(emilk)
@@ -378,7 +371,14 @@ impl Options {
         CollapsingHeader::new("🎑 Style")
             .default_open(true)
             .show(ui, |ui| {
-                std::sync::Arc::make_mut(style).ui(ui);
+                theme_preference.radio_buttons(ui);
+
+                CollapsingHeader::new("Dark")
+                    .default_open(true)
+                    .show(ui, |ui| std::sync::Arc::make_mut(dark_style).ui(ui));
+                CollapsingHeader::new("Light")
+                    .default_open(true)
+                    .show(ui, |ui| std::sync::Arc::make_mut(light_style).ui(ui));
             });
 
         CollapsingHeader::new("✒ Painting")
diff --git a/crates/egui/src/memory/theme.rs b/crates/egui/src/memory/theme.rs
index 0df8137ce13..8c4c33cb59c 100644
--- a/crates/egui/src/memory/theme.rs
+++ b/crates/egui/src/memory/theme.rs
@@ -1,3 +1,5 @@
+use crate::Button;
+
 /// Dark or Light theme.
 #[derive(Clone, Copy, Debug, PartialEq, Eq, Hash)]
 #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
@@ -36,6 +38,33 @@ impl Theme {
     }
 }
 
+impl Theme {
+    /// Show small toggle-button for light and dark mode.
+    /// This is not the best design as it doesn't allow switching back to "follow system".
+    #[must_use]
+    pub(crate) fn small_toggle_button(self, ui: &mut crate::Ui) -> Option<Self> {
+        #![allow(clippy::collapsible_else_if)]
+        if self == Self::Dark {
+            if ui
+                .add(Button::new("☀").frame(false))
+                .on_hover_text("Switch to light mode")
+                .clicked()
+            {
+                return Some(Self::Light);
+            }
+        } else {
+            if ui
+                .add(Button::new("🌙").frame(false))
+                .on_hover_text("Switch to dark mode")
+                .clicked()
+            {
+                return Some(Self::Dark);
+            }
+        }
+        None
+    }
+}
+
 /// The user's theme preference.
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
 #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
@@ -58,3 +87,14 @@ impl From<Theme> for ThemePreference {
         }
     }
 }
+
+impl ThemePreference {
+    /// Show radio-buttons to switch between light mode, dark mode and following the system theme.
+    pub fn radio_buttons(&mut self, ui: &mut crate::Ui) {
+        ui.horizontal(|ui| {
+            ui.selectable_value(self, Self::Light, "☀ Light");
+            ui.selectable_value(self, Self::Dark, "🌙 Dark");
+            ui.selectable_value(self, Self::System, "System");
+        });
+    }
+}
diff --git a/crates/egui/src/style.rs b/crates/egui/src/style.rs
index 2ed9f03f7c9..1fa80c19e3a 100644
--- a/crates/egui/src/style.rs
+++ b/crates/egui/src/style.rs
@@ -174,7 +174,8 @@ impl From<TextStyle> for FontSelection {
 /// Specifies the look and feel of egui.
 ///
 /// You can change the visuals of a [`Ui`] with [`Ui::style_mut`]
-/// and of everything with [`crate::Context::set_style`].
+/// and of everything with [`crate::Context::set_dark_style`] and [`crate::Context::set_light_style`].
+/// To choose between dark and light style, use [`crate::Context::set_theme`].
 ///
 /// If you want to change fonts, use [`crate::Context::set_fonts`] instead.
 #[derive(Clone, Debug, PartialEq)]
@@ -204,12 +205,10 @@ pub struct Style {
     /// use egui::FontFamily::Proportional;
     /// use egui::FontId;
     /// use egui::TextStyle::*;
-    ///
-    /// // Get current context style
-    /// let mut style = (*ctx.style()).clone();
+    /// use std::collections::BTreeMap;
     ///
     /// // Redefine text_styles
-    /// style.text_styles = [
+    /// let text_styles: BTreeMap<_, _> = [
     ///   (Heading, FontId::new(30.0, Proportional)),
     ///   (Name("Heading2".into()), FontId::new(25.0, Proportional)),
     ///   (Name("Context".into()), FontId::new(23.0, Proportional)),
@@ -219,8 +218,8 @@ pub struct Style {
     ///   (Small, FontId::new(10.0, Proportional)),
     /// ].into();
     ///
-    /// // Mutate global style with above changes
-    /// ctx.set_style(style);
+    /// // Mutate global style with new text styles
+    /// ctx.style_mut(move |style| style.text_styles = text_styles.clone());
     /// ```
     pub text_styles: BTreeMap<TextStyle, FontId>,
 
@@ -853,7 +852,7 @@ impl Default for TextCursorStyle {
 /// Controls the visual style (colors etc) of egui.
 ///
 /// You can change the visuals of a [`Ui`] with [`Ui::visuals_mut`]
-/// and of everything with [`crate::Context::set_visuals`].
+/// and of everything with [`crate::Context::set_dark_visuals`] and [`crate::Context::set_light_visuals`].
 ///
 /// If you want to change fonts, use [`crate::Context::set_fonts`] instead.
 #[derive(Clone, Debug, PartialEq)]
@@ -1514,8 +1513,6 @@ impl Style {
             scroll_animation,
         } = self;
 
-        visuals.light_dark_radio_buttons(ui);
-
         crate::Grid::new("_options").show(ui, |ui| {
             ui.label("Override font id");
             ui.vertical(|ui| {
@@ -1909,14 +1906,6 @@ 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.horizontal(|ui| {
-            ui.selectable_value(self, Self::light(), "☀ Light");
-            ui.selectable_value(self, Self::dark(), "🌙 Dark");
-        });
-    }
-
     /// Show small toggle-button for light and dark mode.
     #[must_use]
     pub fn light_dark_small_toggle_button(&self, ui: &mut crate::Ui) -> Option<Self> {
diff --git a/crates/egui/src/ui.rs b/crates/egui/src/ui.rs
index b50dadbbff6..f36cc3c3653 100644
--- a/crates/egui/src/ui.rs
+++ b/crates/egui/src/ui.rs
@@ -237,7 +237,7 @@ impl Ui {
     /// Mutably borrow internal [`Style`].
     /// Changes apply to this [`Ui`] and its subsequent children.
     ///
-    /// To set the style of all [`Ui`]:s, use [`Context::set_style`].
+    /// To set the style of all [`Ui`]:s, use [`Context::set_dark_style`] and [`Context::set_light_style`].
     ///
     /// Example:
     /// ```
@@ -251,7 +251,7 @@ impl Ui {
 
     /// Changes apply to this [`Ui`] and its subsequent children.
     ///
-    /// To set the visuals of all [`Ui`]:s, use [`Context::set_visuals`].
+    /// To set the visuals of all [`Ui`]:s, use [`Context::set_dark_visuals`] and [`Context::set_light_visuals`].
     pub fn set_style(&mut self, style: impl Into<Arc<Style>>) {
         self.style = style.into();
     }
@@ -291,7 +291,7 @@ impl Ui {
     /// Mutably borrow internal `visuals`.
     /// Changes apply to this [`Ui`] and its subsequent children.
     ///
-    /// To set the visuals of all [`Ui`]:s, use [`Context::set_visuals`].
+    /// To set the visuals of all [`Ui`]:s, use [`Context::set_dark_visuals`] and `Context::set_light_visuals`].
     ///
     /// Example:
     /// ```
diff --git a/crates/egui/src/widgets/mod.rs b/crates/egui/src/widgets/mod.rs
index 9900117062e..8d3594a02a4 100644
--- a/crates/egui/src/widgets/mod.rs
+++ b/crates/egui/src/widgets/mod.rs
@@ -134,16 +134,14 @@ pub fn stroke_ui(ui: &mut crate::Ui, stroke: &mut epaint::Stroke, text: &str) {
 
 /// 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);
+    if let Some(new_theme) = ui.ctx().theme().small_toggle_button(ui) {
+        ui.ctx().set_theme(new_theme);
     }
 }
 
 /// 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);
+    let mut theme_preference = ui.ctx().options(|opt| opt.theme_preference);
+    theme_preference.radio_buttons(ui);
+    ui.ctx().set_theme(theme_preference);
 }
diff --git a/crates/egui_demo_lib/src/demo/scrolling.rs b/crates/egui_demo_lib/src/demo/scrolling.rs
index 7989ca8535e..280bfb9bb26 100644
--- a/crates/egui_demo_lib/src/demo/scrolling.rs
+++ b/crates/egui_demo_lib/src/demo/scrolling.rs
@@ -116,9 +116,9 @@ impl ScrollAppearance {
             visibility,
         } = self;
 
-        let mut style: Style = (*ui.ctx().style()).clone();
+        let mut scroll = ui.ctx().style().spacing.scroll;
 
-        style.spacing.scroll.ui(ui);
+        scroll.ui(ui);
 
         ui.add_space(8.0);
 
@@ -132,8 +132,7 @@ impl ScrollAppearance {
 
         ui.add_space(8.0);
 
-        ui.ctx().set_style(style.clone());
-        ui.set_style(style);
+        ui.ctx().style_mut(|s| s.spacing.scroll = scroll);
 
         ui.separator();
 
diff --git a/examples/custom_font_style/src/main.rs b/examples/custom_font_style/src/main.rs
index fae1e8b079d..0e2de5a6e45 100644
--- a/examples/custom_font_style/src/main.rs
+++ b/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.style_mut(move |style| style.text_styles = text_styles.clone());
 }
 
 fn content(ui: &mut egui::Ui) {
diff --git a/examples/custom_keypad/src/main.rs b/examples/custom_keypad/src/main.rs
index b4397be2f97..cac549ce251 100644
--- a/examples/custom_keypad/src/main.rs
+++ b/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);
 
diff --git a/examples/screenshot/src/main.rs b/examples/screenshot/src/main.rs
index 155530042c4..88b57f20e7a 100644
--- a/examples/screenshot/src/main.rs
+++ b/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() {