diff --git a/crates/components/src/progress_bar.rs b/crates/components/src/progress_bar.rs index 0fac1e84e..f05cca583 100644 --- a/crates/components/src/progress_bar.rs +++ b/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", diff --git a/crates/hooks/src/theming/dark.rs b/crates/hooks/src/theming/dark.rs index afb09f28a..04353536f 100644 --- a/crates/hooks/src/theming/dark.rs +++ b/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)"), diff --git a/crates/hooks/src/theming/light.rs b/crates/hooks/src/theming/light.rs index 8420a52cc..2a284bd1c 100644 --- a/crates/hooks/src/theming/light.rs +++ b/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)"), diff --git a/examples/switch_theme.rs b/examples/switch_theme.rs index 271980931..fd288b317 100644 --- a/examples/switch_theme.rs +++ b/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::(|| 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 { } } } )