Skip to content

Commit

Permalink
feat: Refreshed theme colors (#856)
Browse files Browse the repository at this point in the history
  • Loading branch information
@marc2332
marc2332 authored Sep 8, 2024
1 parent fe39475 commit a296427
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 34 deletions.
1 change: 0 additions & 1 deletion crates/components/src/progress_bar.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
20 changes: 10 additions & 10 deletions crates/hooks/src/theming/dark.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)"),
Expand Down Expand Up @@ -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)"),
},
Expand Down Expand Up @@ -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,
},
Expand Down Expand Up @@ -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)"),
Expand Down
4 changes: 2 additions & 2 deletions crates/hooks/src/theming/light.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)"),
},
Expand Down Expand Up @@ -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)"),
Expand Down
89 changes: 68 additions & 21 deletions examples/switch_theme.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 { }
}
}
)
Expand Down

0 comments on commit a296427

Please sign in to comment.