refactor: remove ThemeProvider

demo/src/app.rs

@@ -117,11 +117,9 @@ fn TheProvider(children: Children) -> impl IntoView {
 
     view! {
         <ConfigProvider theme>
-            <ThemeProvider theme>
                 // <MessageProvider>
             <LoadingBarProvider>{children()}</LoadingBarProvider>
                 // </MessageProvider>
-            </ThemeProvider>
         </ConfigProvider>
     }
 }

demo/src/components/demo.rs

@@ -11,11 +11,11 @@ pub struct DemoCode {
 
 #[component]
 pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option<Children>) -> impl IntoView {
-    let theme = use_theme(Theme::light);
+    let theme = Theme::use_theme(Theme::light);
     let css_vars = Memo::new(move |_| {
         let mut css_vars = String::new();
         theme.with(|theme| {
-            if theme.common.color_scheme == "dark" {
+            if theme.color.color_scheme == "dark" {
                 css_vars.push_str("--demo-color: #ffffff60;");
                 css_vars.push_str("--demo-color-hover: #ffffffe0;");
                 css_vars.push_str("--demo-border-color: #383f52;");
@@ -24,8 +24,7 @@ pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option<Children>) -
                 css_vars.push_str("--demo-color: #00000060;");
                 css_vars.push_str("--demo-color-hover: #000000e0;");
                 css_vars.push_str(&format!(
-                    "--demo-border-color: {};",
+                    "--demo-border-color: var(--colorNeutralStroke2);",
-                    theme.common.border_color
                 ));
                 css_vars.push_str("--demo-background-color: #f9fafb;");
             }
@@ -34,12 +33,7 @@ pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option<Children>) -
     });
 
     let code_class = Memo::new(move |_| {
-        theme.with(|theme| {
+        theme.with(|theme| format!("demo-demo__code color-scheme--{}", theme.color.color_scheme))
-            format!(
-                "demo-demo__code color-scheme--{}",
-                theme.common.color_scheme
-            )
-        })
     });
     let is_show_code = RwSignal::new(children.is_none());
 

demo/src/components/site_header.rs

@@ -6,7 +6,7 @@ use thaw::*;
 
 #[component]
 pub fn SiteHeader() -> impl IntoView {
-    let theme = use_rw_theme();
+    let theme = Theme::use_rw_theme();
     let theme_name = create_memo(move |_| {
         theme.with(|theme| {
             if theme.name == *"light" {

thaw/src/message/mod.rs

@@ -1,10 +1,8 @@
 mod message_provider;
-mod theme;
 
 pub use message_provider::*;
-pub use theme::MessageTheme;
 
-use crate::{theme::use_theme, Icon, Theme};
+use crate::{Icon, Theme};
 use leptos::*;
 use thaw_components::{CSSTransition, If, Then};
 use uuid::Uuid;
@@ -25,13 +23,13 @@ impl MessageVariant {
             MessageVariant::Error => icondata_ai::AiCheckCircleFilled,
         }
     }
-    fn theme_color(&self, theme: &Theme) -> String {
+    // fn theme_color(&self, theme: &Theme) -> String {
-        match self {
+    //     match self {
-            MessageVariant::Success => theme.common.color_success.clone(),
+    //         MessageVariant::Success => theme.common.color_success.clone(),
-            MessageVariant::Warning => theme.common.color_warning.clone(),
+    //         MessageVariant::Warning => theme.common.color_warning.clone(),
-            MessageVariant::Error => theme.common.color_error.clone(),
+    //         MessageVariant::Error => theme.common.color_error.clone(),
-        }
+    //     }
-    }
+    // }
 }
 
 #[component]
@@ -49,7 +47,7 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback<Uuid, ()>) ->
         );
     }
 
-    let theme = use_theme(Theme::light);
+    // let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
         // theme.with(|theme| {
@@ -60,7 +58,7 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback<Uuid, ()>) ->
         // });
         css_vars
     });
