forcegraph: new, dark color theme

lib/forcegraph.js

@@ -309,13 +309,18 @@ define(["d3"], function (d3) {
         }
       })
 
-      ctx.fillStyle = "#99173C"
+      var clientColor = "#E6324B"
+      var hilightColor = "#FA940F"
+      var unknownColor = "#353634"
+      var nodeColor = "#F2E3C6"
+
+      ctx.fillStyle = clientColor
       ctx.fill()
 
       if (highlightedLinks.length) {
         ctx.save()
         ctx.lineWidth = 10
-        ctx.strokeStyle = "#F2AB38"
+        ctx.strokeStyle = hilightColor
 
         highlightedLinks.forEach(function (d) {
           ctx.beginPath()
@@ -351,7 +356,7 @@ define(["d3"], function (d3) {
         ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI)
       })
 
-      ctx.fillStyle = "#555152"
+      ctx.fillStyle = unknownColor
 
       ctx.fill()
 
@@ -361,14 +366,14 @@ define(["d3"], function (d3) {
         ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI)
       })
 
-      ctx.fillStyle = "#EFFFCD"
+      ctx.fillStyle = nodeColor
 
       ctx.fill()
 
       if (highlightedNodes.length) {
         ctx.save()
-        ctx.strokeStyle = "#F2AB38"
-        ctx.fillStyle = "#EFFFCD"
+        ctx.strokeStyle = hilightColor
+        ctx.fillStyle = nodeColor
         ctx.lineWidth = 6
 
         highlightedNodes.forEach(function (d) {
@@ -564,7 +569,7 @@ define(["d3"], function (d3) {
         e.target = newNodesDict[d.target.id]
 
         if (d.vpn)
-          e.color = "rgba(170, 162, 164, " + (0.6 / d.tq) + ")"
+          e.color = "rgba(255, 255, 255, " + (0.6 / d.tq) + ")"
         else
           e.color = linkScale(d.tq).hex()
 
@@ -597,8 +602,8 @@ define(["d3"], function (d3) {
         bctx.textAlign = "center"
         bctx.lineWidth = lineWidth
         bctx.lineCap = "round"
-        bctx.strokeStyle = "rgba(85, 81, 82, 0.03)"
-        bctx.fillStyle = "rgba(220, 233, 190, 0.8)"
+        bctx.strokeStyle = "rgba(53, 54, 52, 0.1)"
+        bctx.fillStyle = "rgba(242, 227, 198, 0.8)"
         bctx.miterLimit = 2
         bctx.strokeText(name, buffer.width / (2 * scale), buffer.height / (2 * scale))
         bctx.fillText(name, buffer.width / (2 * scale), buffer.height / (2 * scale))

lib/gui.js

@@ -11,7 +11,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
     var content
     var contentDiv
 
-    var linkScale = chroma.scale(chroma.interpolate.bezier(["green", "yellow", "red"])).domain([1, 5])
+    var linkScale = chroma.scale(chroma.interpolate.bezier(["#04C714", "#FF5500", "#F02311"])).domain([1, 5])
     var sidebar
 
     var buttons = document.createElement("div")

scss/_forcegraph.scss

@@ -1,7 +1,7 @@
 .graph {
   height: 100%;
   width: 100%;
-  background: #2E2633;
+  background: #2B2B2B;
 
   canvas {
     display: block;