Use the default OS theme (dark or light)

diff --git a/backend/src/main.rs b/backend/src/main.rs
index 9ddbbbd..1c277c1 100644 (file)
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -130,7 +130,7 @@ async fn main() {
     let ron_api_routes = Router::new()
         // Disabled: update user profile is now made with a post data ('edit_user_post').
         // .route("/user/update", put(services::ron::update_user))
-        .route("/set_lang", put(services::ron::set_lang))
+        .route("/lang", put(services::ron::set_lang))
         .route("/recipe/titles", get(services::ron::recipe::get_titles))
         .route("/recipe/title", patch(services::ron::recipe::set_title))
         .route(

diff --git a/frontend/Cargo.toml b/frontend/Cargo.toml
index 5dc37f6..28ed385 100644 (file)
--- a/frontend/Cargo.toml
+++ b/frontend/Cargo.toml
@@ -40,6 +40,7 @@ web-sys = { version = "0.3", features = [
     "DomStringMap",
     "HtmlDocument",
     "HtmlElement",
+    "MediaQueryList",
     "HtmlDivElement",
     "HtmlLabelElement",
     "HtmlInputElement",

diff --git a/frontend/src/lib.rs b/frontend/src/lib.rs
index 034b586..4c6f71c 100644 (file)
--- a/frontend/src/lib.rs
+++ b/frontend/src/lib.rs
@@ -65,7 +65,7 @@ pub fn main() -> Result<(), JsValue> {
         let body = ron_api::SetLang { lang: lang.clone() };
         let location_without_lang = location_without_lang.clone();
         spawn_local(async move {
-            let _ = request::put::<(), _>("set_lang", body).await;
+            let _ = request::put::<(), _>("lang", body).await;
 
             window()
                 .location()
@@ -81,6 +81,15 @@ pub fn main() -> Result<(), JsValue> {
     .forget();
 
     // Dark/light theme handling.
+    if get_cookie_dark_theme().is_none()
+        && window()
+            .match_media("(prefers-color-scheme: dark)")
+            .map(|r| r.is_some())
+            .unwrap_or_default()
+    {
+        set_cookie_dark_theme(true);
+        window().location().reload().unwrap();
+    };
     let toggle_theme: HtmlInputElement = selector("#toggle-theme input");
     EventListener::new(&toggle_theme.clone(), "change", move |_event| {
         set_cookie_dark_theme(!toggle_theme.checked());
@@ -112,3 +121,22 @@ fn set_cookie_dark_theme(dark_theme: bool) {
 
 #[cfg(not(target_arch = "wasm32"))]
 fn set_cookie_dark_theme(_dark_theme: bool) {}
+
+#[cfg(target_arch = "wasm32")]
+fn get_cookie_dark_theme() -> Option<bool> {
+    wasm_cookies::get(common::consts::COOKIE_DARK_THEME).map(|value| match value {
+        Ok(str) => match str.parse() {
+            Ok(v) => v,
+            Err(_) => {
+                set_cookie_dark_theme(false);
+                false
+            }
+        },
+        Err(_) => false,
+    })
+}
+
+#[cfg(not(target_arch = "wasm32"))]
+fn get_cookie_dark_theme() -> Option<bool> {
+    Some(false)
+}