feat: add theming support

app/src/lib/graph-interface/graph/Graph.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
   import { animate, lerp, snapToGrid } from "../helpers/index.js";
-  import { LinearSRGBColorSpace } from "three";
+  import {
+    LinearSRGBColorSpace,
+    LinearToneMapping,
+    NoToneMapping,
+    SRGBColorSpace,
+  } from "three";
   import { Canvas } from "@threlte/core";
   import type { OrthographicCamera } from "three";
   import Background from "../background/Background.svelte";
@@ -750,12 +755,7 @@
   on:keydown={handleKeyDown}
   on:mousedown={handleMouseDown}
 >
-  <Canvas
-    shadows={false}
-    renderMode="on-demand"
-    colorManagementEnabled={false}
-    colorSpace={LinearSRGBColorSpace}
-  >
+  <Canvas shadows={false} renderMode="on-demand" colorManagementEnabled={false}>
     <Camera bind:camera position={cameraPosition} />
 
     <Background {cameraPosition} {maxZoom} {minZoom} {width} {height} />

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

@@ -11,9 +11,11 @@ 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")
+  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"),
 });
 
 if ("getComputedStyle" in globalThis) {
@@ -23,19 +25,32 @@ if ("getComputedStyle" in globalThis) {
   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");
+    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");
 
     colors.update(col => {
-      col.backgroundColorDarker.setStyle(backgroundColorDarker);
-      col.backgroundColor.setStyle(backgroundColor);
-      col.backgroundColorLighter.setStyle(backgroundColorLighter);
+      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();
       return col;
     });
 
   }
 
+  updateColors();
+
+  window.onload = updateColors;
+
   body.addEventListener("transitionstart", () => {
     updateColors();
   })