Add custom visual themes

Signed-off-by: kernelkind <kernelkind@gmail.com>
Signed-off-by: William Casarin <jb55@jb55.com>

src/app_style.rs

@@ -0,0 +1,95 @@
+use crate::colors::{dark_color_theme, light_color_theme, ColorTheme, DarkTheme, LightTheme};
+use egui::{
+    epaint::Shadow,
+    style::{WidgetVisuals, Widgets},
+    Button, Context, Rounding, Stroke, Style, Ui, Visuals,
+};
+
+const WIDGET_ROUNDING: Rounding = Rounding::same(8.0);
+
+pub fn light_mode() -> Visuals {
+    create_themed_visuals(light_color_theme(), Visuals::light())
+}
+
+pub fn dark_mode() -> Visuals {
+    create_themed_visuals(dark_color_theme(), Visuals::dark())
+}
+
+pub fn user_requested_visuals_change(cur_darkmode: bool, ui: &mut Ui) -> Option<Visuals> {
+    if cur_darkmode {
+        if ui
+            .add(Button::new("☀").frame(false))
+            .on_hover_text("Switch to light mode")
+            .clicked()
+        {
+            return Some(light_mode());
+        }
+    } else if ui
+        .add(Button::new("🌙").frame(false))
+        .on_hover_text("Switch to dark mode")
+        .clicked()
+    {
+        return Some(dark_mode());
+    }
+    None
+}
+
+pub fn create_themed_visuals(theme: ColorTheme, default: Visuals) -> Visuals {
+    Visuals {
+        hyperlink_color: theme.hyperlink_color,
+        override_text_color: Some(theme.text_color),
+        panel_fill: theme.panel_fill,
+        widgets: Widgets {
+            noninteractive: WidgetVisuals {
+                bg_fill: theme.noninteractive_bg_fill,
+                weak_bg_fill: theme.noninteractive_weak_bg_fill,
+                bg_stroke: Stroke {
+                    width: 1.0,
+                    color: theme.noninteractive_bg_stroke_color,
+                },
+                fg_stroke: Stroke {
+                    width: 1.0,
+                    color: theme.noninteractive_fg_stroke_color,
+                },
+                rounding: WIDGET_ROUNDING,
+                ..default.widgets.noninteractive
+            },
+            inactive: WidgetVisuals {
+                bg_fill: theme.inactive_bg_fill,
+                weak_bg_fill: theme.inactive_weak_bg_fill,
+                bg_stroke: Stroke {
+                    width: 1.0,
+                    color: theme.inactive_bg_stroke_color,
+                },
+                rounding: WIDGET_ROUNDING,
+                ..default.widgets.inactive
+            },
+            hovered: WidgetVisuals {
+                rounding: WIDGET_ROUNDING,
+                ..default.widgets.hovered
+            },
+            active: WidgetVisuals {
+                rounding: WIDGET_ROUNDING,
+                ..default.widgets.active
+            },
+            open: WidgetVisuals {
+                ..default.widgets.open
+            },
+        },
+        extreme_bg_color: theme.extreme_bg_color,
+        error_fg_color: theme.err_fg_color,
+        window_rounding: Rounding::same(32.0),
+        window_fill: theme.window_fill,
+        window_shadow: Shadow {
+            offset: [0.0, 8.0].into(),
+            blur: 24.0,
+            spread: 0.0,
+            color: egui::Color32::from_rgba_unmultiplied(0x6D, 0x6D, 0x6D, 0x14),
+        },
+        window_stroke: Stroke {
+            width: 1.0,
+            color: theme.window_stroke_color,
+        },
+        ..default
+    }
+}

src/colors.rs

@@ -5,10 +5,97 @@ pub const PURPLE: Color32 = Color32::from_rgb(0xCC, 0x43, 0xC5);
 pub const GRAY_SECONDARY: Color32 = Color32::from_rgb(0x8A, 0x8A, 0x8A);
 pub const WHITE: Color32 = Color32::from_rgb(0xFF, 0xFF, 0xFF);
 pub const ALMOST_WHITE: Color32 = Color32::from_rgb(0xFA, 0xFA, 0xFA);
+const BLACK: Color32 = Color32::from_rgb(0x00, 0x00, 0x00);
 pub const RED_700: Color32 = Color32::from_rgb(0xC7, 0x37, 0x5A);
 
 // BACKGROUNDS
 pub const SEMI_DARKER_BG: Color32 = Color32::from_rgb(0x39, 0x39, 0x39);
 pub const DARKER_BG: Color32 = Color32::from_rgb(0x1E, 0x1E, 0x1E);
