From 5b57d9a63db4eceeb0bc6d395a222f03c91815ff Mon Sep 17 00:00:00 2001 From: luoxiao Date: Sun, 29 Oct 2023 23:29:24 +0800 Subject: [PATCH] feat: theme --- src/select/mod.rs | 44 +++++++++++++++++++++++++++++++++++++------ src/select/select.css | 15 ++++++++------- src/select/theme.rs | 32 +++++++++++++++++++++++++++++++ src/theme/mod.rs | 7 +++++-- 4 files changed, 83 insertions(+), 15 deletions(-) create mode 100644 src/select/theme.rs diff --git a/src/select/mod.rs b/src/select/mod.rs index 9638c68..fcd282a 100644 --- a/src/select/mod.rs +++ b/src/select/mod.rs @@ -1,3 +1,5 @@ +mod theme; + use crate::{ teleport::Teleport, theme::use_theme, @@ -6,6 +8,7 @@ use crate::{ }; use leptos::*; use std::hash::Hash; +pub use theme::SelectTheme; use wasm_bindgen::__rt::IntoJsResult; #[derive(Clone, PartialEq, Eq, Hash)] @@ -27,14 +30,43 @@ where 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!("--font-color: {bg_color};")); - css_vars.push_str(&format!("--border-color-hover: {bg_color};")); + theme.with(|theme| { + let border_color_hover = theme.common.color_primary.clone(); + css_vars.push_str(&format!("--melt-border-color-hover: {border_color_hover};")); + css_vars.push_str(&format!( + "--melt-background-color: {};", + theme.select.background_color + )); + css_vars.push_str(&format!("--melt-font-color: {};", theme.select.font_color)); + css_vars.push_str(&format!( + "--melt-border-color: {};", + theme.select.border_color + )); + }); css_vars }); + let popover_css_vars = create_memo(move |_| { + let mut css_vars = String::new(); + theme.with(|theme| { + css_vars.push_str(&format!( + "--melt-background-color: {};", + theme.select.popover_background_color + )); + css_vars.push_str(&format!( + "--melt-background-color-hover: {};", + theme.select.popover_background_color_hover + )); + css_vars.push_str(&format!("--melt-font-color: {};", theme.select.font_color)); + css_vars.push_str(&format!( + "--melt-font-color-selected: {};", + theme.common.color_primary + )); + }); + css_vars + }); + let is_show_popover = create_rw_signal(false); let trigger_ref = create_node_ref::(); let popover_ref = create_node_ref::(); @@ -94,9 +126,9 @@ where class="melt-select-menu" style=move || { if is_show_popover.get() { - css_vars.get() + popover_css_vars.get() } else { - format!("display: none; {}", css_vars.get()) + "display: none;".into() } } diff --git a/src/select/select.css b/src/select/select.css index b2def12..cc01c02 100644 --- a/src/select/select.css +++ b/src/select/select.css @@ -3,9 +3,9 @@ padding: 0 10px; height: 30px; line-height: 30px; - background-color: #fafbfc; - color: #24292e; - border: 1px solid #e0e0e6; + background-color: var(--melt-background-color); + color: var(--melt-font-color); + border: 1px solid var(--melt-border-color); border-radius: 3px; transition: all 0.3s; cursor: pointer; @@ -13,11 +13,12 @@ } .melt-select:hover { - border-color: var(--border-color-hover); + border-color: var(--melt-border-color-hover); } .melt-select-menu { - background-color: #fff; + color: var(--melt-font-color); + background-color: var(--melt-background-color); box-sizing: border-box; padding: 5px; position: absolute; @@ -38,9 +39,9 @@ } .melt-select-menu__item:hover { - background-color: #f6f6f7; + background-color: var(--melt-background-color-hover); } .melt-select-menu__item-selected { - color: var(--font-color); + color: var(--melt-font-color-selected); } diff --git a/src/select/theme.rs b/src/select/theme.rs new file mode 100644 index 0000000..3737c54 --- /dev/null +++ b/src/select/theme.rs @@ -0,0 +1,32 @@ +use crate::theme::ThemeMethod; + +#[derive(Clone)] +pub struct SelectTheme { + pub font_color: String, + pub border_color: String, + pub background_color: String, + pub popover_background_color: String, + pub popover_background_color_hover: String, +} + +impl ThemeMethod for SelectTheme { + fn light() -> Self { + Self { + font_color: "#333639".into(), + border_color: "#e0e0e6".into(), + background_color: "#fff".into(), + popover_background_color: "#fff".into(), + popover_background_color_hover: "#f3f5f6".into(), + } + } + + fn dark() -> Self { + Self { + font_color: "#ffffffd1".into(), + border_color: "#0000".into(), + background_color: "#ffffff1a".into(), + popover_background_color: "#48484e".into(), + popover_background_color_hover: "#ffffff17".into(), + } + } +} diff --git a/src/theme/mod.rs b/src/theme/mod.rs index b2ebbd9..96a2620 100644 --- a/src/theme/mod.rs +++ b/src/theme/mod.rs @@ -2,8 +2,8 @@ mod common; use self::common::CommonTheme; use crate::{ - AlertTheme, AvatarTheme, ButtonTheme, InputTheme, MenuTheme, MessageTheme, SkeletionTheme, - TableTheme, TagTheme, + AlertTheme, AvatarTheme, ButtonTheme, InputTheme, MenuTheme, MessageTheme, SelectTheme, + SkeletionTheme, TableTheme, TagTheme, }; use leptos::*; @@ -25,6 +25,7 @@ pub struct Theme { pub tag: TagTheme, pub avatar: AvatarTheme, pub message: MessageTheme, + pub select: SelectTheme, } impl Theme { @@ -41,6 +42,7 @@ impl Theme { tag: TagTheme::light(), avatar: AvatarTheme::light(), message: MessageTheme::light(), + select: SelectTheme::light(), } } pub fn dark() -> Self { @@ -56,6 +58,7 @@ impl Theme { tag: TagTheme::dark(), avatar: AvatarTheme::dark(), message: MessageTheme::dark(), + select: SelectTheme::dark(), } } }