-    let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme)));
+    // let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme)));
 
     let on_before_leave = Callback::new(move |_| {
         let Some(node_el) = message_ref.get() else {
@@ -89,7 +87,7 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback<Uuid, ()>) ->
             <div class="thaw-message-wrapper" ref=message_ref>
                 <div class="thaw-message" style=move || css_vars.get()>
                     <div class="thaw-message__icon">
-                        <Icon icon=variant.icon() style/>
+                        <Icon icon=variant.icon()/>
                     </div>
                     <div class="thaw-message__content">{content}</div>
                     <If cond=closable>

thaw/src/message/theme.rs

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

thaw/src/theme/color.rs

@@ -2,6 +2,8 @@ use thaw_macro::WriteCSSVars;
 
 #[derive(Clone, WriteCSSVars)]
 pub struct ColorTheme {
+    pub color_scheme: String,
+
     pub color_neutral_background_static: String,
     pub color_neutral_background_inverted: String,
     pub color_neutral_background_disabled: String,
@@ -113,6 +115,8 @@ pub struct ColorTheme {
 impl ColorTheme {
     pub fn light() -> Self {
         Self {
+            color_scheme: "light".into(),
+
             color_neutral_background_static: "#333333".into(),
             color_neutral_background_inverted: "#292929".into(),
             color_neutral_background_disabled: "#f0f0f0".into(),
@@ -225,6 +229,8 @@ impl ColorTheme {
 
     pub fn dark() -> Self {
         Self {
+            color_scheme: "dark".into(),
+
             color_neutral_background_static: "#3d3d3d".into(),
             color_neutral_background_inverted: "#ffffff".into(),
             color_neutral_background_disabled: "#141414".into(),

thaw/src/theme/common.rs

@@ -1,24 +1,8 @@
-use super::ThemeMethod;
 use thaw_macro::WriteCSSVars;
 
 #[derive(Clone, WriteCSSVars)]
 pub struct CommonTheme {
     pub font_family_base: String,
-    pub border_color: String,
-    pub color_scheme: String,
-
-    pub color_primary: String,
-    pub color_primary_hover: String,
-    pub color_primary_active: String,
-    pub color_success: String,
-    pub color_success_hover: String,
-    pub color_success_active: String,
-    pub color_warning: String,
-    pub color_warning_hover: String,
-    pub color_warning_active: String,
-    pub color_error: String,
-    pub color_error_hover: String,
-    pub color_error_active: String,
 
     pub font_size_base_100: String,
     pub font_size_base_200: String,
@@ -75,33 +59,12 @@ pub struct CommonTheme {
     pub curve_decelerate_max: String,
     pub curve_decelerate_mid: String,
     pub curve_easy_ease: String,
-
-    pub height_tiny: String,
-    pub height_small: String,
-    pub height_medium: String,
-    pub height_large: String,
-
-    pub border_radius: String,
 }
 
 impl CommonTheme {
-    fn common() -> Self {
+    pub fn new() -> Self {
         Self {
             font_family_base: "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif".into(),
-            border_color: "".into(),
-            color_scheme: "".into(),
-            color_primary: "".into(),
-            color_primary_hover: "".into(),
-            color_primary_active: "".into(),
-            color_success: "".into(),
-            color_success_hover: "".into(),
-            color_success_active: "".into(),
-            color_warning: "".into(),
-            color_warning_hover: "".into(),
-            color_warning_active: "".into(),
-            color_error: "".into(),
-            color_error_hover: "".into(),
-            color_error_active: "".into(),
             
             font_size_base_100: "10px".into(),
             font_size_base_200: "12px".into(),
@@ -158,57 +121,6 @@ impl CommonTheme {
             curve_decelerate_max: "cubic-bezier(0.1,0.9,0.2,1)".into(),
             curve_decelerate_mid: "cubic-bezier(0,0,0,1)".into(),
             curve_easy_ease: "cubic-bezier(0.33,0,0.67,1)".into(),
-
-            height_tiny: "22px".into(),
-            height_small: "28px".into(),
-            height_medium: "34px".into(),
-            height_large: "40px".into(),
-
-            border_radius: "3px".into(),
-        }
-    }
-}
-
-impl ThemeMethod for CommonTheme {
-    fn light() -> Self {
-        Self {
-            color_scheme: "light".into(),
-            color_primary: "#0078ff".into(),
-            color_primary_hover: "#2994ff".into(),
-            color_primary_active: "#005ed9".into(),
-            color_success: "#18a058".into(),
-            color_success_hover: "#36ad6a".into(),
-            color_success_active: "#0c7a43".into(),
-            color_warning: "#f0a020".into(),
-            color_warning_hover: "#fcb040".into(),
-            color_warning_active: "#c97c10".into(),
-            color_error: "#d03050".into(),
-            color_error_hover: "#de576d".into(),
-            color_error_active: "#ab1f3f".into(),
-            border_color: "#e5e8eb".into(),
-
-            ..CommonTheme::common()
-        }
-    }
-    fn dark() -> Self {
-        Self {
-            color_scheme: "dark".into(),
-            color_primary: "#0078ff".into(),
-            color_primary_hover: "#2994ff".into(),
-            color_primary_active: "#005ed9".into(),
-            // color_success: "#63e2b7".into(),
-            // color_success_hover: "#7fe7c4".into(),
-            color_success: "#18a058".into(),
-            color_success_hover: "#36ad6a".into(),
-            color_success_active: "#5acea7".into(),
-            color_warning: "#f0a020".into(),
-            color_warning_hover: "#fcb040".into(),
-            color_warning_active: "#e6c260".into(),
-            color_error: "#d03050".into(),
-            color_error_hover: "#de576d".into(),
-            color_error_active: "#e57272".into(),
-            border_color: "#1f2537".into(),
-            ..CommonTheme::common()
         }
     }
 }

thaw/src/theme/mod.rs

@@ -1,15 +1,11 @@
 mod color;
 mod common;
 
-use self::common::CommonTheme;
+use crate::ConfigInjection;
 pub use color::ColorTheme;
+pub use common::CommonTheme;
 use leptos::*;
 
-pub trait ThemeMethod {
-    fn light() -> Self;
-    fn dark() -> Self;
-}
-
 #[derive(Clone)]
 pub struct Theme {
     pub name: String,
@@ -21,58 +17,26 @@ impl Theme {
     pub fn light() -> Self {
         Self {
             name: "light".into(),
-            common: CommonTheme::light(),
+            common: CommonTheme::new(),
             color: ColorTheme::light(),
         }
     }
     pub fn dark() -> Self {
         Self {
             name: "dark".into(),
-            common: CommonTheme::dark(),
+            common: CommonTheme::new(),
             color: ColorTheme::dark(),
         }
     }
-}
-
-impl ThemeMethod for Theme {
-    fn light() -> Self {
-        Theme::light()
-    }
-    fn dark() -> Self {
-        Theme::dark()
-    }
-}
-
-#[component]
-pub fn ThemeProvider(
-    #[prop(optional, into)] theme: Option<RwSignal<Theme>>,
-    children: Children,
-) -> impl IntoView {
-    let theme = if let Some(theme) = theme {
-        theme
-    } else {
-        create_rw_signal(Theme::light())
-    };
-
-    view! { <Provider value=theme children/> }
-}
 
     pub fn use_theme(default: impl Fn() -> Theme) -> ReadSignal<Theme> {
-    use_context::<RwSignal<Theme>>()
+        use_context::<ConfigInjection>()
-        .unwrap_or_else(|| create_rw_signal(default()))
+            .map_or_else(|| RwSignal::new(default()), |c| c.theme)
             .split()
             .0
     }
 
     pub fn use_rw_theme() -> RwSignal<Theme> {
-    expect_context::<RwSignal<Theme>>()
+        expect_context::<ConfigInjection>().theme
-}
-
-#[cfg(test)]
-mod tests {
-    use super::{use_theme, Theme};
-
-    fn _t_use_theme() {
-        use_theme(Theme::dark);
     }
 }