-pub const DARK_BG_1: Color32 = Color32::from_rgb(0x2C, 0x2C, 0x2C);
-pub const DARK_ISH_BG: Color32 = egui::Color32::from_rgb(0x22, 0x22, 0x22);
+const DARK_BG: Color32 = Color32::from_rgb(0x2C, 0x2C, 0x2C);
+pub const DARK_BG_1: Color32 = DARKER_BG;
+pub const DARK_ISH_BG: Color32 = Color32::from_rgb(0x22, 0x22, 0x22);
+const SEMI_DARK_BG: Color32 = Color32::from_rgb(0x44, 0x44, 0x44);
+
+const LIGHT_GRAY: Color32 = Color32::from_rgb(0xc8, 0xc8, 0xc8); // 78%
+const MID_GRAY: Color32 = Color32::from_rgb(0xba, 0xba, 0xba); // 72%
+const DARKER_GRAY: Color32 = Color32::from_rgb(0xa5, 0xa5, 0xa5); // 65%
+const EVEN_DARKER_GRAY: Color32 = Color32::from_rgb(0x89, 0x89, 0x89); // 54%
+
+pub struct ColorTheme {
+    // VISUALS
+    pub panel_fill: Color32,
+    pub extreme_bg_color: Color32,
+    pub text_color: Color32,
+    pub err_fg_color: Color32,
+    pub hyperlink_color: Color32,
+
+    // WINDOW
+    pub window_fill: Color32,
+    pub window_stroke_color: Color32,
+
+    // NONINTERACTIVE WIDGET
+    pub noninteractive_bg_fill: Color32,
+    pub noninteractive_weak_bg_fill: Color32,
+    pub noninteractive_bg_stroke_color: Color32,
+    pub noninteractive_fg_stroke_color: Color32,
+
+    // INACTIVE WIDGET
+    pub inactive_bg_stroke_color: Color32,
+    pub inactive_bg_fill: Color32,
+    pub inactive_weak_bg_fill: Color32,
+}
+
+pub struct DarkTheme;
+pub struct LightTheme;
+
+pub fn dark_color_theme() -> ColorTheme {
+    ColorTheme {
+        // VISUALS
+        panel_fill: DARKER_BG,
+        extreme_bg_color: SEMI_DARKER_BG,
+        text_color: WHITE,
+        err_fg_color: RED_700,
+        hyperlink_color: PURPLE,
+
+        // WINDOW
+        window_fill: DARK_ISH_BG,
+        window_stroke_color: DARK_BG,
+
+        // NONINTERACTIVE WIDGET
+        noninteractive_bg_fill: DARK_ISH_BG,
+        noninteractive_weak_bg_fill: SEMI_DARKER_BG,
+        noninteractive_bg_stroke_color: DARK_BG,
+        noninteractive_fg_stroke_color: GRAY_SECONDARY,
+
+        // INACTIVE WIDGET
+        inactive_bg_stroke_color: SEMI_DARKER_BG,
+        inactive_bg_fill: Color32::from_rgb(0x25, 0x25, 0x25),
+        inactive_weak_bg_fill: SEMI_DARK_BG,
+    }
+}
+
+pub fn light_color_theme() -> ColorTheme {
+    ColorTheme {
+        // VISUALS
+        panel_fill: LIGHT_GRAY,
+        extreme_bg_color: EVEN_DARKER_GRAY,
+        text_color: BLACK,
+        err_fg_color: RED_700,
+        hyperlink_color: PURPLE,
+
+        // WINDOW
+        window_fill: MID_GRAY,
+        window_stroke_color: DARKER_GRAY,
+
+        // NONINTERACTIVE WIDGET
+        noninteractive_bg_fill: MID_GRAY,
+        noninteractive_weak_bg_fill: EVEN_DARKER_GRAY,
+        noninteractive_bg_stroke_color: DARKER_GRAY,
+        noninteractive_fg_stroke_color: GRAY_SECONDARY,
+
+        // INACTIVE WIDGET
+        inactive_bg_stroke_color: EVEN_DARKER_GRAY,
+        inactive_bg_fill: LIGHT_GRAY,
+        inactive_weak_bg_fill: EVEN_DARKER_GRAY,
+    }
+}

src/lib.rs

@@ -21,6 +21,7 @@ mod key_parsing;
 pub mod login_manager;
 pub mod account_login_view;
 pub mod app_creation;
+mod app_style;
 
 #[cfg(test)]
 #[macro_use]