app: Implement dark theme and toggle

app/index.html

@@ -6,15 +6,19 @@
     <title>LLDAP Administration</title>
     <script src="/static/main.js" type="module" defer></script>
     <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightshade.min.css"
       rel="preload stylesheet"
-      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
+      integrity="sha384-CvItGYrXmque42UjYhp+bjRR8tgQz78Nlwk42gYsNzBc6y0DuXNtdUaRzr1cl2uK"
       crossorigin="anonymous"
       as="style" />
     <script
       src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
       crossorigin="anonymous"></script>
+      <script 
+      src="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/js/darkmode.min.js" 
+      integrity="sha384-A4SLs39X/aUfwRclRaXvNeXNBTLZdnZdHhhteqbYFS2jZTRD79tKeFeBn7SGXNpi"
+      crossorigin="anonymous"></script>
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
@@ -30,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

@@ -6,13 +6,16 @@
     <title>LLDAP Administration</title>
     <script src="/static/main.js" type="module" defer></script>
     <link
-      href="/static/bootstrap.min.css"
+      href="/static/bootstrap-nightshade.min.css"
       rel="preload stylesheet"
-      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
+      integrity="sha384-CvItGYrXmque42UjYhp+bjRR8tgQz78Nlwk42gYsNzBc6y0DuXNtdUaRzr1cl2uK"
       as="style" />
     <script
       src="/static/bootstrap.bundle.min.js"
       integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"></script>
+    <script 
+    src="/static/darkmode.min.js" 
+    integrity="sha384-A4SLs39X/aUfwRclRaXvNeXNBTLZdnZdHhhteqbYFS2jZTRD79tKeFeBn7SGXNpi"></script>
     <link
       rel="stylesheet"
       href="/static/bootstrap-icons.css"
@@ -28,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

@@ -17,6 +17,7 @@ use crate::{
 };
 
 use gloo_console::error;
+use wasm_bindgen::prelude::*;
 use yew::{
     function_component,
     html::Scope,
@@ -29,6 +30,25 @@ use yew_router::{
     BrowserRouter, Switch,
 };
 
+#[wasm_bindgen]
+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)]
 pub fn app_container() -> Html {
     html! {
@@ -242,7 +262,7 @@ impl App {
           <header class="p-2 mb-3 border-bottom">
             <div class="container">
               <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
-                <a href="/" class="d-flex align-items-center mt-2 mb-lg-0 me-md-5 text-dark text-decoration-none">
+                <a href="/" class="d-flex align-items-center mt-2 mb-lg-0 me-md-5 text-decoration-none">
                   <h2>{"LLDAP"}</h2>
                 </a>
 
@@ -251,7 +271,7 @@ impl App {
                     <>
                       <li>
                         <Link
-                          classes="nav-link px-2 link-dark h6"
+                          classes="nav-link px-2 h6"
                           to={AppRoute::ListUsers}>
                           <i class="bi-people me-2"></i>
                           {"Users"}
@@ -259,7 +279,7 @@ impl App {
                       </li>
                       <li>
                         <Link
-                          classes="nav-link px-2 link-dark h6"
+                          classes="nav-link px-2 h6"
                           to={AppRoute::ListGroups}>
                           <i class="bi-collection me-2"></i>
                           {"Groups"}
@@ -269,6 +289,7 @@ impl App {
                   } } else { html!{} } }
                 </ul>
                 { self.view_user_menu(ctx) }
+                <DarkModeToggle />
               </div>
             </div>
           </header>
@@ -281,7 +302,7 @@ impl App {
             html! {
               <div class="dropdown text-end">
                 <a href="#"
-                  class="d-block link-dark text-decoration-none dropdown-toggle"
+                  class="d-block nav-link text-decoration-none dropdown-toggle"
                   id="dropdownUser"
                   data-bs-toggle="dropdown"
                   aria-expanded="false">
@@ -323,7 +344,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 text-muted bg-light py-2">
             <div>
               <span>{format!("LLDAP version {}", env!("CARGO_PKG_VERSION"))}</span>
             </div>

app/static/libraries.txt

@@ -1,4 +1,5 @@
-https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css
+https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightshade.min.css
+https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/js/darkmode.min.js
 https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js
 https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css
 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

app/static/style.css

@@ -10,3 +10,23 @@ header h2 {
   font-weight: 700;
   text-decoration: none;
 }
+
+html.dark .bg-light {
+  background-color: rgba(59,59,59,1) !important;
+}
+
+html.dark a {
+  color: #e1e1e1
+}
+
+a {
+  color: #212529
+}
+
+html.dark .nav-link {
+  color: #e1e1e1
+}
+
+.nav-link {
+  color: #212529
+}