feat: dark ui when user prefers dark

Author: alekangelov

frontend/Cargo.toml

@@ -16,6 +16,16 @@ serde-json-wasm = "0.5"
 timeago = "0.4"
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
-web-sys = { version = "0.3", features = ["Event", "EventTarget", "NodeList", "HtmlLinkElement", "HtmlIFrameElement", "CssStyleDeclaration"] }
+web-sys = { version = "0.3", features = [
+  "Event",
+  "EventTarget",
+  "NodeList",
+  "HtmlLinkElement",
+  "HtmlIFrameElement",
+  "CssStyleDeclaration",
+  "DomTokenList",
+  "Element",
+  "HtmlElement",
+] }
 yew = "0.20"
 yew-hooks = "0.2"

frontend/img/dark-mode.svg

@@ -128,11 +128,19 @@ impl Component for Overview {
           <>
             <header>
               <h1>{"Mail"}<span>{"Crab"}</span></h1>
-              if !self.messages.is_empty() {
-                <button onclick={link.callback(|_| Msg::RemoveAll)}>
-                  {"Remove all"}<span>{"("}{self.messages.len()}{")"}</span>
+              <div>
+                <button class="no-trashcan" onclick={Callback::from(|_| {
+                    let body = web_sys::window().unwrap().document().unwrap().body().unwrap();
+                    body.class_list().toggle("body-invert").unwrap();
+                })}>
+                    {"Invert body"}
                 </button>
-              }
+                if !self.messages.is_empty() {
+                  <button onclick={link.callback(|_| Msg::RemoveAll)}>
+                    {"Remove all"}<span>{"("}{self.messages.len()}{")"}</span>
+                  </button>
+                }
+              </div>
             </header>
             if self.messages.is_empty() {
               <div class="empty">