dark mode client side + core style

* dark mode is now handle client side
* update core card style

src/ui/main.py

@@ -379,11 +379,9 @@ def error_message(msg: str):
 @app.context_processor
 def inject_variables():
     metadata = db.get_metadata()
-    ui_data = get_ui_data()
 
     # check that is value is in tuple
     return dict(
-        dark_mode=ui_data.get("DARK_MODE", False),
         script_nonce=app.config["SCRIPT_NONCE"],
         is_pro_version=metadata["is_pro"],
         pro_status=metadata["pro_status"],
@@ -2159,23 +2157,6 @@ def login():
     return render_template("login.html", **kwargs), 401 if fail else 200
 
 
-@app.route("/darkmode", methods=["POST"])
-@login_required
-def darkmode():
-    if not request.is_json:
-        return jsonify({"status": "ko", "message": "invalid request"}), 400
-
-    if "darkmode" in request.json:
-        ui_data = get_ui_data()
-        ui_data["DARK_MODE"] = request.json["darkmode"] == "true"
-        with LOCK:
-            TMP_DATA_FILE.write_text(dumps(ui_data), encoding="utf-8")
-    else:
-        return jsonify({"status": "ko", "message": "darkmode is required"}), 422
-
-    return jsonify({"status": "ok"}), 200
-
-
 @app.route("/check_reloading")
 @login_required
 def check_reloading():

src/ui/static/js/global.js

@@ -205,10 +205,35 @@ class darkMode {
     this.darkToggleEl = document.querySelector("[data-dark-toggle]");
     this.darkToggleLabel = document.querySelector("[data-dark-toggle-label]");
     this.csrf = document.querySelector("input#csrf_token");
+    this.darkMode = false;
     this.init();
   }
 
   init() {
+    // Retrieve dark mode from session storage
+    if (sessionStorage.getItem("mode")) {
+      this.darkMode = sessionStorage.getItem("mode") === "dark" ? true : false;
+    } else if (
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    ) {
+      // dark mode
+      this.darkMode = true;
+      sessionStorage.setItem("mode", "dark");
+    } else {
+      this.darkMode = false;
+      sessionStorage.setItem("mode", "light");
+    }
+
+    // Set dark mode
+    if (this.darkMode && !this.htmlEl.classList.contains("dark")) {
+      this.darkToggleEl.checked = true;
+      this.toggle();
+    }
+
+    console.log(sessionStorage.getItem("mode"));
+
+    // Handle switch
     this.darkToggleEl.addEventListener("change", (e) => {
       this.toggle();
       this.saveMode();
@@ -216,27 +241,15 @@ class darkMode {
   }
 
   toggle() {
-    document.querySelector("html").classList.toggle("dark");
+    this.htmlEl.classList.toggle("dark");
     this.darkToggleLabel.textContent = this.darkToggleEl.checked
       ? "dark mode"
       : "light mode";
   }
 
   async saveMode() {
-    const isDark = this.darkToggleEl.checked ? "true" : "false";
-    const data = {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-        "X-CSRF-Token": this.csrf.value,
-      },
-      body: JSON.stringify({ darkmode: isDark }),
-    };
-    const send = await fetch(
-      document.querySelector("[data-mode-link]").getAttribute("data-mode-link"),
-      data,
-    );
+    const mode = this.darkToggleEl.checked ? "dark" : "light";
+    sessionStorage.setItem("mode", mode);
   }
 }
 

src/ui/static/js/services.js

@@ -159,8 +159,7 @@ class SettingsService {
               .click();
           }
         }
-      } catch (err) {
-      }
+      } catch (err) {}
       // security level
       try {
         if (
@@ -246,8 +245,7 @@ class SettingsService {
             true,
           );
         }
-      } catch (err) {
-      }
+      } catch (err) {}
     });
   }
 }
@@ -322,8 +320,7 @@ class ServiceModal {
           //set form info and right form
           this.setFormModal(e.target);
         }
-      } catch (err) {
-      }
+      } catch (err) {}
     });
   }
 

src/ui/static/js/utils/settings.js

@@ -1691,7 +1691,7 @@ class SettingsMultiple extends Settings {
     );
 
     // Get all elemennts by attribute to update _SCHEMA by suffix
-    const attributs = [
+    const attributes = [
       "data-setting-container",
       "id",
       "data-invalid",
@@ -1701,7 +1701,7 @@ class SettingsMultiple extends Settings {
       "name",
     ];
 
-    attributs.forEach((att) => {
+    attributes.forEach((att) => {
       const attEls = schemaCtnrClone.querySelectorAll(`[${att}]`);
       attEls.forEach((attEl) => {
         attEl.setAttribute(
@@ -1855,7 +1855,7 @@ class SettingsEditor extends SettingsMultiple {
       .getAttribute("data-editor-container")
       .replace("_SCHEMA", "");
     const containerClone = container.cloneNode(true);
-    // update attributs
+    // update attributes
     containerClone.setAttribute("data-editor-container", `${contName}_${num}`);
     const editor = containerClone.querySelector(`[data-editor]`);
     if (editor) {

src/ui/styles.css

@@ -311,7 +311,7 @@
 }
 
 .core-card-deactivated-svg {
-  @apply leading-none text-lg relative fill-yellow-500 stroke-white;
+  @apply leading-none text-lg relative fill-yellow-500 stroke-white -translate-y-[8px];
 }
 
 .core-card-text-container {

src/ui/templates/base.html

@@ -1,6 +1,6 @@
 {% set template_data = {"javascript": ""} %}
 <!DOCTYPE html>
-<html class="{% if dark_mode == True %}dark {% endif %}" lang="en">
+<html lang="en">
     {% include "head.html" %}
     <body class="overflow-x-hidden h-full font-sans z-100 m-0 text-base antialiased font-normal dark:bg-slate-900 leading-default bg-primary text-slate-500">
         <noscript class="relative w-full p-4 text-white bg-yellow-500 rounded-lg">Your browser does not support JavaScript!</noscript>

src/ui/templates/menu.html

@@ -241,24 +241,15 @@
     <div class="flex flex-col justify-end mx-4 mt-2 mb-4">
         <!-- dark/light mode -->
         <div class="min-h-6 ml-12 my-4 flex justify-start">
-            <input type="hidden"
-                   id="csrf_token"
-                   name="csrf_token"
-                   value="{{ csrf_token() }}" />
-            <input {% if dark_mode == True %}checked{% endif %}
+            <input
                    id="darkMode"
                    data-dark-toggle
-                   data-mode-link="{{ url_for('darkmode') }}"
                    class="dark:brightness-125 hover:brightness-75 rounded-10 duration-300 ease-in-out after:rounded-circle after:shadow-2xl after:duration-300 checked:after:translate-x-5.3 h-5 mt-0.5 relative float-left w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-primary checked:bg-primary checked:bg-none checked:bg-right"
                    type="checkbox" />
             <label for="darkMode"
                    data-dark-toggle-label
                    class="dark:text-gray-200 transition inline-block pl-3 mb-0 ml-0 font-normal cursor-pointer select-none text-sm text-slate-700">
-                {% if dark_mode == True %}
-                    dark mode
-                {% else %}
                     light mode
-                {% endif %}
             </label>
         </div>
         <!-- end dark/light mode -->