add leptos_theme

nicoburniske · nicoburniske · commit e4d2915ee78b · 2024-02-24T09:42:48.000-05:00
diff --git a/example/start-csr/Cargo.toml b/example/start-csr/Cargo.toml
@@ -19,6 +19,7 @@ gloo-timers = "0.3.0"
 serde = { version = "1.0" }
 reqwest = { version = "0.11.24", features = ["json"] }
 leptos-use = "0.10.3"
+leptos_theme = "0.1.2"
 
 # utils
 # strum = { version = "0.25", features = ["derive", "strum_macros"] }
diff --git a/example/start-csr/src/layout.rs b/example/start-csr/src/layout.rs
@@ -37,19 +37,23 @@ pub fn Layout(children: Children) -> impl IntoView {
 
 #[component]
 fn ThemeToggle() -> impl IntoView {
-    let dark_mode = create_rw_signal(true);
+    let current_theme = use_theme();
+    let is_dark = Signal::derive(move || current_theme.get() == Theme::Dark);
 
     view! {
-        <Html class=move || if dark_mode.get() { "dark" } else { "" }/>
+        // <Html class=move || if is_dark.get() { "dark" } else { "" }/>
         <label
             for="dark-mode-toggle"
             class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
         >
             Dark Mode
         </label>
         <Switch
-            enabled=dark_mode
-            on_click=move |_| { dark_mode.set(!dark_mode.get_untracked()) }
+            enabled=is_dark
+            on_click=Callback::new(move |_| {
+                let new_theme = if is_dark.get() { Theme::Light } else { Theme::Dark };
+                current_theme.set(new_theme);
+            })
 
             attr:id="dark-mode-toggle"
         />
diff --git a/example/start-csr/src/lib.rs b/example/start-csr/src/lib.rs
@@ -3,6 +3,7 @@ use leptos_meta::*;
 use leptos_query::{provide_query_client_with_options, DefaultQueryOptions};
 use leptos_query_devtools::LeptosQueryDevtools;
 use leptos_router::*;
+use leptos_theme::ThemeProvider;
 
 // Modules
 mod components;
@@ -54,16 +55,18 @@ pub fn App() -> impl IntoView {
             }
         }>
 
-            <Layout>
-                <Router>
-                    <Routes>
-                        <Route path="/" view=Home/>
-                        <Route path="/single" view=pages::single::QueryVsResource/>
-                        <Route path="/todos" view=pages::interactive::Interactive/>
-                        <Route path="/*" view=NotFound/>
-                    </Routes>
-                </Router>
-            </Layout>
+            <ThemeProvider>
+                <Layout>
+                    <Router>
+                        <Routes>
+                            <Route path="/" view=Home/>
+                            <Route path="/single" view=pages::single::QueryVsResource/>
+                            <Route path="/todos" view=pages::interactive::Interactive/>
+                            <Route path="/*" view=NotFound/>
+                        </Routes>
+                    </Router>
+                </Layout>
+            </ThemeProvider>
 
         </ErrorBoundary>
     }
