feat: improve theme color consistency

app/src/lib/graph-interface/graph/colors.ts

@@ -0,0 +1,45 @@
+import { readable } from "svelte/store";
+import { Color } from "three";
+
+const variables = [
+  "layer-0",
+  "layer-1",
+  "layer-2",
+  "layer-3",
+  "outline",
+  "active",
+  "selected",
+  "edge",
+] as const;
+
+const store = Object.fromEntries(variables.map(v => [v, new Color()])) as Record<typeof variables[number], Color>;
+
+let lastStyle = "";
+
+function updateColors() {
+  if (!("getComputedStyle" in globalThis)) return;
+  const style = getComputedStyle(document.body);
+  let hash = "";
+  for (const v of variables) {
+    let color = style.getPropertyValue(`--${v}`);
+    hash += color;
+    store[v].setStyle(color);
+  }
+  if (hash === lastStyle) return;
+  lastStyle = hash;
+}
+
+updateColors();
+
+export const colors = readable(store, set => {
+
+  updateColors();
+  set(store);
+
+  window.onload = function () { updateColors(); set(store) };
+
+  document.body.addEventListener("transitionstart", () => {
+    updateColors();
+    set(store);
+  })
+});

app/src/lib/graph-interface/graph/stores.ts

@@ -10,63 +10,4 @@ export const hoveredSocket: Writable<Socket | null> = writable(null);
 export const possibleSockets: Writable<Socket[]> = writable([]);
 export const possibleSocketIds: Writable<Set<string> | null> = writable(null);
 
-export const colors = writable({
-  layer0: new Color().setStyle("#060606"),
-  layer1: new Color().setStyle("#171717"),
-  layer2: new Color().setStyle("#2D2D2D"),
-  layer3: new Color().setStyle("#A6A6A6"),
-  outline: new Color().setStyle("#000000"),
-  active: new Color().setStyle("#c65a19"),
-  selected: new Color().setStyle("#ffffff"),
-});
-
-if ("getComputedStyle" in globalThis) {
-
-  const body = document.body;
-
-  let lastStyle = "";
-
-  function updateColors() {
-
-    const style = getComputedStyle(body);
-    const layer0 = style.getPropertyValue("--layer-0");
-    const layer1 = style.getPropertyValue("--layer-1");
-    const layer2 = style.getPropertyValue("--layer-2");
-    const layer3 = style.getPropertyValue("--layer-3");
-    const outline = style.getPropertyValue("--outline");
-    const active = style.getPropertyValue("--active");
-    const selected = style.getPropertyValue("--selected");
-
-    const newStyle = `${layer0}${layer1}${layer2}${layer3}${outline}${active}${selected}`;
-
-    if (newStyle === lastStyle) return;
-    lastStyle = newStyle;
-
-    colors.update(col => {
-      col.layer0.setStyle(layer0);
-      col.layer0.convertLinearToSRGB();
-      col.layer1.setStyle(layer1);
-      col.layer1.convertLinearToSRGB();
-      col.layer2.setStyle(layer2);
-      col.layer2.convertLinearToSRGB();
-      col.layer3.setStyle(layer3);
-      col.layer3.convertLinearToSRGB();
-      col.outline.setStyle(outline);
-      col.outline.convertLinearToSRGB();
-      col.active.setStyle(active);
-      col.active.convertLinearToSRGB();
-      col.selected.setStyle(selected);
-      col.selected.convertLinearToSRGB();
-      return col;
-    });
-
-  }
-
-  updateColors();
-
-  window.onload = updateColors;
-
-  body.addEventListener("transitionstart", () => {
-    updateColors();
-  })
-}
+export { colors } from "./colors";