feat: theme

demo/src/pages/grid/mod.rs

@@ -8,10 +8,10 @@ pub fn GridPage() -> impl IntoView {
     mount_style(
         "grid-demo",
         r#".melt-grid-item {
-        height: 130px;
+        height: 60px;
         color: white;
         text-align: center;
-        line-height: 130px;
+        line-height: 60px;
       }
       .melt-grid-item:nth-child(odd) {
         background-color: #3d8ae5dd;

src/button/button.css

@@ -33,7 +33,6 @@
 
 .melt-button--text:hover {
     color: var(--font-color-hover);
-    background-color: #f2f2f2;
 }
 
 .melt-button--link {

src/button/mod.rs

@@ -65,22 +65,33 @@ pub fn Button(
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
-        let theme = theme.get();
+        theme.with(|theme| {
             let bg_color = color.get().theme_color(&theme);
+            if variant.get() == ButtonVariant::Primary {
                 let bg_color_hover = color.get().theme_color_hover(&theme);
                 let bg_color_active = color.get().theme_color_active(&theme);
-        if variant.get() == ButtonVariant::Primary {
                 css_vars.push_str(&format!("--background-color: {bg_color};"));
                 css_vars.push_str(&format!("--background-color-hover: {bg_color_hover};"));
                 css_vars.push_str(&format!("--background-color-active: {bg_color_active};"));
                 css_vars.push_str("--font-color: #fff;");
                 css_vars.push_str(&format!("--border-color: {bg_color};"));
                 css_vars.push_str(&format!("--border-color-hover: {bg_color};"));
+            } else if variant.get() == ButtonVariant::Text {
+                css_vars.push_str(&format!("--font-color-hover: {bg_color};"));
+                css_vars.push_str(&format!(
+                    "--background-color-hover: {};",
+                    theme.button.color_text_hover
+                ));
+                css_vars.push_str(&format!(
+                    "--background-color-active: {};",
+                    theme.button.color_text_active
+                ));
             } else {
                 css_vars.push_str(&format!("--font-color-hover: {bg_color};"));
                 css_vars.push_str("--border-color: #555a;");
                 css_vars.push_str("--border-color-hover: #555;");
             }
+        });
 
         css_vars
     });

src/button/theme.rs

@@ -1,14 +1,23 @@
 use crate::theme::ThemeMethod;
 
 #[derive(Clone)]
-pub struct ButtonTheme {}
+pub struct ButtonTheme {
+    pub color_text_hover: String,
+    pub color_text_active: String,
+}
 
 impl ThemeMethod for ButtonTheme {
     fn light() -> Self {
-        Self {}
+        Self {
+            color_text_hover: "#f1f3f5".into(),
+            color_text_active: "#eceef0".into(),
+        }
     }
 
     fn dark() -> Self {
-        Self {}
+        Self {
+            color_text_hover: "#ffffff1a".into(),
+            color_text_active: "#ffffff26".into(),
+        }
     }
 }

src/card/card.css

@@ -1,7 +1,7 @@
 .melt-card {
     display: flex;
     flex-direction: column;
-    border: 1px solid #efeff5;
+    border: 1px solid var(--melt-border-color);
     border-radius: 3px;
     overflow: hidden;
 }
@@ -21,7 +21,7 @@
 .melt-card__content,
 .melt-card__footer {
     padding: 12px 28px;
-    background-color: #fff;
+    background-color: var(--melt-background-color);
 }
 .melt-card__header {
     padding: 20px 28px;

src/card/mod.rs

@@ -1,4 +1,4 @@
-use crate::{components::*, utils::mount_style::mount_style};
+use crate::{components::*, use_theme, utils::mount_style::mount_style, Theme};
 use leptos::*;
 
 #[derive(Clone)]
@@ -29,6 +29,21 @@ pub fn Card(
     #[prop(optional)] card_footer: Option<CardFooter>,
 ) -> impl IntoView {
     mount_style("card", include_str!("./card.css"));
+    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.common.background_color
+            ));
+            css_vars.push_str(&format!(
+                "--melt-border-color: {};",
+                theme.common.border_color
+            ));
+        });
+        css_vars
+    });
 
     let title = store_value(title);
     let is_header = card_header.is_some();
@@ -37,7 +52,7 @@ pub fn Card(
     let header_extra = store_value(card_header_extra);
 
     view! {
-        <div class="melt-card">
+        <div class="melt-card" style=move || css_vars.get()>
             <If cond=is_header>
                 <Then slot>
                     <div class="melt-card__header">

src/layout/layout-sider.css

@@ -1,5 +1,5 @@
 .melt-layout-sider {
     position: relative;
-    min-width: 208px;
+    min-width: 240px;
     overflow: auto;
 }

src/menu/theme.rs

@@ -18,9 +18,9 @@ impl ThemeMethod for MenuTheme {
 
     fn dark() -> Self {
         Self {
-            color: "#4b5263".into(),
+            color: "#9ca5b0".into(),
-            item_color_hover: "#f3f5f6".into(),
+            item_color_hover: "#383f5233".into(),
-            group_color: "#111727".into(),
+            group_color: "#ffffffe6".into(),
         }
     }
 }