diff --git a/demo/src/app.rs b/demo/src/app.rs
index d9e138d..e067884 100644
--- a/demo/src/app.rs
+++ b/demo/src/app.rs
@@ -22,7 +22,6 @@ pub fn App() -> impl IntoView {
     });
     let theme = create_rw_signal(theme);
 
-    provide_context(theme);
     provide_meta_context();
     view! {
         <Provider theme>
@@ -84,6 +83,7 @@ fn TheRouter() -> impl IntoView {
                     <Route path="/breadcrumb" view=BreadcrumbPage/>
                     <Route path="/layout" view=LayoutPage/>
                     <Route path="/progress" view=ProgressPage/>
+                    <Route path="/theme" view=ThemePage/>
                 </Route>
                 <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                 <Route path="/mobile/nav-bar" view=NavBarDemoPage/>
diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs
index 5936ea0..d04d564 100644
--- a/demo/src/pages/components.rs
+++ b/demo/src/pages/components.rs
@@ -232,6 +232,13 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                 },
             ],
         },
+        MenuGroupOption {
+            label: "Config Components".into(),
+            children: vec![MenuItemOption {
+                value: "theme".into(),
+                label: "Theme".into(),
+            }],
+        },
         MenuGroupOption {
             label: "Mobile Components".into(),
             children: vec![
diff --git a/demo/src/pages/mod.rs b/demo/src/pages/mod.rs
index 2ccca25..cc05c74 100644
--- a/demo/src/pages/mod.rs
+++ b/demo/src/pages/mod.rs
@@ -34,6 +34,7 @@ mod tabbar;
 mod table;
 mod tabs;
 mod tag;
+mod theme;
 mod toast;
 mod upload;
 
@@ -73,5 +74,6 @@ pub use tabbar::*;
 pub use table::*;
 pub use tabs::*;
 pub use tag::*;
+pub use theme::*;
 pub use toast::*;
 pub use upload::*;
diff --git a/demo/src/pages/tabs/mod.rs b/demo/src/pages/tabs/mod.rs
index 3217c57..819d955 100644
--- a/demo/src/pages/tabs/mod.rs
+++ b/demo/src/pages/tabs/mod.rs
@@ -8,7 +8,7 @@ pub fn TabsPage() -> impl IntoView {
     let value = create_rw_signal(String::from("apple"));
     view! {
         <div style="width: 896px; margin: 0 auto;">
-            <h1>"Tabs2"</h1>
+            <h1>"Tabs"</h1>
             <Demo>
                 <Tabs value>
                     <Tab key="apple" label="Apple">
diff --git a/demo/src/pages/theme/mod.rs b/demo/src/pages/theme/mod.rs
new file mode 100644
index 0000000..ae2aa1c
--- /dev/null
+++ b/demo/src/pages/theme/mod.rs
@@ -0,0 +1,141 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use prisms::highlight_str;
+use thaw::*;
+
+#[component]
+pub fn ThemePage() -> impl IntoView {
+    let customize_theme = create_rw_signal(Theme::light());
+    let on_customize_theme = move |_| {
+        customize_theme.update(|theme| {
+            theme.common.color_primary = "#f5222d".to_string();
+            theme.common.color_primary_hover = "#ff4d4f".to_string();
+            theme.common.color_primary_active = "#cf1322".to_string();
+        });
+    };
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Theme"</h1>
+            <ThemeProviderPage/>
+            <h3>"GlobalStyle"</h3>
+            <p>"You can use GlobalStyle to sync common global style to the body element."</p>
+            <Demo>
+                ""
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    let theme = create_rw_signal(Theme::light());
+                    
+                    view! {
+                        <ThemeProvider theme>
+                            <GlobalStyle />
+                            "..."
+                        </ThemeProvider>
+                    }
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+            <h3>"CustomizeTheme"</h3>
+            <Demo>
+                <ThemeProvider theme=customize_theme>
+                    <Card>
+                        <Space>
+                            <Button on_click=move |_| {
+                                customize_theme.set(Theme::light())
+                            }>"Light"</Button>
+                            <Button on_click=on_customize_theme>"Customize Theme"</Button>
+                        </Space>
+                    </Card>
+                </ThemeProvider>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r##"
+                    let customize_theme = create_rw_signal(Theme::light());
+                    let on_customize_theme = move |_| {
+                        customize_theme.update(|theme| {
+                            theme.common.color_primary = "#f5222d".to_string();
+                            theme.common.color_primary_hover = "#ff4d4f".to_string();
+                            theme.common.color_primary_active = "#cf1322".to_string();
+                        });
+                    };
+                    
+                    view! {
+                        <ThemeProvider theme=customize_theme>
+                            <Card>
+                                <Space>
+                                    <Button on_click=move |_| customize_theme.set(Theme::light())>"Light"</Button>
+                                    <Button on_click=on_customize_theme>"Customize Theme"</Button>
+                                </Space>
+                            </Card>
+                        </ThemeProvider>
+                    }
+                "##,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+            <h3>"ThemeProvider Props"</h3>
+            <Table single_column=true>
+                <thead>
+                    <tr>
+                        <th>"Name"</th>
+                        <th>"Type"</th>
+                        <th>"Default"</th>
+                        <th>"Description"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>"theme"</td>
+                        <td>"RwSignal<Theme>"</td>
+                        <td></td>
+                        <td>"Theme."</td>
+                    </tr>
+                </tbody>
+            </Table>
+        </div>
+    }
+}
+
+#[component]
+fn ThemeProviderPage() -> impl IntoView {
+    view! {
+        <h3>"ThemeProvider"</h3>
+        <Demo>
+            ""
+            <DemoCode
+                slot
+                html=highlight_str!(
+                    r#"
+                        let theme = create_rw_signal(Theme::light());
+
+                        view! {
+                            <ThemeProvider theme>
+                                <Card>
+                                    <Space>
+                                        <Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
+                                        <Button on_click=move |_| theme.set(Theme::dark())>"Dark"</Button>
+                                    </Space>
+                                </Card>
+                            </ThemeProvider>
+                        }
+                    "#,
+                    "rust"
+                )
+            >
+
+                ""
+            </DemoCode>
+        </Demo>
+    }
+}