Refactor

app/index.html

@@ -34,6 +34,11 @@
     <link
       rel="stylesheet"
       href="/static/style.css" />
+    <script>
+      function inDarkMode(){
+        return darkmode.inDarkMode;
+      }
+    </script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 

app/index_local.html

@@ -31,6 +31,11 @@
     <link
       rel="stylesheet"
       href="/static/style.css" />
+    <script>
+      function inDarkMode(){
+        return darkmode.inDarkMode;
+      }
+    </script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 

app/src/components/app.rs

@@ -34,6 +34,19 @@ use wasm_bindgen::prelude::*;
 extern "C" {
   #[wasm_bindgen(js_namespace = darkmode)]
   fn toggleDarkMode(doSave: bool);
+
+  #[wasm_bindgen]
+  fn inDarkMode() -> bool;
+}
+
+#[function_component(DarkModeToggle)]
+pub fn dark_mode_toggle() -> Html {
+  html! {
+    <div class="form-check form-switch">
+      <input class="form-check-input" onclick={|_| toggleDarkMode(true)} type="checkbox" id="darkModeToggle" checked={inDarkMode()}/>
+      <label class="form-check-label" for="darkModeToggle">{"Dark mode"}</label>
+    </div>
+  }
 }
 
 #[function_component(AppContainer)]
@@ -289,7 +302,6 @@ impl App {
                   if let Some((user_id, _)) = &self.user_info {
                     html! {
                       <div class="dropdown text-end">
-                        <input class="form-check-input" onclick={Callback::from(move |_| toggleDarkMode(true))} type="checkbox" id="darkModeToggle"/>
                         <a href="#"
                           class="d-block text-body text-decoration-none dropdown-toggle"
                           id="dropdownUser"
@@ -328,6 +340,7 @@ impl App {
                     }
                   } else { html!{} }
                 }
+                <DarkModeToggle />
               </div>
             </div>
           </header>
@@ -336,7 +349,7 @@ impl App {
 
     fn view_footer(&self) -> Html {
         html! {
-          <footer class="text-center text-muted fixed-bottom bg-light py-2">
+          <footer class="text-center fixed-bottom bg-light py-2">
             <div>
               <span>{format!("LLDAP version {}", env!("CARGO_PKG_VERSION"))}</span>
             </div>