feat: theme

src/slider/mod.rs

@@ -1,22 +1,32 @@
+mod theme;
+
 use crate::{
     theme::use_theme,
     utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style},
     Theme,
 };
 use leptos::*;
-use wasm_bindgen::JsCast;
+pub use theme::SliderTheme;
 
 #[component]
 pub fn Slider(
     #[prop(optional, into)] value: MaybeRwSignal<f64>,
     #[prop(default = MaybeSignal::Static(100f64), into)] max: MaybeSignal<f64>,
 ) -> impl IntoView {
+    mount_style("slider", include_str!("./slider.css"));
     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!("--background-color-fill: {bg_color};"));
+        theme.with(|theme| {
+            css_vars.push_str(&format!(
+                "--melt-background-color: {};",
+                &theme.slider.background_color
+            ));
+            css_vars.push_str(&format!(
+                "--melt-background-color-fill: {};",
+                &theme.common.color_primary
+            ));
+        });
 
         css_vars
     });
@@ -30,7 +40,6 @@ pub fn Slider(
             value.get() / max.get() * 100.0
         }
     });
-    mount_style("slider", include_str!("./slider.css"));
 
     let do_update_value = move |val| {
         value.set(val);
@@ -51,7 +60,6 @@ pub fn Slider(
     let on_mouse_move = window_event_listener(ev::mousemove, move |ev| {
         if is_mouse_move.get_untracked() {
             if let Some(rail) = rail_ref.get_untracked() {
-                let ev = ev.unchecked_into::<web_sys::MouseEvent>();
                 let rect = rail.get_bounding_client_rect();
                 let ev_x = f64::from(ev.x());
                 if ev_x <= rect.x() {

src/slider/slider.css

@@ -5,13 +5,13 @@
 }
 .melt-slider-rail {
     height: 4px;
-    background-color: #e6e6e6;
+    background-color: var(--melt-background-color);
     border-radius: 2px;
 }
 .melt-slider-rail__fill {
     width: 0%;
     height: 4px;
-    background-color: var(--background-color-fill);
+    background-color: var(--melt-background-color-fill);
     border-radius: 2px;
 }
 .melt-slider-handle {

src/slider/theme.rs

@@ -0,0 +1,20 @@
+use crate::theme::ThemeMethod;
+
+#[derive(Clone)]
+pub struct SliderTheme {
+    pub background_color: String,
+}
+
+impl ThemeMethod for SliderTheme {
+    fn light() -> Self {
+        Self {
+            background_color: "#dbdbdf".into(),
+        }
+    }
+
+    fn dark() -> Self {
+        Self {
+            background_color: "#ffffff33".into(),
+        }
+    }
+}

src/switch/mod.rs

@@ -1,5 +1,8 @@
+mod theme;
+
 use crate::{mount_style, theme::use_theme, utils::maybe_rw_signal::MaybeRwSignal, Theme};
 use leptos::*;
+pub use theme::SwitchTheme;
 
 #[component]
 pub fn Switch(#[prop(optional, into)] value: MaybeRwSignal<bool>) -> impl IntoView {
@@ -9,8 +12,12 @@ pub fn Switch(#[prop(optional, into)] value: MaybeRwSignal<bool>) -> impl IntoVi
         let mut css_vars = String::new();
         theme.with(|theme| {
             css_vars.push_str(&format!(
-                "--background-color: {};",
-                theme.common.color_primary.clone()
+                "--melt-background-color: {};",
+                theme.switch.background_color
+            ));
+            css_vars.push_str(&format!(
+                "--melt-background-color-active: {};",
+                theme.common.color_primary
             ));
         });
         css_vars

src/switch/switch.css

@@ -4,7 +4,7 @@
     width: 35px;
     height: 19px;
     padding: 2px 5px 3px;
-    background-color: #f6f6f6;
+    background-color: var(--melt-background-color);
     border-radius: 25px;
     cursor: pointer;
     box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.05);
@@ -24,7 +24,7 @@
 }
 
 .melt-switch--active {
-    background-color: var(--background-color);
+    background-color: var(--melt-background-color-active);
 }
 
 .melt-switch--active .melt-switch__button {

src/switch/theme.rs

@@ -0,0 +1,20 @@
+use crate::theme::ThemeMethod;
+
+#[derive(Clone)]
+pub struct SwitchTheme {
+    pub background_color: String,
+}
+
+impl ThemeMethod for SwitchTheme {
+    fn light() -> Self {
+        Self {
+            background_color: "#00000024".into(),
+        }
+    }
+
+    fn dark() -> Self {
+        Self {
+            background_color: "#ffffff33".into(),
+        }
+    }
+}

src/table/mod.rs

@@ -18,20 +18,14 @@ pub fn Table(
         theme.with(|theme| {
             css_vars.push_str(&format!(
                 "--background-color: {};",
-                theme.table.background_color.clone()
+                theme.table.background_color
             ));
             css_vars.push_str(&format!(
                 "--background-color-striped: {};",
-                theme.table.background_color_striped.clone()
-            ));
-            css_vars.push_str(&format!(
-                "--border-color: {};",
-                theme.table.border_color.clone()
-            ));
-            css_vars.push_str(&format!(
-                "--border-radius: {};",
-                theme.common.border_radius.clone()
+                theme.table.background_color_striped
             ));
+            css_vars.push_str(&format!("--border-color: {};", theme.table.border_color));
+            css_vars.push_str(&format!("--border-radius: {};", theme.common.border_radius));
         });
 
         css_vars

src/table/theme.rs

@@ -18,9 +18,9 @@ impl ThemeMethod for TableTheme {
 
     fn dark() -> Self {
         Self {
-            background_color: "#fff".into(),
-            background_color_striped: "#fafafc".into(),
-            border_color: "#efeff5".into(),
+            background_color: "#18181c".into(),
+            background_color_striped: "#26262a".into(),
+            border_color: "#2d2d30".into(),
         }
     }
 }

src/theme/mod.rs

@@ -3,7 +3,7 @@ mod common;
 use self::common::CommonTheme;
 use crate::{
     AlertTheme, AvatarTheme, ButtonTheme, InputTheme, MenuTheme, MessageTheme, SelectTheme,
-    SkeletionTheme, TableTheme, TagTheme,
+    SkeletionTheme, SliderTheme, SwitchTheme, TableTheme, TagTheme, UploadTheme,
 };
 use leptos::*;
 
@@ -26,6 +26,9 @@ pub struct Theme {
     pub avatar: AvatarTheme,
     pub message: MessageTheme,
     pub select: SelectTheme,
+    pub slider: SliderTheme,
+    pub switch: SwitchTheme,
+    pub upload: UploadTheme,
 }
 
 impl Theme {
@@ -43,6 +46,9 @@ impl Theme {
             avatar: AvatarTheme::light(),
             message: MessageTheme::light(),
             select: SelectTheme::light(),
+            slider: SliderTheme::light(),
+            switch: SwitchTheme::light(),
+            upload: UploadTheme::light(),
         }
     }
     pub fn dark() -> Self {
@@ -59,6 +65,9 @@ impl Theme {
             avatar: AvatarTheme::dark(),
             message: MessageTheme::dark(),
             select: SelectTheme::dark(),
+            slider: SliderTheme::dark(),
+            switch: SwitchTheme::dark(),
+            upload: UploadTheme::dark(),
         }
     }
 }

src/upload/mod.rs

@@ -1,7 +1,9 @@
+mod theme;
 mod upload_dragger;
 
 use crate::mount_style;
 use leptos::*;
+pub use theme::UploadTheme;
 pub use upload_dragger::UploadDragger;
 pub use web_sys::FileList;
 

src/upload/theme.rs

@@ -0,0 +1,23 @@
+use crate::theme::ThemeMethod;
+
+#[derive(Clone)]
+pub struct UploadTheme {
+    pub dragger_background_color: String,
+    pub dragger_border_color: String,
+}
+
+impl ThemeMethod for UploadTheme {
+    fn light() -> Self {
+        Self {
+            dragger_background_color: "#fafafc".into(),
+            dragger_border_color: "#e0e0e6".into(),
+        }
+    }
+
+    fn dark() -> Self {
+        Self {
+            dragger_background_color: "#ffffff0f".into(),
+            dragger_border_color: "#ffffff3d".into(),
+        }
+    }
+}

src/upload/upload-dragger.css

@@ -1,8 +1,7 @@
 .melt-upload-dragger {
     padding: 20px;
-    background-color: #fafbfc;
-    color: #24292e;
-    border: 1px solid #e0e0e6;
+    background-color: var(--melt-background-color);
+    border: 1px dashed var(--melt-border-color);
     border-radius: 3px;
     text-align: center;
     cursor: pointer;
@@ -10,5 +9,5 @@
 }
 .melt-upload-dragger:hover,
 .melt-upload--drag-over .melt-upload-dragger {
-    border: 1px dashed var(--border-color-hover);
+    border: 1px dashed var(--melt-border-color-hover);
 }

src/upload/upload_dragger.rs

@@ -8,8 +8,16 @@ pub fn UploadDragger(children: Children) -> impl IntoView {
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
         theme.with(|theme| {
+            css_vars.push_str(&format!(
+                "--melt-background-color: {};",
+                theme.upload.dragger_background_color
+            ));
+            css_vars.push_str(&format!(
+                "--melt-border-color: {};",
+                theme.upload.dragger_border_color
+            ));
             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};"));
         });
         css_vars
     });