feat: Refreshed theme colors (#856)

Author: marc2332

crates/components/src/progress_bar.rs

@@ -56,7 +56,6 @@ pub fn ProgressBar(
                 corner_radius: "999",
                 width: "100%",
                 height: "100%",
-                shadow: "0 2 10 1 rgb(0, 0, 0, 0.2)",
                 background: "{background}",
                 font_size: "13",
                 direction: "horizontal",

crates/hooks/src/theming/dark.rs

@@ -12,9 +12,9 @@ pub const DARK_THEME: Theme = Theme {
     },
     slider: SliderTheme {
         background: cow_borrowed!("rgb(60, 60, 60)"),
-        thumb_background: cow_borrowed!("rgb(60, 60, 60)"),
-        thumb_inner_background: cow_borrowed!("rgb(255, 95, 0)"),
-        border_fill: cow_borrowed!("rgb(110, 110, 110)"),
+        thumb_background: cow_borrowed!("rgb(103, 80, 164)"),
+        thumb_inner_background: cow_borrowed!("rgb(202, 193, 227)"),
+        border_fill: cow_borrowed!("rgb(103, 80, 164)"),
     },
     button: ButtonTheme {
         background: cow_borrowed!("rgb(35, 35, 35)"),
@@ -50,8 +50,8 @@ pub const DARK_THEME: Theme = Theme {
         margin: LIGHT_THEME.input.margin,
         background: cow_borrowed!("rgb(60, 60, 60)"),
         thumb_background: cow_borrowed!("rgb(200, 200, 200)"),
-        enabled_background: cow_borrowed!("rgb(255, 95, 0)"),
-        enabled_thumb_background: cow_borrowed!("rgb(234, 221, 255)"),
+        enabled_background: cow_borrowed!("rgb(202, 193, 227)"),
+        enabled_thumb_background: cow_borrowed!("rgb(103, 80, 164)"),
         focus_border_fill: cow_borrowed!("rgb(110, 110, 110)"),
         enabled_focus_border_fill: cow_borrowed!("rgb(170, 170, 170)"),
     },
@@ -105,9 +105,9 @@ pub const DARK_THEME: Theme = Theme {
         highlight_color: cow_borrowed!("rgb(43,106,208)"),
     },
     progress_bar: ProgressBarTheme {
-        color: cow_borrowed!("white"),
+        color: cow_borrowed!("black"),
         background: cow_borrowed!("rgb(60, 60, 60)"),
-        progress_background: cow_borrowed!("rgb(255, 95, 0)"),
+        progress_background: cow_borrowed!("rgb(202, 193, 227)"),
         width: LIGHT_THEME.progress_bar.width,
         height: LIGHT_THEME.progress_bar.height,
     },
@@ -162,12 +162,12 @@ pub const DARK_THEME: Theme = Theme {
     },
     radio: RadioTheme {
         unselected_fill: cow_borrowed!("rgb(245, 245, 245)"),
-        selected_fill: cow_borrowed!("rgbrgb(103, 80, 164)"),
+        selected_fill: cow_borrowed!("rgb(202, 193, 227)"),
     },
     checkbox: CheckboxTheme {
         unselected_fill: cow_borrowed!("rgb(245, 245, 245)"),
-        selected_fill: cow_borrowed!("rgb(103, 80, 164)"),
-        selected_icon_fill: cow_borrowed!("white"),
+        selected_fill: cow_borrowed!("rgb(202, 193, 227)"),
+        selected_icon_fill: cow_borrowed!("rgb(103, 80, 164)"),
     },
     menu_item: MenuItemTheme {
         hover_background: cow_borrowed!("rgb(45, 45, 45)"),

crates/hooks/src/theming/light.rs

@@ -12,7 +12,7 @@ pub const LIGHT_THEME: Theme = Theme {
     },
     slider: SliderTheme {
         background: cow_borrowed!("rgb(210, 210, 210)"),
-        thumb_background: cow_borrowed!("rgb(210, 210, 210)"),
+        thumb_background: cow_borrowed!("rgb(202, 193, 227)"),
         thumb_inner_background: cow_borrowed!("rgb(103, 80, 164)"),
         border_fill: cow_borrowed!("rgb(210, 210, 210)"),
     },
@@ -167,7 +167,7 @@ pub const LIGHT_THEME: Theme = Theme {
     checkbox: CheckboxTheme {
         unselected_fill: cow_borrowed!("rgb(80, 80, 80)"),
         selected_fill: cow_borrowed!("rgb(103, 80, 164)"),
-        selected_icon_fill: cow_borrowed!("white"),
+        selected_icon_fill: cow_borrowed!("rgb(202, 193, 227)"),
     },
     menu_item: MenuItemTheme {
         hover_background: cow_borrowed!("rgb(235, 235, 235)"),

examples/switch_theme.rs

@@ -9,29 +9,35 @@ fn main() {
     launch(app);
 }
 
-#[allow(non_snake_case)]
-fn TheOtherSwitch() -> Element {
+#[component]
+fn ThemeChanger() -> Element {
     let mut theme = use_theme();
 
-    let is_enabled = theme.read().name == "dark";
-
-    rsx!(Switch {
-        enabled: is_enabled,
-        ontoggled: move |_| {
-            if is_enabled {
-                *theme.write() = LIGHT_THEME
-            } else {
-                *theme.write() = DARK_THEME
-            }
+    rsx!(
+        Tile {
+            onselect: move |_| theme.set(DARK_THEME),
+            leading: rsx!(
+                Radio {
+                    selected: theme.read().name == "dark",
+                },
+            ),
+            label { "Dark" }
         }
-    })
+        Tile {
+            onselect: move |_| theme.set(LIGHT_THEME),
+            leading: rsx!(
+                Radio {
+                    selected: theme.read().name == "light",
+                },
+            ),
+            label { "Light" }
+        }
+    )
 }
 
 fn app() -> Element {
     use_init_default_theme();
-    let mut enabled = use_signal(|| true);
-
-    let is_enabled = if *enabled.read() { "Yes" } else { "No" };
+    let mut value = use_signal::<f64>(|| 50.);
 
     rsx!(
         Body {
@@ -41,16 +47,57 @@ fn app() -> Element {
                 main_align: "center",
                 cross_align: "center",
                 spacing: "20",
+                padding: "40",
                 Switch {
-                    enabled: *enabled.read(),
+                    enabled: value() >= 50.,
                     ontoggled: move |_| {
-                        enabled.toggle();
+                        if value() >= 50. {
+                            value.set(25.0);
+                        } else {
+                            value.set(75.0);
+                        }
                     }
                 }
-                label {
-                    "Is enabled? {is_enabled}"
+                Slider {
+                    width: "fill",
+                    value: value(),
+                    onmoved: move |e| value.set(e),
+                }
+                ProgressBar {
+                    show_progress: true,
+                    progress: value() as f32
+                }
+                Tile {
+                    onselect: move |_| {
+                        if value() >= 50. {
+                            value.set(25.0);
+                        } else {
+                            value.set(75.0);
+                        }
+                    },
+                    leading: rsx!(
+                        Checkbox {
+                            selected: value() >= 50.,
+                        },
+                    ),
+                    label { "First choice" }
+                }
+                Tile {
+                    onselect: move |_| {
+                        if value() < 50. {
+                            value.set(75.0);
+                        } else {
+                            value.set(25.0);
+                        }
+                    },
+                    leading: rsx!(
+                        Checkbox {
+                            selected: value() < 50.,
+                        },
+                    ),
+                    label { "Second choice" }
                 }
-                TheOtherSwitch { }
+                ThemeChanger { }
             }
         }
     )