feat: add outline to themes

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

@@ -6,12 +6,8 @@ uniform float uHeight;
 
 uniform vec3 uColorDark;
 uniform vec3 uColorBright;
-uniform vec3 uSelectedColor;
-uniform vec3 uActiveColor;
-
-uniform bool uSelected;
-uniform bool uActive;
 
+uniform vec3 uStrokeColor;
 uniform float uStrokeWidth;
 
 float msign(in float x) { return (x < 0.0) ? -1.0 : 1.0; }
@@ -47,16 +43,9 @@ void main(){
     // outside
     gl_FragColor = vec4(0.0,0.0,0.0, 0.0);
   }else{
-
     if (distance.w > -uStrokeWidth || mod(y+5.0, 10.0) < uStrokeWidth/2.0) {
       // draw the outer stroke
-      if (uSelected) {
-        gl_FragColor = vec4(uSelectedColor, 1.0);
-      } else if (uActive) {
-        gl_FragColor = vec4(uActiveColor, 1.0);
-      } else {
-        gl_FragColor = vec4(uColorBright, 1.0);
-      }
+      gl_FragColor = vec4(uStrokeColor, 1.0);
     }else if (y<5.0){
       // draw the header
       gl_FragColor = vec4(uColorBright, 1.0);

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

@@ -67,18 +67,18 @@
     uniforms={{
       uColorBright: { value: new Color("#171717") },
       uColorDark: { value: new Color("#151515") },
-      uSelectedColor: { value: new Color("#9d5f28") },
-      uActiveColor: { value: new Color("white") },
-      uSelected: { value: false },
-      uActive: { value: false },
+      uStrokeColor: { value: new Color("#9d5f28") },
       uStrokeWidth: { value: 1.0 },
       uWidth: { value: 20 },
       uHeight: { value: height },
     }}
-    uniforms.uSelected.value={isSelected}
-    uniforms.uActive.value={isActive}
     uniforms.uColorBright.value={$colors.layer2}
     uniforms.uColorDark.value={$colors.layer1}
+    uniforms.uStrokeColor.value={isSelected
+      ? $colors.selected
+      : isActive
+        ? $colors.active
+        : $colors.outline}
     uniforms.uStrokeWidth.value={(7 - z) / 3}
   />
 </T.Mesh>
@@ -122,12 +122,12 @@
   }
 
   .node.active {
-    --stroke: white;
-    --stroke-width: 1px;
+    --stroke: var(--active);
+    --stroke-width: 2px;
   }
 
   .node.selected {
-    --stroke: #9d5f28;
-    --stroke-width: 1px;
+    --stroke: var(--selected);
+    --stroke-width: 2px;
   }
 </style>