feat: theme

src/alert/theme.rs

@@ -24,12 +24,12 @@ impl ThemeMethod for AlertTheme {
 
     fn dark() -> Self {
         Self {
-            success_background_color: "#edf7f2".into(),
+            success_background_color: "#2a947d40".into(),
-            success_border_color: "#c5e7d5".into(),
+            success_border_color: "#2a947d59".into(),
-            warning_background_color: "#fef7ed".into(),
+            warning_background_color: "#f08a0040".into(),
-            warning_border_color: "#fae0b5".into(),
+            warning_border_color: "#f08a0059".into(),
-            error_background_color: "#fbeef1".into(),
+            error_background_color: "#d03a5240".into(),
-            error_border_color: "#f3cbd3".into(),
+            error_border_color: "#d03a5259".into(),
         }
     }
 }

src/avatar/avatar.css

@@ -1,13 +1,13 @@
 .melt-avatar {
     display: inline-block;
-    width: var(--size);
+    width: var(--melt-size);
-    height: var(--size);
+    height: var(--melt-size);
-    background-color: #f7f7f7;
+    background-color: var(--melt-background-color);
-    border-radius: var(--border-radius);
+    border-radius: var(--melt-border-radius);
 }
 
 .melt-avatar img {
     width: 100%;
     height: 100%;
-    border-radius: var(--border-radius);
+    border-radius: var(--melt-border-radius);
 }

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<bool>,
     #[prop(default = MaybeSignal::Static(30), into)] size: MaybeSignal<i32>,
 ) -> 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"));

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(),
+        }
+    }
+}

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;

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! {
         <div class="melt-message-wrapper">
-            <div class="melt-message">
+            <div class="melt-message" style=move || css_vars.get()>
                 <div class="melt-message__icon">
                     <Icon icon=variant.icon() style/>
                 </div>

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;

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(),
+        }
+    }
+}

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(),
         }
     }
 }