diff --git a/web/gui/src/main/webapp/app/fw/svg/svgUtil.js b/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
index f8e954d..792973e 100644
--- a/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
+++ b/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
@@ -140,9 +140,8 @@
             var lightNorm = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'],
                 lightMute = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'],
 
-                // let's try slightly brigher colors for dark normal..
-                darkNorm  = ['#364D7F', '#7F5236', '#A93114', '#018D61', '#7E116D', '#02747A', '#378300'],
-                darkMute  = ['#1B2645', '#432B1C', '#76220E', '#035433', '#560B4A', '#013A3E', '#2D6D00'];
+                darkNorm  = ['#304860', '#664631', '#a8391b', '#00754b', '#77206d', '#005959', '#428700'],
+                darkMute  = ['#16203A', '#281810', '#4F1206', '#00331C', '#3D063A', '#002D2D', '#1B4400'];
 
             var colors= {
                 light: {
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index c313d08..48f60a5 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -128,15 +128,28 @@
 }
 
 #topo-p-instance svg rect {
-    fill: #ccc;
-    stroke: #aaa;
     stroke-width: 3.5;
 }
 #topo-p-instance .online svg rect {
     opacity: 1;
+}
+.light #topo-p-instance svg rect {
+    fill: #ccc;
+    stroke: #aaa;
+}
+.light #topo-p-instance .online svg rect {
     fill: #9cf;
     stroke: #555;
 }
+.dark #topo-p-instance svg rect {
+    fill: #666;
+    stroke: #222;
+}
+.dark #topo-p-instance .online svg rect {
+    fill: #9cf;
+    stroke: #999;
+}
+
 
 #topo-p-instance svg .glyph {
     fill: #888;
@@ -147,21 +160,45 @@
 }
 
 #topo-p-instance svg .badgeIcon {
-    fill: #777;
     fill-rule: evenodd;
+    opacity: 0.4;
+}
+.light #topo-p-instance svg .badgeIcon {
+    fill: #777;
+}
+.dark #topo-p-instance svg .badgeIcon {
+    fill: #555;
 }
 
 #topo-p-instance .online svg .badgeIcon {
+    opacity: 1.0;
+}
+.light #topo-p-instance .online svg .badgeIcon {
+    fill: #fff;
+}
+.dark #topo-p-instance .online svg .badgeIcon {
     fill: #fff;
 }
 
 #topo-p-instance svg text {
     text-anchor: middle;
-    fill: #777;
+    opacity: 0.3;
 }
 #topo-p-instance .online svg text {
+    opacity: 1.0;
+}
+.light #topo-p-instance svg text {
+    fill: #444;
+}
+.light #topo-p-instance .online svg text {
     fill: #eee;
 }
+.dark #topo-p-instance svg text {
+    fill: #aaa;
+}
+.dark #topo-p-instance .online svg text {
+    fill: #ccc;
+}
 
 #topo-p-instance svg text.instTitle {
     font-size: 11pt;