feat: theme

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::<html::Div>();
     let popover_ref = create_node_ref::<html::Div>();
@@ -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()
                     }
                 }
 

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);
 }

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

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