feat: theme

demo/src/components/site_header.rs

@@ -5,9 +5,17 @@ use melt_ui::*;
 #[component]
 pub fn SiteHeader() -> impl IntoView {
     let theme = use_rw_theme();
-    let theme_name = create_memo(move |_| theme.with(|theme| theme.name.clone()));
+    let theme_name = create_memo(move |_| {
+        theme.with(|theme| {
+            if theme.name == "light".to_string() {
+                "Dark"
+            } else {
+                "Light"
+            }
+        })
+    });
     let on_theme = move |_| {
-        if theme_name.get_untracked() != "Light".to_string() {
+        if theme_name.get_untracked() == "Light" {
             theme.set(Theme::light())
         } else {
             theme.set(Theme::dark())

demo/src/pages/input/mod.rs

@@ -12,7 +12,7 @@ pub fn InputPage() -> impl IntoView {
             <Demo>
                 <Space vertical=true>
                     <Input value/>
-                    <Input value variant=InputVariant::Password/>
+                    <Input value variant=InputVariant::Password placeholder="Password"/>
                     <Input value>
                         <InputSuffix slot>
                             "$"
@@ -27,7 +27,7 @@ pub fn InputPage() -> impl IntoView {
 
                         view! {
                             <Input value/>
-                            <Input value variant=InputVariant::Password />
+                            <Input value variant=InputVariant::Password placeholder="Password"/>
                             <Input value>
                                 <InputSuffix slot>
                                     "$"

src/button/mod.rs

@@ -66,10 +66,10 @@ pub fn Button(
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
         theme.with(|theme| {
-            let bg_color = color.get().theme_color(&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_hover = color.get().theme_color_hover(theme);
-                let bg_color_active = color.get().theme_color_active(&theme);
+                let bg_color_active = color.get().theme_color_active(theme);
                 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};"));

src/input/input.css

@@ -3,29 +3,33 @@
     width: 100%;
     box-sizing: border-box;
     padding: 0 10px;
-    background-color: #fafbfc;
+    background-color: var(--melt-background-color);
-    color: #24292e;
     font-size: 14px;
-    border: 1px solid #e0e0e6;
+    color: var(--melt-font-color);
-    border-radius: var(--border-radius);
+    border: 1px solid var(--melt-border-color);
+    border-radius: var(--melt-border-radius);
     cursor: text;
     transition: all 0.3s;
 }
 
 .melt-input:hover {
-    border-color: var(--border-color-hover);
+    border-color: var(--melt-border-color-hover);
 }
 .melt-input__input-el {
     width: 100%;
     height: 30px;
     background-color: transparent;
-    color: #24292e;
+    color: var(--melt-font-color);
     line-height: 30px;
     font-size: inherit;
     border: none;
     outline: none;
 }
 
+.melt-input__input-el::placeholder {
+    color: var(--melt-placeholder-color);
+}
+
 .melt-input__suffix {
     display: inline-flex;
     align-items: center;

src/input/mod.rs

@@ -65,11 +65,25 @@ pub fn Input(
 
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
-        let theme = theme.get();
+        theme.with(|theme| {
-        let border_color_hover = theme.common.color_primary.clone();
+            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};"));
-        let border_radius = theme.common.border_radius.clone();
+            let border_radius = theme.common.border_radius.clone();
-        css_vars.push_str(&format!("--border-radius: {border_radius};"));
+            css_vars.push_str(&format!("--melt-border-radius: {border_radius};"));
+            css_vars.push_str(&format!(
+                "--melt-background-color: {};",
+                theme.input.background_color
+            ));
+            css_vars.push_str(&format!("--melt-font-color: {};", theme.input.font_color));
+            css_vars.push_str(&format!(
+                "--melt-border-color: {};",
+                theme.input.border_color
+            ));
+            css_vars.push_str(&format!(
+                "--melt-placeholder-color: {};",
+                theme.input.placeholder_color
+            ));
+        });
         css_vars
     });
     view! {

src/input/theme.rs

@@ -1,14 +1,29 @@
 use crate::theme::ThemeMethod;
 
 #[derive(Clone)]
-pub struct InputTheme {}
+pub struct InputTheme {
+    pub font_color: String,
+    pub placeholder_color: String,
+    pub border_color: String,
+    pub background_color: String,
+}
 
 impl ThemeMethod for InputTheme {
     fn light() -> Self {
-        Self {}
+        Self {
+            font_color: "#333639".into(),
+            placeholder_color: "#c2c2c2".into(),
+            border_color: "#e0e0e6".into(),
+            background_color: "#fff".into(),
+        }
     }
 
     fn dark() -> Self {
-        Self {}
+        Self {
+            font_color: "#ffffffd1".into(),
+            placeholder_color: "#c2c2c2".into(),
+            border_color: "#0000".into(),
+            background_color: "#ffffff1a".into(),
+        }
     }
 }

src/tag/theme.rs

@@ -30,15 +30,15 @@ impl ThemeMethod for TagTheme {
 
     fn dark() -> Self {
         Self {
-            default_font_color: "#333639".into(),
+            default_font_color: "#ffffffd1".into(),
-            default_background_color: "#fafafc".into(),
+            default_background_color: "#0000".into(),
-            default_border_color: " #e0e0e6".into(),
+            default_border_color: "#ffffff3d".into(),
-            success_background_color: "#edf7f2".into(),
+            success_background_color: "#0000".into(),
-            success_border_color: "#c5e7d5".into(),
+            success_border_color: "#63e2b74d".into(),
-            warning_background_color: "#fef7ed".into(),
+            warning_background_color: "#0000".into(),
-            warning_border_color: "#fae0b5".into(),
+            warning_border_color: "#f2c97d4d".into(),
-            error_background_color: "#fbeef1".into(),
+            error_background_color: "#0000".into(),
-            error_border_color: "#f3cbd3".into(),
+            error_border_color: "#e880804d".into(),
         }
     }
 }

src/theme/mod.rs

@@ -25,7 +25,7 @@ pub struct Theme {
 impl Theme {
     pub fn light() -> Self {
         Self {
-            name: "Light".into(),
+            name: "light".into(),
             common: CommonTheme::light(),
             button: ButtonTheme::light(),
             input: InputTheme::light(),
@@ -38,7 +38,7 @@ impl Theme {
     }
     pub fn dark() -> Self {
         Self {
-            name: "Dark".into(),
+            name: "dark".into(),
             common: CommonTheme::dark(),
             button: ButtonTheme::dark(),
             input: InputTheme::dark(),