feat: add theming basics

frontend/src/lib/components/graph/stores.ts

@@ -1,5 +1,7 @@
-import type { Node, Socket } from "$lib/types";
+import { browser } from "$app/environment";
+import type { Socket } from "$lib/types";
 import { writable, type Writable } from "svelte/store";
+import { Color } from "three";
 
 export const activeNodeId: Writable<number> = writable(-1);
 export const selectedNodes: Writable<Set<number> | null> = writable(null);
@@ -8,3 +10,41 @@ export const activeSocket: Writable<Socket | null> = writable(null);
 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({
+  backgroundColorDarker: new Color().setStyle("#101010"),
+  backgroundColor: new Color().setStyle("#151515"),
+  backgroundColorLighter: new Color().setStyle("#202020")
+});
+
+if (browser) {
+
+  const body = document.body;
+
+  function updateColors() {
+
+    const style = getComputedStyle(body);
+    const backgroundColorDarker = style.getPropertyValue("--background-color-darker");
+    const backgroundColor = style.getPropertyValue("--background-color");
+    const backgroundColorLighter = style.getPropertyValue("--background-color-lighter");
+
+    colors.update(col => {
+      col.backgroundColorDarker.setStyle(backgroundColorDarker);
+      col.backgroundColor.setStyle(backgroundColor);
+      col.backgroundColorLighter.setStyle(backgroundColorLighter);
+      return col;
+    });
+
+  }
+
+
+  globalThis["updateColors"] = updateColors;
+
+  body.addEventListener("transitionstart", () => {
+    updateColors();
+  })
+  window.onload = () => {
+    updateColors();
+  }
+}