From 0a2e035b7510f05946d11cf4a287db2e13fdca98 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Fri, 27 Oct 2023 20:11:02 +0800 Subject: [PATCH] feat: theme --- src/alert/theme.rs | 12 ++++++------ src/avatar/avatar.css | 10 +++++----- src/avatar/mod.rs | 16 +++++++++++++--- src/avatar/theme.rs | 20 ++++++++++++++++++++ src/message/message.css | 2 +- src/message/message.rs | 12 +++++++++++- src/message/mod.rs | 2 ++ src/message/theme.rs | 20 ++++++++++++++++++++ src/theme/mod.rs | 11 ++++++++++- 9 files changed, 88 insertions(+), 17 deletions(-) create mode 100644 src/avatar/theme.rs create mode 100644 src/message/theme.rs diff --git a/src/alert/theme.rs b/src/alert/theme.rs index 828e79b..3121e15 100644 --- a/src/alert/theme.rs +++ b/src/alert/theme.rs @@ -24,12 +24,12 @@ impl ThemeMethod for AlertTheme { fn dark() -> Self { Self { - success_background_color: "#edf7f2".into(), - success_border_color: "#c5e7d5".into(), - warning_background_color: "#fef7ed".into(), - warning_border_color: "#fae0b5".into(), - error_background_color: "#fbeef1".into(), - error_border_color: "#f3cbd3".into(), + success_background_color: "#2a947d40".into(), + success_border_color: "#2a947d59".into(), + warning_background_color: "#f08a0040".into(), + warning_border_color: "#f08a0059".into(), + error_background_color: "#d03a5240".into(), + error_border_color: "#d03a5259".into(), } } } diff --git a/src/avatar/avatar.css b/src/avatar/avatar.css index df0b9cd..ca5c5ee 100644 --- a/src/avatar/avatar.css +++ b/src/avatar/avatar.css @@ -1,13 +1,13 @@ .melt-avatar { display: inline-block; - width: var(--size); - height: var(--size); - background-color: #f7f7f7; - border-radius: var(--border-radius); + width: var(--melt-size); + height: var(--melt-size); + background-color: var(--melt-background-color); + border-radius: var(--melt-border-radius); } .melt-avatar img { width: 100%; height: 100%; - border-radius: var(--border-radius); + border-radius: var(--melt-border-radius); } diff --git a/src/avatar/mod.rs b/src/avatar/mod.rs index d42db03..f83260d 100644 --- a/src/avatar/mod.rs +++ b/src/avatar/mod.rs @@ -1,5 +1,8 @@ -use crate::mount_style; +mod theme; + +use crate::{mount_style, use_theme, Theme}; use leptos::*; +pub use theme::AvatarTheme; #[component] pub fn Avatar( @@ -7,13 +10,20 @@ pub fn Avatar( #[prop(optional, into)] circle: MaybeSignal, #[prop(default = MaybeSignal::Static(30), into)] size: MaybeSignal, ) -> impl IntoView { + let theme = use_theme(Theme::light); let css_vars = create_memo(move |_| { let mut css_vars = String::new(); - css_vars.push_str(&format!("--size: {}px;", size.get())); + css_vars.push_str(&format!("--melt-size: {}px;", size.get())); css_vars.push_str(&format!( - "--border-radius: {};", + "--melt-border-radius: {};", if circle.get() { "50%" } else { "3px" } )); + theme.with(|theme| { + css_vars.push_str(&format!( + "--melt-background-color: {}", + theme.avatar.background_color + )); + }); css_vars }); mount_style("avatar", include_str!("./avatar.css")); diff --git a/src/avatar/theme.rs b/src/avatar/theme.rs new file mode 100644 index 0000000..a335f79 --- /dev/null +++ b/src/avatar/theme.rs @@ -0,0 +1,20 @@ +use crate::theme::ThemeMethod; + +#[derive(Clone)] +pub struct AvatarTheme { + pub background_color: String, +} + +impl ThemeMethod for AvatarTheme { + fn light() -> Self { + Self { + background_color: "#f7f7f7".into(), + } + } + + fn dark() -> Self { + Self { + background_color: "#424245".into(), + } + } +} diff --git a/src/message/message.css b/src/message/message.css index 92047e1..c209bac 100644 --- a/src/message/message.css +++ b/src/message/message.css @@ -24,7 +24,7 @@ padding: 10px 20px; max-width: 75vh; - background: #fff; + background: var(--melt-background-color); font-size: 14px; border-radius: 3px; diff --git a/src/message/message.rs b/src/message/message.rs index 1abd940..5e4defa 100644 --- a/src/message/message.rs +++ b/src/message/message.rs @@ -30,10 +30,20 @@ impl MessageVariant { #[component] pub(crate) fn Message(variant: MessageVariant, content: String) -> impl IntoView { let theme = use_theme(Theme::light); + let css_vars = create_memo(move |_| { + let mut css_vars = String::new(); + theme.with(|theme| { + css_vars.push_str(&format!( + "--melt-background-color: {}", + theme.message.background_color + )) + }); + css_vars + }); let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme))); view! {
-
+
diff --git a/src/message/mod.rs b/src/message/mod.rs index b01d37c..861e9c9 100644 --- a/src/message/mod.rs +++ b/src/message/mod.rs @@ -1,6 +1,8 @@ mod message; mod message_environment; mod message_provider; +mod theme; pub use message::*; pub use message_provider::*; +pub use theme::MessageTheme; diff --git a/src/message/theme.rs b/src/message/theme.rs new file mode 100644 index 0000000..53a27ff --- /dev/null +++ b/src/message/theme.rs @@ -0,0 +1,20 @@ +use crate::theme::ThemeMethod; + +#[derive(Clone)] +pub struct MessageTheme { + pub background_color: String, +} + +impl ThemeMethod for MessageTheme { + fn light() -> Self { + Self { + background_color: "#fff".into(), + } + } + + fn dark() -> Self { + Self { + background_color: "#48484e".into(), + } + } +} diff --git a/src/theme/mod.rs b/src/theme/mod.rs index 0e22b4a..b2ebbd9 100644 --- a/src/theme/mod.rs +++ b/src/theme/mod.rs @@ -1,7 +1,10 @@ mod common; use self::common::CommonTheme; -use crate::{AlertTheme, ButtonTheme, InputTheme, MenuTheme, SkeletionTheme, TableTheme, TagTheme}; +use crate::{ + AlertTheme, AvatarTheme, ButtonTheme, InputTheme, MenuTheme, MessageTheme, SkeletionTheme, + TableTheme, TagTheme, +}; use leptos::*; pub trait ThemeMethod { @@ -20,6 +23,8 @@ pub struct Theme { pub alert: AlertTheme, pub skeletion: SkeletionTheme, pub tag: TagTheme, + pub avatar: AvatarTheme, + pub message: MessageTheme, } impl Theme { @@ -34,6 +39,8 @@ impl Theme { alert: AlertTheme::light(), skeletion: SkeletionTheme::light(), tag: TagTheme::light(), + avatar: AvatarTheme::light(), + message: MessageTheme::light(), } } pub fn dark() -> Self { @@ -47,6 +54,8 @@ impl Theme { alert: AlertTheme::dark(), skeletion: SkeletionTheme::dark(), tag: TagTheme::dark(), + avatar: AvatarTheme::dark(), + message: MessageTheme::dark(), } } }