From fee54b3a70b58fea9b49a05e2608d023479399a8 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Thu, 26 Oct 2023 23:24:16 +0800 Subject: [PATCH] feat: theme --- demo/src/components/site_header.rs | 12 ++++++++++-- demo/src/pages/input/mod.rs | 4 ++-- src/button/mod.rs | 6 +++--- src/input/input.css | 16 ++++++++++------ src/input/mod.rs | 24 +++++++++++++++++++----- src/input/theme.rs | 21 ++++++++++++++++++--- src/tag/theme.rs | 18 +++++++++--------- src/theme/mod.rs | 4 ++-- 8 files changed, 73 insertions(+), 32 deletions(-) diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs index a7109f5..57c4ea4 100644 --- a/demo/src/components/site_header.rs +++ b/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()) diff --git a/demo/src/pages/input/mod.rs b/demo/src/pages/input/mod.rs index c0e38d3..9b8baf5 100644 --- a/demo/src/pages/input/mod.rs +++ b/demo/src/pages/input/mod.rs @@ -12,7 +12,7 @@ pub fn InputPage() -> impl IntoView { - + "$" @@ -27,7 +27,7 @@ pub fn InputPage() -> impl IntoView { view! { - + "$" diff --git a/src/button/mod.rs b/src/button/mod.rs index 468751a..481b0be 100644 --- a/src/button/mod.rs +++ b/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_active = color.get().theme_color_active(&theme); + let bg_color_hover = color.get().theme_color_hover(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};")); diff --git a/src/input/input.css b/src/input/input.css index 24a0214..8bc13c5 100644 --- a/src/input/input.css +++ b/src/input/input.css @@ -3,29 +3,33 @@ width: 100%; box-sizing: border-box; padding: 0 10px; - background-color: #fafbfc; - color: #24292e; + background-color: var(--melt-background-color); font-size: 14px; - border: 1px solid #e0e0e6; - border-radius: var(--border-radius); + color: var(--melt-font-color); + 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; diff --git a/src/input/mod.rs b/src/input/mod.rs index d0a3df8..201aaa8 100644 --- a/src/input/mod.rs +++ b/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(); - let border_color_hover = theme.common.color_primary.clone(); - css_vars.push_str(&format!("--border-color-hover: {border_color_hover};")); - let border_radius = theme.common.border_radius.clone(); - css_vars.push_str(&format!("--border-radius: {border_radius};")); + theme.with(|theme| { + let border_color_hover = theme.common.color_primary.clone(); + css_vars.push_str(&format!("--melt-border-color-hover: {border_color_hover};")); + let border_radius = theme.common.border_radius.clone(); + 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! { diff --git a/src/input/theme.rs b/src/input/theme.rs index 06ebcfe..faae0e8 100644 --- a/src/input/theme.rs +++ b/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(), + } } } diff --git a/src/tag/theme.rs b/src/tag/theme.rs index 2fa2f4e..4d454fc 100644 --- a/src/tag/theme.rs +++ b/src/tag/theme.rs @@ -30,15 +30,15 @@ impl ThemeMethod for TagTheme { fn dark() -> Self { Self { - default_font_color: "#333639".into(), - default_background_color: "#fafafc".into(), - default_border_color: " #e0e0e6".into(), - success_background_color: "#edf7f2".into(), - success_border_color: "#c5e7d5".into(), - warning_background_color: "#fef7ed".into(), - warning_border_color: "#fae0b5".into(), - error_background_color: "#fbeef1".into(), - error_border_color: "#f3cbd3".into(), + default_font_color: "#ffffffd1".into(), + default_background_color: "#0000".into(), + default_border_color: "#ffffff3d".into(), + success_background_color: "#0000".into(), + success_border_color: "#63e2b74d".into(), + warning_background_color: "#0000".into(), + warning_border_color: "#f2c97d4d".into(), + error_background_color: "#0000".into(), + error_border_color: "#e880804d".into(), } } } diff --git a/src/theme/mod.rs b/src/theme/mod.rs index 24dedbe..0e22b4a 100644 --- a/src/theme/mod.rs +++ b/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(),