feat(ui): add InputColor and custom theme

app/src/lib/graph-interface/edges/Edge.svelte

@@ -2,19 +2,19 @@
   import { colors } from '../graph/colors.svelte';
 
   const circleMaterial = new MeshBasicMaterial({
-    color: colors.connection.clone(),
+    color: colors.outline.clone(),
     toneMapped: false
   });
 
-  let lineColor = $state(colors.connection.clone().convertSRGBToLinear());
+  let lineColor = $state(colors.outline.clone().convertSRGBToLinear());
 
   $effect.root(() => {
     $effect(() => {
       if (appSettings.value.theme === undefined) {
         return;
       }
-      circleMaterial.color = colors.connection.clone().convertSRGBToLinear();
-      lineColor = colors.connection.clone().convertSRGBToLinear();
+      circleMaterial.color = colors.outline.clone().convertSRGBToLinear();
+      lineColor = colors.outline.clone().convertSRGBToLinear();
     });
   });
 

app/src/lib/graph-interface/node/Node.svelte

@@ -57,7 +57,7 @@
     uniforms={{
       uColorBright: { value: colors['layer-2'] },
       uColorDark: { value: colors['layer-1'] },
-      uStrokeColor: { value: colors.outline.clone() },
+      uStrokeColor: { value: colors['layer-2'] },
       uStrokeWidth: { value: 1.0 },
       uWidth: { value: 20 },
       uHeight: { value: height }

app/src/lib/graph-interface/node/NodeHeader.svelte

@@ -87,8 +87,6 @@
     width: 30px;
     z-index: 100;
     border-radius: 50%;
-    /* background: red; */
-    /* opacity: 0.2; */
   }
 
   .click-target:hover + svg path {
@@ -108,8 +106,10 @@
 
   svg path {
     stroke-width: 0.2px;
-    transition: d 0.3s ease, fill 0.3s ease;
-    fill: var(--color-layer-2);
+    transition:
+      d 0.3s ease,
+      fill 0.3s ease;
+    fill: var(--color-outline);
     stroke: var(--stroke);
     stroke-width: var(--stroke-width);
     d: var(--path);