I love javascript and javascript loves me

modules/frontend/html/graph.js

@@ -287,7 +287,7 @@ var cytostyle = [
         return nodelabel(ele);
       },
       color: function (ele) {
-        return getPreferredTheme() == "dark" ? "white" : "black";
+        return translateAutoTheme() == "dark" ? "white" : "black";
       },
       "background-width": "80%",
       "background-height": "80%",
@@ -297,7 +297,7 @@ var cytostyle = [
     selector: "node.target",
     style: {
       "border-color": function (ele) {
-        return getPreferredTheme() == "dark" ? "white" : "black";
+        return translateAutoTheme() == "dark" ? "white" : "black";
       },
       "border-width": 3,
     },
@@ -476,7 +476,7 @@ var cytostyle = [
       // "text-rotation": "autorotate",
       "text-justification": "center",
       color: function (ele) {
-        return getPreferredTheme() == "dark" ? "white" : "black";
+        return translateAutoTheme() == "dark" ? "white" : "black";
       },
       "curve-style": "straight",
       "target-arrow-shape": "triangle",
@@ -549,18 +549,18 @@ var cytostyle = [
     selector: "node:selected",
     style: {
       "background-color": function (ele) {
-        return getPreferredTheme() == "dark" ? "white" : "grey";
+        return translateAutoTheme() == "dark" ? "white" : "grey";
       },
     },
   },
   {
     selector: "edge:selected",
     style: {
       "target-arrow-color": function (ele) {
-        return getPreferredTheme() == "dark" ? "white" : "black";
+        return translateAutoTheme() == "dark" ? "white" : "black";
       },
       "line-color": function (ele) {
-        return getPreferredTheme() == "dark" ? "white" : "black";
+        return translateAutoTheme() == "dark" ? "white" : "black";
       },
       width: 8,
     },
@@ -1073,7 +1073,7 @@ function initgraph(data) {
 }
 
 function getEdgeColor(ele) {
-        color = getPreferredTheme() == "dark" ? "white" : "black";
+        color = translateAutoTheme() == "dark" ? "white" : "black";
         if (ele.data("methods").includes("MemberOfGroup")) {
           color = "orange";
         } else if (ele.data("methods").includes("MemberOfGroupIndirect")) {

modules/frontend/html/themes.js

@@ -1,15 +1,14 @@
-const getPreferredTheme = () => {
-    const storedTheme = getpref("theme", "auto");
-    if (storedTheme == "auto") {
-        // console.log("Auto detected theme");
-        // console.log(window.matchMedia("(prefers-color-scheme: dark)"));
+const translateAutoTheme = (theme) => {
+    if (theme == "auto") {
+        console.log("Auto detecting theme from browser: ");
+        console.log(window.matchMedia("(prefers-color-scheme: dark)"));
 
         return window.matchMedia("(prefers-color-scheme: dark)").matches
         ? "dark"
         : "light";
     }
 
-    return storedTheme;
+    return theme;
 };
 
 const setTheme = (theme) => {
@@ -20,22 +19,23 @@ const setTheme = (theme) => {
     }
 };
 
-// Init to the right one
-setTheme(getPreferredTheme());
-
-var lasttheme = getPreferredTheme(); // Store the last theme for comparison
+var lasttheme = ""; // Store the last theme for comparison
 
 // jquery ready
 $(document).ready(function () {
     $("input[name='theme']").on("change", function () {
         var selectedTheme = $("input[name='theme']:checked").val();
         console.log("theme is "+ selectedTheme+", was "+lasttheme);
         if (selectedTheme != lasttheme) {
-            console.log("theme changed");
-            setTheme(getPreferredTheme());
+            console.log("theme changed to "+ selectedTheme);
+            setTheme(translateAutoTheme(selectedTheme));
         }
 
         lasttheme = selectedTheme; // Update the last theme after setting it
     });
 });
 
+// Apply correct theme when preferences are loaded
+$(document).on("prefereces.loaded", function (evt) {
+  setTheme(translateAutoTheme(getpref("theme", "auto")));
+});