feat: Add support to customize text color inside progress bar component

marc2332 · Oct 15, 2023 · 7f1f98c · 7f1f98c
1 parent d7d6896
commit 7f1f98c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/crates/components/src/progress_bar.rs b/crates/components/src/progress_bar.rs
@@ -46,6 +46,7 @@ pub fn ProgressBar(cx: Scope<ProgressBarProps>) -> Element {
     let theme = use_get_theme(cx);
 
     let ProgressBarTheme {
+        color,
         background,
         progress_background,
     } = theme.progress_bar;
@@ -79,7 +80,7 @@ pub fn ProgressBar(cx: Scope<ProgressBarProps>) -> Element {
                             label {
                                 align: "center",
                                 width: "100%",
-                                color: "white",
+                                color: "{color}",
                                 max_lines: "1",
                                 "{progress.floor()}%"
                             }

diff --git a/crates/hooks/src/use_theme.rs b/crates/hooks/src/use_theme.rs
@@ -118,6 +118,7 @@ pub struct LoaderTheme {
 /// Theming properties for ProgressBar component.
 #[derive(Clone, Debug, PartialEq, Eq)]
 pub struct ProgressBarTheme {
+    pub color: &'static str,
     pub background: &'static str,
     pub progress_background: &'static str,
 }
@@ -207,6 +208,7 @@ pub const LIGHT_THEME: Theme = Theme {
         secondary_color: "rgb(150, 150, 150)",
     },
     progress_bar: ProgressBarTheme {
+        color: "black",
         background: "rgb(210, 210, 210)",
         progress_background: "rgb(103, 80, 164)",
     },
@@ -267,6 +269,7 @@ pub const DARK_THEME: Theme = Theme {
         secondary_color: "rgb(255, 255, 255)",
     },
     progress_bar: ProgressBarTheme {
+        color: "white",
         background: "rgb(60, 60, 60)",
         progress_background: "rgb(255, 95, 0)",
     },