Move to css variables + persist dark mode settings

backend/Cargo.toml

@@ -24,7 +24,11 @@ tracing-subscriber = { version = "0.3", features = ["env-filter"] }
 uuid = { version = "1.2", features = ["v4", "serde"] }
 
 [dev-dependencies]
-lettre = { version = "0.10", default-features = false, features=["smtp-transport", "hostname", "builder"] }
+lettre = { version = "0.10", default-features = false, features=[
+    "builder",
+    "hostname",
+    "smtp-transport"
+] }
 fake = { version = "2.5", features=["derive"]}
 reqwest = { version = "0.11", features = ["json"] }
 local-ip-address = "0.5"

frontend/Cargo.toml

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

frontend/src/dark_mode.rs

@@ -0,0 +1,76 @@
+const DARK: &str = "dark";
+const LIGHT: &str = "light";
+const DARK_MODE_KEY: &str = "dark-mode";
+
+const BODY_INVERT_KEY: &str = "body-invert";
+const INVERT: &str = "invert";
+const NO_INVERT: &str = "no-invert";
+
+pub fn init_dark_mode() {
+    // fetch dark mode setting with media query, override with local storage
+    let local_storage = web_sys::window().unwrap().local_storage().unwrap().unwrap();
+    let dark_mode = match local_storage.get_item(DARK_MODE_KEY).unwrap().as_deref() {
+        Some(DARK) => true,
+        Some(LIGHT) => false,
+        _ => {
+            web_sys::window()
+                .unwrap()
+                .match_media("(prefers-color-scheme: dark)")
+                .unwrap()
+                .map(|l| l.matches())
+                == Some(true)
+        }
+    };
+
+    let body_invert = match local_storage.get_item(BODY_INVERT_KEY).unwrap().as_deref() {
+        Some(INVERT) => true,
+        _ => false,
+    };
+
+    let body = web_sys::window()
+        .unwrap()
+        .document()
+        .unwrap()
+        .body()
+        .unwrap();
+    body.class_list()
+        .add_1(if dark_mode { DARK } else { LIGHT })
+        .unwrap();
+    body.class_list()
+        .add_1(if body_invert { INVERT } else { NO_INVERT })
+        .unwrap();
+}
+
+pub fn toggle_dark_mode() {
+    let body = web_sys::window()
+        .unwrap()
+        .document()
+        .unwrap()
+        .body()
+        .unwrap();
+    let dark_mode = body.class_list().contains(DARK);
+    let new_mode = if dark_mode { LIGHT } else { DARK };
+
+    body.class_list().remove_2(DARK, LIGHT).unwrap();
+    body.class_list().add_1(new_mode).unwrap();
+
+    let local_storage = web_sys::window().unwrap().local_storage().unwrap().unwrap();
+    local_storage.set_item(DARK_MODE_KEY, new_mode).unwrap()
+}
+
+pub fn toggle_body_invert() {
+    let body = web_sys::window()
+        .unwrap()
+        .document()
+        .unwrap()
+        .body()
+        .unwrap();
+    let body_invert = body.class_list().contains(INVERT);
+    let new_mode = if body_invert { NO_INVERT } else { INVERT };
+
+    body.class_list().remove_2(NO_INVERT, INVERT).unwrap();
+    body.class_list().add_1(new_mode).unwrap();
+
+    let local_storage = web_sys::window().unwrap().local_storage().unwrap().unwrap();
+    local_storage.set_item(BODY_INVERT_KEY, new_mode).unwrap()
+}

frontend/src/main.rs

@@ -1,6 +1,7 @@
 use overview::Overview;
 
 mod api;
+mod dark_mode;
 mod formatted;
 mod list;
 mod message_header;

frontend/src/message_header.rs

@@ -1,5 +1,5 @@
-use crate::types::MailMessage;
-use yew::{function_component, html, html_nested, Html, Properties};
+use crate::{dark_mode::toggle_body_invert, types::MailMessage};
+use yew::{function_component, html, html_nested, Callback, Html, Properties};
 
 #[derive(Properties, Eq, PartialEq)]
 pub struct MessageHeaderProps {
@@ -68,7 +68,7 @@ pub fn view(props: &MessageHeaderProps) -> Html {
           </tr>
           </tbody>
         </table>
-        <div class="attachments">
+        <div class="actions">
           {message.attachments.iter().map(|a| {
             html! {
               <a
@@ -81,6 +81,11 @@ pub fn view(props: &MessageHeaderProps) -> Html {
               </a>
             }
           }).collect::<Html>()}
+          <button class="invert-body" onclick={Callback::from(|_| {
+            toggle_body_invert();
+          })}>
+              {"Invert body"}
+          </button>
         </div>
       </>
     }

frontend/src/overview.rs

@@ -5,6 +5,7 @@ use wasm_bindgen_futures::spawn_local;
 use yew::prelude::*;
 
 use crate::api::fetch_messages_metadata;
+use crate::dark_mode::{init_dark_mode, toggle_dark_mode};
 use crate::list::MessageList;
 use crate::types::{Action, MailMessageMetadata};
 use crate::view::ViewMessage;
@@ -58,6 +59,10 @@ impl Component for Overview {
             }
         });
 
+        spawn_local(async {
+            init_dark_mode();
+        });
+
         Self {
             messages: vec![],
             tab: Tab::Formatted,
@@ -129,17 +134,14 @@ impl Component for Overview {
             <header>
               <h1>{"Mail"}<span>{"Crab"}</span></h1>
               <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>
                 }
+                <button class="dark-mode" title="Toggle dark mode" onclick={Callback::from(|_| {
+                    toggle_dark_mode();
+                })} />
               </div>
             </header>
             if self.messages.is_empty() {