feat: add global style component

demo/src/app.rs

@@ -8,7 +8,7 @@ pub fn App() -> impl IntoView {
     let theme = create_rw_signal(Theme::light());
     provide_context(theme);
     view! {
-        <Provider theme=theme.split().0>
+        <Provider theme>
             <Router base="/melt-ui">
                 <Routes base="/melt-ui".to_string()>
                     <Route path="/" view=Home/>
@@ -54,16 +54,13 @@ pub fn App() -> impl IntoView {
 }
 
 #[component]
-fn Provider(theme: ReadSignal<Theme>, children: Children) -> impl IntoView {
+fn Provider(theme: RwSignal<Theme>, children: Children) -> impl IntoView {
     view! {
         <ThemeProvider theme>
+            <GlobalStyle />
             <MessageProvider>
                 {children()}
             </MessageProvider>
         </ThemeProvider>
     }
 }
-
-pub fn use_rw_theme() -> RwSignal<Theme> {
-    expect_context::<RwSignal<Theme>>()
-}

demo/src/components/site_header.rs

@@ -1,4 +1,3 @@
-use crate::app::use_rw_theme;
 use leptos::*;
 use leptos_router::use_navigate;
 use melt_ui::*;

src/global_style/mod.rs

@@ -0,0 +1,23 @@
+use crate::{use_theme, Theme};
+use leptos::*;
+
+#[component]
+pub fn GlobalStyle() -> impl IntoView {
+    let theme = use_theme(Theme::light);
+    create_effect(move |_| {
+        theme.with(|theme| {
+            if let Some(body) = document().body() {
+                _ = body
+                    .style()
+                    .set_property("background-color", &theme.common.background_color);
+                _ = body.style().set_property("color", &theme.common.font_color);
+                _ = body
+                    .style()
+                    .set_property("font-family", &theme.common.font_family);
+                _ = body
+                    .style()
+                    .set_property("font-size", &theme.common.font_size);
+            }
+        });
+    });
+}

src/lib.rs

@@ -9,6 +9,7 @@ mod code;
 mod color_picker;
 mod components;
 mod divider;
+mod global_style;
 mod grid;
 mod icon;
 mod image;
@@ -45,6 +46,7 @@ pub use checkbox::*;
 pub use code::*;
 pub use color_picker::*;
 pub use divider::*;
+pub use global_style::*;
 pub use grid::*;
 pub use icon::*;
 pub use image::*;

src/theme/common.rs

@@ -3,6 +3,8 @@ use super::ThemeMethod;
 #[derive(Clone)]
 pub struct CommonTheme {
     pub font_family: String,
+    pub font_color: String,
+    pub background_color: String,
 
     pub color_primary: String,
     pub color_primary_hover: String,
@@ -38,7 +40,9 @@ pub struct CommonTheme {
 impl CommonTheme {
     fn common() -> Self {
         Self {
-            font_family: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'".into(),
+            font_family: r#"Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji""#.into(),
+            font_color: "".into(),
+            background_color: "".into(),
             color_primary: "".into(),
             color_primary_hover: "".into(),
             color_primary_active: "".into(),
@@ -72,6 +76,8 @@ impl CommonTheme {
 impl ThemeMethod for CommonTheme {
     fn light() -> Self {
         Self {
+            font_color: "#11181c".into(),
+            background_color: "#fff".into(),
             color_primary: "#f5222d".into(),
             color_primary_hover: "#ff4d4f".into(),
             color_primary_active: "#cf1322".into(),
@@ -89,6 +95,8 @@ impl ThemeMethod for CommonTheme {
     }
     fn dark() -> Self {
         Self {
+            font_color: "#ecedee".into(),
+            background_color: "#1a1d1e".into(),
             color_primary: "#d32029".into(),
             color_primary_hover: "#e04648".into(),
             color_primary_active: "#ad111e".into(),

src/theme/mod.rs

@@ -53,49 +53,36 @@ impl Theme {
 
 impl ThemeMethod for Theme {
     fn light() -> Self {
-        Self {
+        Theme::light()
-            name: "Light".into(),
-            common: CommonTheme::light(),
-            button: ButtonTheme::light(),
-            input: InputTheme::light(),
-            menu: MenuTheme::light(),
-            table: TableTheme::light(),
-            alert: AlertTheme::light(),
-            skeletion: SkeletionTheme::light(),
-            tag: TagTheme::light(),
-        }
     }
     fn dark() -> Self {
-        Self {
+        Theme::dark()
-            name: "Dark".into(),
-            common: CommonTheme::dark(),
-            button: ButtonTheme::dark(),
-            input: InputTheme::dark(),
-            menu: MenuTheme::dark(),
-            table: TableTheme::dark(),
-            alert: AlertTheme::dark(),
-            skeletion: SkeletionTheme::dark(),
-            tag: TagTheme::dark(),
-        }
     }
 }
 
 #[component]
 pub fn ThemeProvider(
-    #[prop(optional, into)] theme: Option<ReadSignal<Theme>>,
+    #[prop(optional, into)] theme: Option<RwSignal<Theme>>,
     children: Children,
 ) -> impl IntoView {
     let theme = if let Some(theme) = theme {
         theme
     } else {
-        create_signal(Theme::light()).0
+        create_rw_signal(Theme::light())
     };
     provide_context(theme);
     children()
 }
 
 pub fn use_theme(default: impl Fn() -> Theme) -> ReadSignal<Theme> {
-    use_context::<ReadSignal<Theme>>().unwrap_or_else(|| create_signal(default()).0)
+    use_context::<RwSignal<Theme>>()
+        .unwrap_or_else(|| create_rw_signal(default()))
+        .split()
+        .0
+}
+
+pub fn use_rw_theme() -> RwSignal<Theme> {
+    expect_context::<RwSignal<Theme>>()
 }
 
 #[cfg(test)]