commit c8b1c1cddae5c295ee1df05949ada1c32d22ce60
parent 2b20f7397481aa0838c6b7586f3cc00a873b065a
Author: kernelkind <kernelkind@gmail.com>
Date: Fri, 12 Apr 2024 13:02:22 -0400
Add custom visual themes
Signed-off-by: kernelkind <kernelkind@gmail.com>
Signed-off-by: William Casarin <jb55@jb55.com>
Diffstat:
| A | src/app_style.rs | | | 95 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| M | src/colors.rs | | | 91 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- |
| M | src/lib.rs | | | 1 | + |
3 files changed, 185 insertions(+), 2 deletions(-)
diff --git a/src/app_style.rs b/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
+ }
+}
diff --git a/src/colors.rs b/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,
+ }
+}
diff --git a/src/lib.rs b/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]
