From 8db136f0d526e922ca4afa57a999a9380c3b504d Mon Sep 17 00:00:00 2001 From: luoxiao Date: Tue, 31 Oct 2023 11:27:35 +0800 Subject: [PATCH] feat: theme --- src/slider/mod.rs | 20 ++++++++++++++------ src/slider/slider.css | 4 ++-- src/slider/theme.rs | 20 ++++++++++++++++++++ src/switch/mod.rs | 11 +++++++++-- src/switch/switch.css | 4 ++-- src/switch/theme.rs | 20 ++++++++++++++++++++ src/table/mod.rs | 14 ++++---------- src/table/theme.rs | 6 +++--- src/theme/mod.rs | 11 ++++++++++- src/upload/mod.rs | 2 ++ src/upload/theme.rs | 23 +++++++++++++++++++++++ src/upload/upload-dragger.css | 7 +++---- src/upload/upload_dragger.rs | 10 +++++++++- 13 files changed, 121 insertions(+), 31 deletions(-) create mode 100644 src/slider/theme.rs create mode 100644 src/switch/theme.rs create mode 100644 src/upload/theme.rs diff --git a/src/slider/mod.rs b/src/slider/mod.rs index 89aa0d3..03384d2 100644 --- a/src/slider/mod.rs +++ b/src/slider/mod.rs @@ -1,22 +1,32 @@ +mod theme; + use crate::{ theme::use_theme, utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style}, Theme, }; use leptos::*; -use wasm_bindgen::JsCast; +pub use theme::SliderTheme; #[component] pub fn Slider( #[prop(optional, into)] value: MaybeRwSignal, #[prop(default = MaybeSignal::Static(100f64), into)] max: MaybeSignal, ) -> impl IntoView { + mount_style("slider", include_str!("./slider.css")); let theme = use_theme(Theme::light); let css_vars = create_memo(move |_| { let mut css_vars = String::new(); - let theme = theme.get(); - let bg_color = theme.common.color_primary; - css_vars.push_str(&format!("--background-color-fill: {bg_color};")); + theme.with(|theme| { + css_vars.push_str(&format!( + "--melt-background-color: {};", + &theme.slider.background_color + )); + css_vars.push_str(&format!( + "--melt-background-color-fill: {};", + &theme.common.color_primary + )); + }); css_vars }); @@ -30,7 +40,6 @@ pub fn Slider( value.get() / max.get() * 100.0 } }); - mount_style("slider", include_str!("./slider.css")); let do_update_value = move |val| { value.set(val); @@ -51,7 +60,6 @@ pub fn Slider( let on_mouse_move = window_event_listener(ev::mousemove, move |ev| { if is_mouse_move.get_untracked() { if let Some(rail) = rail_ref.get_untracked() { - let ev = ev.unchecked_into::(); let rect = rail.get_bounding_client_rect(); let ev_x = f64::from(ev.x()); if ev_x <= rect.x() { diff --git a/src/slider/slider.css b/src/slider/slider.css index 4f72346..e119cbb 100644 --- a/src/slider/slider.css +++ b/src/slider/slider.css @@ -5,13 +5,13 @@ } .melt-slider-rail { height: 4px; - background-color: #e6e6e6; + background-color: var(--melt-background-color); border-radius: 2px; } .melt-slider-rail__fill { width: 0%; height: 4px; - background-color: var(--background-color-fill); + background-color: var(--melt-background-color-fill); border-radius: 2px; } .melt-slider-handle { diff --git a/src/slider/theme.rs b/src/slider/theme.rs new file mode 100644 index 0000000..296387d --- /dev/null +++ b/src/slider/theme.rs @@ -0,0 +1,20 @@ +use crate::theme::ThemeMethod; + +#[derive(Clone)] +pub struct SliderTheme { + pub background_color: String, +} + +impl ThemeMethod for SliderTheme { + fn light() -> Self { + Self { + background_color: "#dbdbdf".into(), + } + } + + fn dark() -> Self { + Self { + background_color: "#ffffff33".into(), + } + } +} diff --git a/src/switch/mod.rs b/src/switch/mod.rs index df23e70..1e026cc 100644 --- a/src/switch/mod.rs +++ b/src/switch/mod.rs @@ -1,5 +1,8 @@ +mod theme; + use crate::{mount_style, theme::use_theme, utils::maybe_rw_signal::MaybeRwSignal, Theme}; use leptos::*; +pub use theme::SwitchTheme; #[component] pub fn Switch(#[prop(optional, into)] value: MaybeRwSignal) -> impl IntoView { @@ -9,8 +12,12 @@ pub fn Switch(#[prop(optional, into)] value: MaybeRwSignal) -> impl IntoVi let mut css_vars = String::new(); theme.with(|theme| { css_vars.push_str(&format!( - "--background-color: {};", - theme.common.color_primary.clone() + "--melt-background-color: {};", + theme.switch.background_color + )); + css_vars.push_str(&format!( + "--melt-background-color-active: {};", + theme.common.color_primary )); }); css_vars diff --git a/src/switch/switch.css b/src/switch/switch.css index dce9fed..4a2e3d1 100644 --- a/src/switch/switch.css +++ b/src/switch/switch.css @@ -4,7 +4,7 @@ width: 35px; height: 19px; padding: 2px 5px 3px; - background-color: #f6f6f6; + background-color: var(--melt-background-color); border-radius: 25px; cursor: pointer; box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.05); @@ -24,7 +24,7 @@ } .melt-switch--active { - background-color: var(--background-color); + background-color: var(--melt-background-color-active); } .melt-switch--active .melt-switch__button { diff --git a/src/switch/theme.rs b/src/switch/theme.rs new file mode 100644 index 0000000..b5ddf85 --- /dev/null +++ b/src/switch/theme.rs @@ -0,0 +1,20 @@ +use crate::theme::ThemeMethod; + +#[derive(Clone)] +pub struct SwitchTheme { + pub background_color: String, +} + +impl ThemeMethod for SwitchTheme { + fn light() -> Self { + Self { + background_color: "#00000024".into(), + } + } + + fn dark() -> Self { + Self { + background_color: "#ffffff33".into(), + } + } +} diff --git a/src/table/mod.rs b/src/table/mod.rs index dacd140..177e5d4 100644 --- a/src/table/mod.rs +++ b/src/table/mod.rs @@ -18,20 +18,14 @@ pub fn Table( theme.with(|theme| { css_vars.push_str(&format!( "--background-color: {};", - theme.table.background_color.clone() + theme.table.background_color )); css_vars.push_str(&format!( "--background-color-striped: {};", - theme.table.background_color_striped.clone() - )); - css_vars.push_str(&format!( - "--border-color: {};", - theme.table.border_color.clone() - )); - css_vars.push_str(&format!( - "--border-radius: {};", - theme.common.border_radius.clone() + theme.table.background_color_striped )); + css_vars.push_str(&format!("--border-color: {};", theme.table.border_color)); + css_vars.push_str(&format!("--border-radius: {};", theme.common.border_radius)); }); css_vars diff --git a/src/table/theme.rs b/src/table/theme.rs index 6413f24..c1f46c6 100644 --- a/src/table/theme.rs +++ b/src/table/theme.rs @@ -18,9 +18,9 @@ impl ThemeMethod for TableTheme { fn dark() -> Self { Self { - background_color: "#fff".into(), - background_color_striped: "#fafafc".into(), - border_color: "#efeff5".into(), + background_color: "#18181c".into(), + background_color_striped: "#26262a".into(), + border_color: "#2d2d30".into(), } } } diff --git a/src/theme/mod.rs b/src/theme/mod.rs index 96a2620..5d62974 100644 --- a/src/theme/mod.rs +++ b/src/theme/mod.rs @@ -3,7 +3,7 @@ mod common; use self::common::CommonTheme; use crate::{ AlertTheme, AvatarTheme, ButtonTheme, InputTheme, MenuTheme, MessageTheme, SelectTheme, - SkeletionTheme, TableTheme, TagTheme, + SkeletionTheme, SliderTheme, SwitchTheme, TableTheme, TagTheme, UploadTheme, }; use leptos::*; @@ -26,6 +26,9 @@ pub struct Theme { pub avatar: AvatarTheme, pub message: MessageTheme, pub select: SelectTheme, + pub slider: SliderTheme, + pub switch: SwitchTheme, + pub upload: UploadTheme, } impl Theme { @@ -43,6 +46,9 @@ impl Theme { avatar: AvatarTheme::light(), message: MessageTheme::light(), select: SelectTheme::light(), + slider: SliderTheme::light(), + switch: SwitchTheme::light(), + upload: UploadTheme::light(), } } pub fn dark() -> Self { @@ -59,6 +65,9 @@ impl Theme { avatar: AvatarTheme::dark(), message: MessageTheme::dark(), select: SelectTheme::dark(), + slider: SliderTheme::dark(), + switch: SwitchTheme::dark(), + upload: UploadTheme::dark(), } } } diff --git a/src/upload/mod.rs b/src/upload/mod.rs index d038bbf..5059ff8 100644 --- a/src/upload/mod.rs +++ b/src/upload/mod.rs @@ -1,7 +1,9 @@ +mod theme; mod upload_dragger; use crate::mount_style; use leptos::*; +pub use theme::UploadTheme; pub use upload_dragger::UploadDragger; pub use web_sys::FileList; diff --git a/src/upload/theme.rs b/src/upload/theme.rs new file mode 100644 index 0000000..17443eb --- /dev/null +++ b/src/upload/theme.rs @@ -0,0 +1,23 @@ +use crate::theme::ThemeMethod; + +#[derive(Clone)] +pub struct UploadTheme { + pub dragger_background_color: String, + pub dragger_border_color: String, +} + +impl ThemeMethod for UploadTheme { + fn light() -> Self { + Self { + dragger_background_color: "#fafafc".into(), + dragger_border_color: "#e0e0e6".into(), + } + } + + fn dark() -> Self { + Self { + dragger_background_color: "#ffffff0f".into(), + dragger_border_color: "#ffffff3d".into(), + } + } +} diff --git a/src/upload/upload-dragger.css b/src/upload/upload-dragger.css index 4b960a7..1c622e4 100644 --- a/src/upload/upload-dragger.css +++ b/src/upload/upload-dragger.css @@ -1,8 +1,7 @@ .melt-upload-dragger { padding: 20px; - background-color: #fafbfc; - color: #24292e; - border: 1px solid #e0e0e6; + background-color: var(--melt-background-color); + border: 1px dashed var(--melt-border-color); border-radius: 3px; text-align: center; cursor: pointer; @@ -10,5 +9,5 @@ } .melt-upload-dragger:hover, .melt-upload--drag-over .melt-upload-dragger { - border: 1px dashed var(--border-color-hover); + border: 1px dashed var(--melt-border-color-hover); } diff --git a/src/upload/upload_dragger.rs b/src/upload/upload_dragger.rs index 9fccbeb..2663bb9 100644 --- a/src/upload/upload_dragger.rs +++ b/src/upload/upload_dragger.rs @@ -8,8 +8,16 @@ pub fn UploadDragger(children: Children) -> impl IntoView { let css_vars = create_memo(move |_| { let mut css_vars = String::new(); theme.with(|theme| { + css_vars.push_str(&format!( + "--melt-background-color: {};", + theme.upload.dragger_background_color + )); + css_vars.push_str(&format!( + "--melt-border-color: {};", + theme.upload.dragger_border_color + )); let border_color_hover = theme.common.color_primary.clone(); - css_vars.push_str(&format!("--border-color-hover: {border_color_hover};")); + css_vars.push_str(&format!("--melt-border-color-hover: {border_color_hover};")); }); css_vars });