From bb0f26756aa25d323fab282a418d66fa289ebb9c Mon Sep 17 00:00:00 2001
From: Simon Hunt <simon@onlab.us>
Date: Tue, 28 Mar 2017 18:52:59 -0700
Subject: [PATCH] Re-instating the DARK theme.

Change-Id: Ic499b4991e41747cc9472838397e5e57cd4ad089
---
 .../main/webapp/app/fw/layer/dialog-theme.css |   9 +-
 .../main/webapp/app/fw/layer/flash-theme.css  |  19 +-
 .../main/webapp/app/fw/layer/panel-theme.css  |  43 ++-
 .../main/webapp/app/fw/mast/mast-theme.css    |  48 +---
 .../src/main/webapp/app/fw/nav/nav-theme.css  |  26 +-
 .../src/main/webapp/app/fw/svg/icon-theme.css |  41 +--
 .../main/webapp/app/fw/svg/sprite-theme.css   |  45 ++-
 web/gui/src/main/webapp/app/fw/svg/svgUtil.js |  19 +-
 .../webapp/app/fw/widget/button-theme.css     |  55 +++-
 .../main/webapp/app/fw/widget/table-theme.css | 100 +++++--
 .../webapp/app/fw/widget/toolbar-theme.css    |  30 +-
 .../webapp/app/fw/widget/tooltip-theme.css    |   7 +-
 web/gui/src/main/webapp/app/onos-theme.css    |  48 +++-
 web/gui/src/main/webapp/app/onos.css          |  14 -
 .../main/webapp/app/view/app/app-theme.css    |  68 ++---
 .../webapp/app/view/device/device-theme.css   |  23 +-
 .../main/webapp/app/view/flow/flow-theme.css  |  44 +--
 .../src/main/webapp/app/view/flow/flow.html   |   2 +-
 .../webapp/app/view/group/group-theme.css     |  27 +-
 .../webapp/app/view/intent/intent-theme.css   |  44 +--
 .../webapp/app/view/meter/meter-theme.css     |  27 +-
 .../app/view/processor/processor-theme.css    |  33 ---
 .../settings-theme.css}                       |  17 +-
 .../main/webapp/app/view/topo/topo-theme.css  | 257 +++++++++++++++++-
 web/gui/src/main/webapp/index.html            |   3 +-
 .../webapp/tests/app/fw/svg/svgUtil-spec.js   |  28 +-
 26 files changed, 709 insertions(+), 368 deletions(-)
 delete mode 100644 web/gui/src/main/webapp/app/view/processor/processor-theme.css
 rename web/gui/src/main/webapp/app/view/{port/port-theme.css => settings/settings-theme.css} (65%)

diff --git a/web/gui/src/main/webapp/app/fw/layer/dialog-theme.css b/web/gui/src/main/webapp/app/fw/layer/dialog-theme.css
index 213b7fa2d5..23626d061c 100644
--- a/web/gui/src/main/webapp/app/fw/layer/dialog-theme.css
+++ b/web/gui/src/main/webapp/app/fw/layer/dialog-theme.css
@@ -22,8 +22,11 @@
     background-color: #518ecc;
     color: white;
 }
+
+
+/* ========== DARK Theme ========== */
+
 .dark .dialog .dialog-button {
-    /* TODO: dark theme */
-    background-color: #518ecc;
-    color: white;
+    background-color: #345e85;
+    color: #cccccd;
 }
diff --git a/web/gui/src/main/webapp/app/fw/layer/flash-theme.css b/web/gui/src/main/webapp/app/fw/layer/flash-theme.css
index 30fe6d5ec6..3f271fdcf2 100644
--- a/web/gui/src/main/webapp/app/fw/layer/flash-theme.css
+++ b/web/gui/src/main/webapp/app/fw/layer/flash-theme.css
@@ -21,22 +21,27 @@
 .light #flash svg g.flashItem rect {
     fill: #ccc;
 }
-.dark #flash svg g.flashItem rect {
-    fill: #555;
-}
 
 .light #flash svg g.flashItem text {
     fill: #333;
 }
-.dark #flash svg g.flashItem text {
-    fill: #999;
-}
 
 .light .centered {
     box-shadow: 2px 2px 24px 5px #888;
     background-color: #eee;
 }
-/* TODO: confirm / fix dark*/
+
+
+/* ========== DARK Theme ========== */
+
+.dark #flash svg g.flashItem rect {
+    fill: #555;
+}
+
+.dark #flash svg g.flashItem text {
+    fill: #999;
+}
+
 .dark .centered {
     box-shadow: 2px 2px 24px 5px #888;
     background-color: #eee;
diff --git a/web/gui/src/main/webapp/app/fw/layer/panel-theme.css b/web/gui/src/main/webapp/app/fw/layer/panel-theme.css
index 3e966ae946..a9d7888999 100644
--- a/web/gui/src/main/webapp/app/fw/layer/panel-theme.css
+++ b/web/gui/src/main/webapp/app/fw/layer/panel-theme.css
@@ -23,9 +23,44 @@
     color: #3c3a3a;
     border: 1px solid #c7c7c0;
 }
-.dark .floatpanel {
-    /* TODO: dark theme */
-    background-color: white;
-    color: #3c3a3a;
+
+.light .floatpanel hr {
     border: 1px solid #c7c7c0;
 }
+
+.light .floatpanel .bottom tr:nth-child(odd) {
+    background-color: #f4f4f4;
+}
+
+.light .floatpanel .bottom tr:nth-child(even) {
+    background-color: #fbfbfb;
+}
+
+
+/* ========== DARK Theme ========== */
+
+.dark .floatpanel {
+    background-color: #282528;
+    color: #888c8c;
+    border: 1px solid #364144;
+}
+
+.dark .floatpanel th {
+    background-color: #242424;
+}
+
+.dark .floatpanel h2 {
+    color: #dddddd;
+}
+
+.dark .floatpanel hr {
+    border: 1px solid #30303a;
+}
+
+.dark .floatpanel .bottom tr:nth-child(odd) {
+    background-color: #333333;
+}
+
+.dark .floatpanel .bottom tr:nth-child(even) {
+    background-color: #3a3a3a;
+}
diff --git a/web/gui/src/main/webapp/app/fw/mast/mast-theme.css b/web/gui/src/main/webapp/app/fw/mast/mast-theme.css
index 8c63778d66..2ea3aec619 100644
--- a/web/gui/src/main/webapp/app/fw/mast/mast-theme.css
+++ b/web/gui/src/main/webapp/app/fw/mast/mast-theme.css
@@ -18,68 +18,34 @@
  ONOS GUI -- Masthead (theme) -- CSS file
  */
 
-.light #mast {
-    background-color: #231f20;
-}
-.dark #mast {
-    /* TODO: dark theme */
+#mast {
     background-color: #231f20;
 }
 
-
-.light #mast .nav-menu-button:hover {
-    background-color: #888;
-}
-.dark #mast .nav-menu-button:hover {
+#mast .nav-menu-button:hover {
     background-color: #888;
 }
 
-
-.light #mast-right a {
-    color: #009fdb;
-}
-.dark #mast-right a {
-    /* TODO: dark theme */
+#mast-right a {
     color: #009fdb;
 }
 
-.light #mast nav  {
+#mast nav  {
     color: #009fdb;
 }
 
-.dark #mast nav  {
-    /* TODO: dark theme */
-    color: #009fdb;
-}
-
-
 /* Theme styles for drop down menu */
 
-.light #mast .dropdown {
-    background-color: #231f20;
-    border: 1px solid #dddddd;
-}
-.dark #mast .dropdown {
-    /* TODO: dark theme */
+#mast .dropdown {
     background-color: #231f20;
     border: 1px solid #dddddd;
 }
 
-.light #mast .dropdown a {
-    color: #009fdb;
-    border-bottom: solid #444 1px;
-}
-.dark #mast .dropdown a {
-    /* TODO: dark theme */
+#mast .dropdown a {
     color: #009fdb;
     border-bottom: solid #444 1px;
 }
 
-.light #mast .dropdown a:hover {
-    color: #fff;
-}
-
-.dark #mast .dropdown a:hover {
-    /* TODO: dark theme */
+#mast .dropdown a:hover {
     color: #fff;
 }
diff --git a/web/gui/src/main/webapp/app/fw/nav/nav-theme.css b/web/gui/src/main/webapp/app/fw/nav/nav-theme.css
index 8d22fd0e9a..dc0d300d49 100644
--- a/web/gui/src/main/webapp/app/fw/nav/nav-theme.css
+++ b/web/gui/src/main/webapp/app/fw/nav/nav-theme.css
@@ -18,39 +18,21 @@
  ONOS GUI -- Navigation (theme) -- CSS file
  */
 
-.light #nav {
-    background-color: #231f20;
-}
-.dark #nav {
-    /* TODO: dark theme */
+#nav {
     background-color: #231f20;
 }
 
-.light #nav .nav-hdr {
-    color: #716b6a;
-    background-color: #3c3a3a;
-}
-.dark #nav .nav-hdr {
-    /* TODO: dark theme */
+#nav .nav-hdr {
     color: #716b6a;
     background-color: #3c3a3a;
 }
 
-.light #nav a {
-    color: #c7c7c0;
-    border-bottom: solid #3c3a3a 1px;
-}
-.dark #nav a {
-    /* TODO: dark theme */
+#nav a {
     color: #c7c7c0;
     border-bottom: solid #3c3a3a 1px;
 }
 
-.light #nav a:hover {
-    color: #ffffff;
-}
-.dark #nav a:hover {
-    /* TODO: dark theme */
+#nav a:hover {
     color: #ffffff;
 }
 
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon-theme.css b/web/gui/src/main/webapp/app/fw/svg/icon-theme.css
index 74e1654560..2dd501c95b 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon-theme.css
+++ b/web/gui/src/main/webapp/app/fw/svg/icon-theme.css
@@ -21,44 +21,45 @@
 .light div.close-btn svg.embeddedIcon g.icon .glyph {
     fill: #333333;
 }
-.dark div.close-btn svg.embeddedIcon g.icon .glyph {
-    /* TODO: dark theme */
-    fill: #333333;
-}
-
 
 /* Sortable table headers */
 .light div.tableColSort svg.embeddedIcon .icon .glyph {
     fill: #353333;
 }
-.dark div.tableColSort svg.embeddedIcon .icon .glyph {
-    /* TODO: dark theme */
-    fill: #353333;
-}
 
 /* active / inactive (check/xmark) icons */
 .light svg.embeddedIcon .icon.active .glyph {
     fill: #04bf34;
 }
-.dark svg.embeddedIcon .icon.active .glyph {
-    /* TODO: dark theme */
-    fill: #04bf34;
-}
 
 .light svg.embeddedIcon .icon.inactive .glyph {
     fill: #c0242b;
 }
-.dark svg.embeddedIcon .icon.inactive .glyph {
-    /* TODO: dark theme */
-    fill: #c0242b;
-}
 
 .light table svg.embeddedIcon .icon .glyph {
     fill: #3c3a3a;
 }
-.dark table svg.embeddedIcon .glyph {
-    /* TODO: dark theme */
-    fill: #3c3a3a;
+
+/* ========== DARK Theme ========== */
+
+.dark div.close-btn svg.embeddedIcon g.icon .glyph {
+    fill: #8d8d8d;
+}
+
+.dark div.tableColSort svg.embeddedIcon .icon .glyph {
+    fill: #888888;
+}
+
+.dark svg.embeddedIcon .icon.active .glyph {
+    fill: #04bf34;
+}
+
+.dark svg.embeddedIcon .icon.inactive .glyph {
+    fill: #c0242b;
+}
+
+.dark table svg.embeddedIcon .icon .glyph {
+    fill: #9999aa;
 }
 
 
diff --git a/web/gui/src/main/webapp/app/fw/svg/sprite-theme.css b/web/gui/src/main/webapp/app/fw/svg/sprite-theme.css
index a65562f1fc..e0d68f2650 100644
--- a/web/gui/src/main/webapp/app/fw/svg/sprite-theme.css
+++ b/web/gui/src/main/webapp/app/fw/svg/sprite-theme.css
@@ -18,8 +18,6 @@
 /* ------------------------------------------------- */
 /* Sprite Layer */
 
-/* TODO: revisit these styles */
-
 
 #ov-topo svg #topo-sprites .gold1 use {
     stroke: #fda;
@@ -52,4 +50,45 @@
 
 #ov-topo svg #topo-sprites use.fill-blue2 {
     fill: #bce;
-}
\ No newline at end of file
+}
+
+
+/* ========== DARK Theme ========== */
+
+.dark #ov-topo svg #topo-sprites .gold1 use {
+    stroke: #541;
+    fill: none;
+}
+
+.dark #ov-topo svg #topo-sprites .gold1 text {
+    fill: #543;
+}
+
+.dark #ov-topo svg #topo-sprites .blue1 use {
+    stroke: #445;
+    fill: none;
+}
+
+.dark #ov-topo svg #topo-sprites .blue1 text {
+    fill: #446;
+}
+
+.dark #ov-topo svg #topo-sprites .gray1 use {
+    stroke: #333;
+    fill: none;
+}
+
+.dark #ov-topo svg #topo-sprites .gray1 text {
+    fill: #444;
+}
+
+/* fills */
+
+.dark #ov-topo svg #topo-sprites use.fill-gray2 {
+    fill: #444;
+}
+
+
+.dark #ov-topo svg #topo-sprites use.fill-blue2 {
+    fill: #447;
+}
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 8b1c4992ab..16a6c7e4ac 100644
--- a/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
+++ b/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
@@ -161,14 +161,21 @@
     }
 
     // --- Ordinal scales for 7 values.
+    // TODO: migrate these colors to the theme service.
 
-    // Colors per Mojo-Design's color palette..
+    // Colors per Mojo-Design's color palette.. (version one)
     //               blue       red        dk grey    steel      lt blue    lt red     lt grey
-    var lightNorm = ['#5b99d2', '#d05a55', '#716b6b', '#7e9aa8', '#66cef6', '#db7773', '#aeada8' ],
-        lightMute = ['#a8cceb', '#f1a7a7', '#b9b5b5', '#bdcdd5', '#a8e9fd', '#f8c9c9', '#d7d6d4' ],
-        // TODO: dark theme
-        darkNorm  = ['#5b99d2', '#d05a55', '#716b6b', '#7e9aa8', '#66cef6', '#db7773', '#aeada8' ],
-        darkMute  = ['#a8cceb', '#f1a7a7', '#b9b5b5', '#bdcdd5', '#a8e9fd', '#f8c9c9', '#d7d6d4' ];
+    // var lightNorm = ['#5b99d2', '#d05a55', '#716b6b', '#7e9aa8', '#66cef6', '#db7773', '#aeada8' ],
+    //     lightMute = ['#a8cceb', '#f1a7a7', '#b9b5b5', '#bdcdd5', '#a8e9fd', '#f8c9c9', '#d7d6d4' ],
+
+    // Colors per Mojo-Design's color palette.. (version two)
+    //               blue       lt blue    red        green      brown      teal       lime
+    var lightNorm = ['#5b99d2', '#66cef6', '#d05a55', '#0f9d58', '#ba7941', '#3dc0bf', '#56af00' ],
+        lightMute = ['#9ebedf', '#abdef5', '#d79a96', '#7cbe99', '#cdab8d', '#96d5d5', '#a0c96d' ],
+
+        darkNorm  = ['#5b99d2', '#66cef6', '#d05a55', '#0f9d58', '#ba7941', '#3dc0bf', '#56af00' ],
+        darkMute  = ['#9ebedf', '#abdef5', '#d79a96', '#7cbe99', '#cdab8d', '#96d5d5', '#a0c96d' ];
+
 
     var colors= {
         light: {
diff --git a/web/gui/src/main/webapp/app/fw/widget/button-theme.css b/web/gui/src/main/webapp/app/fw/widget/button-theme.css
index 3f2279ecb6..ff36e3f6ab 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button-theme.css
+++ b/web/gui/src/main/webapp/app/fw/widget/button-theme.css
@@ -77,10 +77,59 @@
 }
 
 
-/* TODO: dark theme */
-/* Selected toggle / radio button */
+/* ========== DARK Theme ========== */
 
+/* Selected toggle / radio button */
 .dark .toggleButton.selected svg.embeddedIcon .icon rect,
 .dark .radioButton.selected svg.embeddedIcon .icon rect {
-    fill: #e7e7e7;
+    fill: #353e45;
+}
+
+/* Selected:hover (normal) button */
+.dark .button:hover svg.embeddedIcon .icon rect {
+    stroke: white;
+    stroke-width: 1px;
+}
+
+/* Selected:hover toggle-button */
+.dark .toggleButton.selected:hover svg.embeddedIcon .icon rect {
+    fill: #444d54;
+    stroke: white;
+    stroke-width: 1px;
+}
+
+/* Selected toggle/radio button and normal button glyph color */
+.dark .button svg.embeddedIcon .glyph,
+.dark .toggleButton.selected svg.embeddedIcon .glyph,
+.dark .radioButton.selected svg.embeddedIcon .glyph {
+    fill: #5b99d2;
+}
+
+
+/* === UNSELECTED BUTTONS === */
+
+/* Unselected toggle / radio button */
+.dark .toggleButton svg.embeddedIcon .icon rect,
+.dark .radioButton svg.embeddedIcon .icon rect {
+    /* no fill */
+}
+
+/* Unselected:hover toggle / radio button */
+.dark .toggleButton:hover svg.embeddedIcon .icon rect,
+.dark .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
+    fill: #353e45;
+    stroke: white;
+    stroke-width: 1px;
+}
+
+/* Unselected toggle / radio button */
+.dark .toggleButton svg.embeddedIcon .glyph,
+.dark .radioButton svg.embeddedIcon .glyph {
+    fill: #bbb;
+}
+
+/* Unselected:hover toggle / radio button */
+.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
+.dark .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
+    fill: #5b99d2;
 }
diff --git a/web/gui/src/main/webapp/app/fw/widget/table-theme.css b/web/gui/src/main/webapp/app/fw/widget/table-theme.css
index 1849bddc9c..d8b22a23d0 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table-theme.css
+++ b/web/gui/src/main/webapp/app/fw/widget/table-theme.css
@@ -20,19 +20,10 @@
     background-color: #e5e5e6;
     color: #3c3a3a;
 }
-.dark div.summary-list .table-header td {
-    /* TODO: dark theme */
-    background-color: #e5e5e6;
-    color: #3c3a3a;
-}
 
 .light div.summary-list td {
     color: #3c3a3a;
 }
-.dark div.summary-list td {
-    /* TODO: dark theme */
-    color: #3c3a3a;
-}
 
 .light div.summary-list tr:nth-child(even) {
     background-color: #f4f4f4;
@@ -40,38 +31,18 @@
 .light div.summary-list tr:nth-child(odd) {
     background-color: #fbfbfb;
 }
-.dark div.summary-list tr:nth-child(even) {
-    /* TODO: dark theme */
-    background-color: #f4f4f4;
-}
-.dark div.summary-list tr:nth-child(odd) {
-    /* TODO: dark theme */
-    background-color: #fbfbfb;
-}
 
 .light div.summary-list tr.selected {
     background-color: #dbeffc !important;
 }
 
-.dark div.summary-list tr.selected {
-    /* TODO: dark theme */
-    background-color: #dbeffc;
-}
 
 .light div.summary-list tr.data-change {
-    /* todo - theme color */
     background-color: #FDFFDC;
 }
-.dark div.summary-list tr.data-change {
-    /* TODO: dark theme */
-    background-color: #FDFFDC;
-}
-
 
 /* --- Control Buttons --- */
 
-/* TODO: dark theme */
-
 /* INACTIVE */
 .light .ctrl-btns div svg.embeddedIcon g.icon use {
     fill: #e0dfd6;
@@ -108,3 +79,74 @@
 .light .ctrl-btns div.refresh.active:hover svg.embeddedIcon g.icon use {
     fill: #ce5b58;
 }
+
+
+/* ========== DARK Theme ========== */
+
+.dark div.summary-list .table-header td {
+    background-color: #222222;
+    color: #cccccc;
+}
+
+.dark div.summary-list td {
+    /* note: don't put background-color here */
+    color: #cccccc;
+}
+.dark div.summary-list tr.no-data td {
+    background-color: #333333;
+}
+
+.dark div.summary-list tr:nth-child(even) {
+    background-color: #333333;
+}
+.dark div.summary-list tr:nth-child(odd) {
+    background-color: #3a3a3a;
+}
+
+.dark div.summary-list tr.selected {
+    background-color: #304860 !important;
+}
+
+
+.dark div.summary-list tr.data-change {
+    background-color: #423708;
+}
+
+/* --- Control Buttons --- */
+
+/* INACTIVE */
+.dark .ctrl-btns div svg.embeddedIcon g.icon use {
+    fill: #444444;
+}
+/* note: no change for inactive buttons when hovered */
+
+
+/* ACTIVE */
+.dark .ctrl-btns div.active svg.embeddedIcon g.icon use {
+    fill: #939598;
+}
+.dark .ctrl-btns div.active:hover svg.embeddedIcon g.icon use {
+    fill: #ce5b58;
+}
+
+/* CURRENT-VIEW */
+.dark .ctrl-btns div.current-view svg.embeddedIcon g.icon rect {
+    fill: #518ecc;
+}
+.dark .ctrl-btns div.current-view svg.embeddedIcon g.icon use {
+    fill: #dddddd;
+}
+
+/* REFRESH */
+.dark .ctrl-btns div.refresh svg.embeddedIcon g.icon use {
+    fill: #364144;
+}
+.dark .ctrl-btns div.refresh:hover svg.embeddedIcon g.icon use {
+    fill: #ce5b58;
+}
+.dark .ctrl-btns div.refresh.active svg.embeddedIcon g.icon use {
+    fill: #0074a6;
+}
+.dark .ctrl-btns div.refresh.active:hover svg.embeddedIcon g.icon use {
+    fill: #ce5b58;
+}
diff --git a/web/gui/src/main/webapp/app/fw/widget/toolbar-theme.css b/web/gui/src/main/webapp/app/fw/widget/toolbar-theme.css
index f3ac717cbe..f04a923204 100644
--- a/web/gui/src/main/webapp/app/fw/widget/toolbar-theme.css
+++ b/web/gui/src/main/webapp/app/fw/widget/toolbar-theme.css
@@ -18,26 +18,32 @@
  ONOS GUI -- Toolbar Service (theme) -- CSS file
  */
 
-.light .tbar-arrow svg.embeddedIcon .icon .glyph {
-    fill: #838383;
-}
-.dark .tbar-arrow svg.embeddedIcon .icon .glyph {
-    fill: #B2B2B2;
-}
-
 .tbar-arrow svg.embeddedIcon .icon rect {
     stroke: none;
 }
-.light .tbar-arrow svg.embeddedIcon .icon rect {
-    fill: none;
+
+.light .tbar-arrow svg.embeddedIcon .icon .glyph {
+    fill: #838383;
 }
-.dark .tbar-arrow svg.embeddedIcon .icon rect {
+
+.light .tbar-arrow svg.embeddedIcon .icon rect {
     fill: none;
 }
 
 .light .separator {
     border-color: #ddd;
 }
-.dark .separator {
-    border-color: #1A1A1A;
+
+/* ========== DARK Theme ========== */
+
+.dark .tbar-arrow svg.embeddedIcon .icon .glyph {
+    fill: #B2B2B2;
+}
+
+.dark .tbar-arrow svg.embeddedIcon .icon rect {
+    fill: none;
+}
+
+.dark .separator {
+    border-color: #454545;
 }
diff --git a/web/gui/src/main/webapp/app/fw/widget/tooltip-theme.css b/web/gui/src/main/webapp/app/fw/widget/tooltip-theme.css
index 3055083a3e..3f5450b229 100644
--- a/web/gui/src/main/webapp/app/fw/widget/tooltip-theme.css
+++ b/web/gui/src/main/webapp/app/fw/widget/tooltip-theme.css
@@ -26,8 +26,7 @@
 }
 
 .dark #tooltip {
-    /* TODO: dark theme */
-    background-color: #dbeffc;
-    color: #3c3a3a;
-    border-color: #c7c7c0;
+    background-color: #3a3a60;
+    border-color: #6c6a6a;
+    color: #c7c7c0;
 }
diff --git a/web/gui/src/main/webapp/app/onos-theme.css b/web/gui/src/main/webapp/app/onos-theme.css
index ba9b458d68..3614e538d9 100644
--- a/web/gui/src/main/webapp/app/onos-theme.css
+++ b/web/gui/src/main/webapp/app/onos-theme.css
@@ -18,18 +18,50 @@
  ONOS GUI -- core (theme) -- CSS file
  */
 
-body.light {
+body {
     background-color: white;
 }
-body.dark {
-    /* TODO: dark theme */
-    background-color: #2b2b2b;
+
+#view h2 {
+    color: #3c3a3a;
 }
 
-.light #view h2 {
-    color: #3c3a3a;
+a {
+    color: #009fdb;
+    text-decoration: none;
 }
+a:hover {
+    text-decoration: underline;
+}
+a:visited {
+    color: #7fabdb;
+    text-decoration: none;
+}
+
+/* ========== DARK Theme ========== */
+
+body.dark {
+    background-color: #282528;
+}
+
 .dark #view h2 {
-    /* TODO: dark theme */
-    color: #3c3a3a;
+    color: #6a6e6a;
 }
+
+.dark a {
+    color: #007ca6;
+}
+.dark a:visited {
+    color: #4f6e90;
+}
+
+.dark input {
+    color: #dddddd;
+    background-color: #222222;
+    border: 1px solid #666666;
+}
+
+.dark select {
+    color: #dddddd;
+    background-color: #222222;
+}
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/onos.css b/web/gui/src/main/webapp/app/onos.css
index ce5a3887d5..336ac08df6 100644
--- a/web/gui/src/main/webapp/app/onos.css
+++ b/web/gui/src/main/webapp/app/onos.css
@@ -49,17 +49,3 @@ body {
     font-size: 21pt;
     font-weight: lighter;
 }
-
-
-/* TODO: dark versions for links */
-a {
-    color: #009fdb;
-    text-decoration: none;
-}
-a:hover {
-    text-decoration: underline;
-}
-a:visited {
-    color: #7fabdb;
-    text-decoration: none;
-}
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/app/app-theme.css b/web/gui/src/main/webapp/app/view/app/app-theme.css
index 45cc07ca1f..f8754cd81d 100644
--- a/web/gui/src/main/webapp/app/view/app/app-theme.css
+++ b/web/gui/src/main/webapp/app/view/app/app-theme.css
@@ -19,14 +19,10 @@
  */
 
 /* -- Drag-n-Drop OAR files -- */
-.light div.dropping {
+div.dropping {
     border: solid 3px #0095d6;
 }
 
-.dark div.dropping {
-    /* TODO: dark theme */
-    border: solid 3px #0095d6;
-}
 
 /* -- confirmation dialog -- */
 .light #app-dialog p.strong {
@@ -34,55 +30,23 @@
     background-color: #ce5b58;
 }
 
-.dark #app-dialog p.strong {
-    /* TODO: dark theme */
-    color: white;
-    background-color: #ce5b58;
-}
-
 .light #app-dialog.floatpanel.dialog {
-    background-color: #fff;
+    background-color: #ffffff;
 }
 
+/* ========== DARK Theme ========== */
+
+
+.dark .app-title {
+    color: #dddddd;
+}
+
+/* -- confirmation dialog -- */
+.dark #app-dialog p.strong {
+    color: red;
+    background-color: #ecd98e;
+}
 .dark #app-dialog.floatpanel.dialog {
-    /* TODO: dark theme */
-    background-color: #fff;
+    background-color: #282528;
+    color:#ddddee;
 }
-
-/* -- details panel -- */
-.light #application-details-panel.floatpanel {
-    background-color: white;
-}
-
-.dark #application-details-panel.floatpanel {
-    /* TODO: dark theme */
-    background-color: white;
-}
-
-.light #application-details-panel hr {
-    border: 1px solid #c7c7c0;
-}
-
-.dark #application-details-panel hr {
-    /* TODO: dark theme */
-    border: 1px solid #c7c7c0;
-}
-
-.light #application-details-panel .bottom tr:nth-child(odd) {
-    background-color: #f4f4f4;
-}
-
-.light #application-details-panel .bottom tr:nth-child(even) {
-    background-color: #fbfbfb;
-}
-
-.dark #application-details-panel .bottom tr:nth-child(odd) {
-    /* TODO: dark theme */
-    background-color: #f4f4f4;
-}
-
-.dark #application-details-panel .bottom tr:nth-child(even) {
-    /* TODO: dark theme */
-    background-color: #fbfbfb;
-}
-
diff --git a/web/gui/src/main/webapp/app/view/device/device-theme.css b/web/gui/src/main/webapp/app/view/device/device-theme.css
index 9005b0c03d..3aa67d2ae6 100644
--- a/web/gui/src/main/webapp/app/view/device/device-theme.css
+++ b/web/gui/src/main/webapp/app/view/device/device-theme.css
@@ -22,23 +22,14 @@
 .light .dev-icon svg.embeddedIcon .icon .glyph {
     fill: #0071bd;
 }
-.dark .dev-icon svg.embeddedIcon .icon .glyph {
-    /* TODO: dark theme */
-    fill: #0071bd;
-}
 
 .light #device-details-panel .editable {
     border-bottom: 1px dashed #ca504b;
 }
 
-
 .light #device-details-panel .bottom th {
     background-color: #e5e5e6;
 }
-.dark #device-details-panel .bottom th {
-    /* TODO: dark theme */
-    background-color: #e5e5e6;
-}
 
 .light #device-details-panel .bottom tr:nth-child(odd) {
     background-color: #fbfbfb;
@@ -46,11 +37,13 @@
 .light #device-details-panel .bottom tr:nth-child(even) {
     background-color: #f4f4f4;
 }
-.dark #device-details-panel .bottom tr:nth-child(odd) {
-    /* TODO: dark theme */
-    background-color: #fbfbfb;
+
+/* ========== DARK Theme ========== */
+
+.dark .dev-icon svg.embeddedIcon .icon .glyph {
+    fill: #375b7f;
 }
-.dark #device-details-panel .bottom tr:nth-child(even) {
-    /* TODO: dark theme */
-    background-color: #f4f4f4;
+
+.dark #device-details-panel .editable {
+    border-bottom: 1px dashed #df4f4a;
 }
diff --git a/web/gui/src/main/webapp/app/view/flow/flow-theme.css b/web/gui/src/main/webapp/app/view/flow/flow-theme.css
index e589b3366b..2b561f9e50 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow-theme.css
+++ b/web/gui/src/main/webapp/app/view/flow/flow-theme.css
@@ -30,18 +30,6 @@
 .light #ov-flow tr:nth-child(6n) {
     background-color: #f4f4f4;
 }
-.dark #ov-flow tr:nth-child(6n + 1),
-.dark #ov-flow tr:nth-child(6n + 2),
-.dark #ov-flow tr:nth-child(6n + 3) {
-    /* TODO: dark theme */
-    background-color: #fbfbfb;
-}
-.dark #ov-flow tr:nth-child(6n + 4),
-.dark #ov-flow tr:nth-child(6n + 5),
-.dark #ov-flow tr:nth-child(6n) {
-    /* TODO: dark theme */
-    background-color: #f4f4f4;
-}
 
 /* highlighted color */
 .light #ov-flow tr:nth-child(6n + 1).data-change,
@@ -50,16 +38,6 @@
 .light #ov-flow tr:nth-child(6n + 4).data-change,
 .light #ov-flow tr:nth-child(6n + 5).data-change,
 .light #ov-flow tr:nth-child(6n).data-change {
-    /* TODO: theme */
-    background-color: #fdffdc;
-}
-.dark #ov-flow tr:nth-child(6n + 1).data-change,
-.dark #ov-flow tr:nth-child(6n + 2).data-change,
-.dark #ov-flow tr:nth-child(6n + 3).data-change,
-.dark #ov-flow tr:nth-child(6n + 4).data-change,
-.dark #ov-flow tr:nth-child(6n + 5).data-change,
-.dark #ov-flow tr:nth-child(6n).data-change {
-    /* TODO: dark theme */
     background-color: #fdffdc;
 }
 
@@ -67,3 +45,25 @@
 #ov-flow td.treatment {
     opacity: 0.65;
 }
+
+/* ========== DARK Theme ========== */
+
+.dark #ov-flow tr:nth-child(6n + 1),
+.dark #ov-flow tr:nth-child(6n + 2),
+.dark #ov-flow tr:nth-child(6n + 3) {
+    background-color: #333333;
+}
+.dark #ov-flow tr:nth-child(6n + 4),
+.dark #ov-flow tr:nth-child(6n + 5),
+.dark #ov-flow tr:nth-child(6n) {
+    background-color: #3a3a3a;
+}
+
+.dark #ov-flow tr:nth-child(6n + 1).data-change,
+.dark #ov-flow tr:nth-child(6n + 2).data-change,
+.dark #ov-flow tr:nth-child(6n + 3).data-change,
+.dark #ov-flow tr:nth-child(6n + 4).data-change,
+.dark #ov-flow tr:nth-child(6n + 5).data-change,
+.dark #ov-flow tr:nth-child(6n).data-change {
+    background-color: #423708;
+}
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.html b/web/gui/src/main/webapp/app/view/flow/flow.html
index eb1e45a1e2..b9fbb5da54 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.html
+++ b/web/gui/src/main/webapp/app/view/flow/flow.html
@@ -56,7 +56,7 @@
         </div>
 
         <div class="search">
-            <input type="text" ng-model="queryTxt" placeholder="Search Text"/>
+            <input type="text" ng-model="queryTxt" placeholder="Search"/>
             <select ng-model="queryBy">
                 <option value="" disabled>Search By</option>
                 <option value="$">All Fields</option>
diff --git a/web/gui/src/main/webapp/app/view/group/group-theme.css b/web/gui/src/main/webapp/app/view/group/group-theme.css
index c1cd350506..bd22c629b2 100644
--- a/web/gui/src/main/webapp/app/view/group/group-theme.css
+++ b/web/gui/src/main/webapp/app/view/group/group-theme.css
@@ -28,29 +28,28 @@
     background-color: #f4f4f4;
 }
 
-.dark #ov-group tr:nth-child(4n + 1),
-.dark #ov-group tr:nth-child(4n + 2) {
-    /* TODO: dark theme */
-    background-color: #fbfbfb;
-}
-.dark #ov-group tr:nth-child(4n + 3),
-.dark #ov-group tr:nth-child(4n) {
-    /* TODO: dark theme */
-    background-color: #f4f4f4;
-}
-
 /* highlighted color */
 .light #ov-group tr:nth-child(4n + 1).data-change,
 .light #ov-group tr:nth-child(4n + 2).data-change,
 .light #ov-group tr:nth-child(4n + 3).data-change,
 .light #ov-group tr:nth-child(4n).data-change {
-    /* TODO: theme */
     background-color: #fdffdc;
 }
+
+/* ========== DARK Theme ========== */
+
+.dark #ov-group tr:nth-child(4n + 1),
+.dark #ov-group tr:nth-child(4n + 2) {
+    background-color: #333333;
+}
+.dark #ov-group tr:nth-child(4n + 3),
+.dark #ov-group tr:nth-child(4n) {
+    background-color: #3a3a3a;
+}
+
 .dark #ov-group tr:nth-child(4n + 1).data-change,
 .dark #ov-group tr:nth-child(4n + 2).data-change,
 .dark #ov-group tr:nth-child(4n + 3).data-change,
 .dark #ov-group tr:nth-child(4n).data-change {
-    /* TODO: dark theme */
-    background-color: #fdffdc;
+    background-color: #423708;
 }
diff --git a/web/gui/src/main/webapp/app/view/intent/intent-theme.css b/web/gui/src/main/webapp/app/view/intent/intent-theme.css
index 1d24109e5b..1124a248f7 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent-theme.css
+++ b/web/gui/src/main/webapp/app/view/intent/intent-theme.css
@@ -29,18 +29,6 @@
 .light #ov-intent tr:nth-child(6n) {
     background-color: #f4f4f4;
 }
-.dark #ov-intent tr:nth-child(6n + 1),
-.dark #ov-intent tr:nth-child(6n + 2),
-.dark #ov-intent tr:nth-child(6n + 3) {
-    /* TODO: dark theme */
-    background-color: #fbfbfb;
-}
-.dark #ov-intent tr:nth-child(6n + 4),
-.dark #ov-intent tr:nth-child(6n + 5),
-.dark #ov-intent tr:nth-child(6n) {
-    /* TODO: dark theme */
-    background-color: #f4f4f4;
-}
 
 .light #ov-intent tr:nth-child(6n + 1).data-change,
 .light #ov-intent tr:nth-child(6n + 2).data-change,
@@ -48,16 +36,6 @@
 .light #ov-intent tr:nth-child(6n + 4).data-change,
 .light #ov-intent tr:nth-child(6n + 5).data-change,
 .light #ov-intent tr:nth-child(6n).data-change {
-    /* TODO: theme */
-    background-color: #fdffdc;
-}
-.dark #ov-intent tr:nth-child(6n + 1).data-change,
-.dark #ov-intent tr:nth-child(6n + 2).data-change,
-.dark #ov-intent tr:nth-child(6n + 3).data-change,
-.dark #ov-intent tr:nth-child(6n + 4).data-change,
-.dark #ov-intent tr:nth-child(6n + 5).data-change,
-.dark #ov-intent tr:nth-child(6n).data-change {
-    /* TODO: dark theme */
     background-color: #fdffdc;
 }
 
@@ -65,3 +43,25 @@
 #ov-intent td.details {
     opacity: 0.65;
 }
+
+/* ========== DARK Theme ========== */
+
+.dark #ov-intent tr:nth-child(6n + 1),
+.dark #ov-intent tr:nth-child(6n + 2),
+.dark #ov-intent tr:nth-child(6n + 3) {
+    background-color: #333333;
+}
+.dark #ov-intent tr:nth-child(6n + 4),
+.dark #ov-intent tr:nth-child(6n + 5),
+.dark #ov-intent tr:nth-child(6n) {
+    background-color: #3a3a3a;
+}
+
+.dark #ov-intent tr:nth-child(6n + 1).data-change,
+.dark #ov-intent tr:nth-child(6n + 2).data-change,
+.dark #ov-intent tr:nth-child(6n + 3).data-change,
+.dark #ov-intent tr:nth-child(6n + 4).data-change,
+.dark #ov-intent tr:nth-child(6n + 5).data-change,
+.dark #ov-intent tr:nth-child(6n).data-change {
+    background-color: #423708;
+}
diff --git a/web/gui/src/main/webapp/app/view/meter/meter-theme.css b/web/gui/src/main/webapp/app/view/meter/meter-theme.css
index e380aba859..031cf605f8 100644
--- a/web/gui/src/main/webapp/app/view/meter/meter-theme.css
+++ b/web/gui/src/main/webapp/app/view/meter/meter-theme.css
@@ -27,29 +27,30 @@
 .light #ov-meter tr:nth-child(4n) {
     background-color: #f4f4f4;
 }
-.dark #ov-meter tr:nth-child(4n + 1),
-.dark #ov-meter tr:nth-child(4n + 2) {
-    /* TODO: dark theme */
-    background-color: #fbfbfb;
-}
-.dark #ov-meter tr:nth-child(4n + 3),
-.dark #ov-meter tr:nth-child(4n) {
-    /* TODO: dark theme */
-    background-color: #f4f4f4;
-}
 
 /* highlighted color */
 .light #ov-meter tr:nth-child(4n + 1).data-change,
 .light #ov-meter tr:nth-child(4n + 2).data-change,
 .light #ov-meter tr:nth-child(4n + 3).data-change,
 .light #ov-meter tr:nth-child(4n).data-change {
-    /* TODO: theme */
     background-color: #fdffdc;
 }
+
+
+/* ========== DARK Theme ========== */
+
+.dark #ov-meter tr:nth-child(4n + 1),
+.dark #ov-meter tr:nth-child(4n + 2) {
+    background-color: #333333;
+}
+.dark #ov-meter tr:nth-child(4n + 3),
+.dark #ov-meter tr:nth-child(4n) {
+    background-color: #3a3a3a;
+}
+
 .dark #ov-meter tr:nth-child(4n + 1).data-change,
 .dark #ov-meter tr:nth-child(4n + 2).data-change,
 .dark #ov-meter tr:nth-child(4n + 3).data-change,
 .dark #ov-meter tr:nth-child(4n).data-change {
-    /* TODO: dark theme */
-    background-color: #fdffdc;
+    background-color: #423708;
 }
diff --git a/web/gui/src/main/webapp/app/view/processor/processor-theme.css b/web/gui/src/main/webapp/app/view/processor/processor-theme.css
deleted file mode 100644
index d409d0fa34..0000000000
--- a/web/gui/src/main/webapp/app/view/processor/processor-theme.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright 2016-present Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- ONOS GUI -- Processor View (theme) -- CSS file
- */
-
-.light #ov-processor .current-view use {
-    fill: white;
-}
-.dark #ov-processor .current-view use {
-    fill: #304860;
-}
-
-.light #ov-processor .current-view rect {
-    fill: deepskyblue;
-}
-.dark #ov-processor .current-view rect {
-    fill: #eee;
-}
diff --git a/web/gui/src/main/webapp/app/view/port/port-theme.css b/web/gui/src/main/webapp/app/view/settings/settings-theme.css
similarity index 65%
rename from web/gui/src/main/webapp/app/view/port/port-theme.css
rename to web/gui/src/main/webapp/app/view/settings/settings-theme.css
index 7fd2126361..33c05efdfd 100644
--- a/web/gui/src/main/webapp/app/view/port/port-theme.css
+++ b/web/gui/src/main/webapp/app/view/settings/settings-theme.css
@@ -1,5 +1,5 @@
 /*
- * Copyright 2016-present Open Networking Laboratory
+ * Copyright 2017-present Open Networking Laboratory
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15,6 +15,19 @@
  */
 
 /*
- ONOS GUI -- Port View (theme) -- CSS file
+ ONOS GUI -- Settings View (theme) -- CSS file
  */
 
+
+/* ========== DARK Theme ========== */
+
+/* -- Drag-n-Drop OAR files -- */
+
+.dark .floatpanel .settings-title-1 {
+    color: #dddddd;
+}
+
+.dark .floatpanel .settings-title-2 {
+    color: #eeeeee;
+}
+
diff --git a/web/gui/src/main/webapp/app/view/topo/topo-theme.css b/web/gui/src/main/webapp/app/view/topo/topo-theme.css
index 80021d52ff..768c506e78 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo-theme.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo-theme.css
@@ -87,6 +87,9 @@
 #topo-p-instance .online svg .glyph {
     fill: #fff;
 }
+.dark #topo-p-instance .online svg .glyph.overlay {
+    fill: #fff;
+}
 
 
 /* offline */
@@ -253,7 +256,6 @@
     opacity: .5;
     stroke-dasharray: 8 4;
 }
-/* TODO: Review for not-permitted links */
 #ov-topo svg .link.not-permitted {
     stroke: rgb(255,0,0);
     stroke-width: 5.0;
@@ -384,3 +386,256 @@
 #ov-topo svg #topo-sprites use.fill-blue2 {
     fill: #bce;
 }
+
+
+/* ==================================================================== */
+/*   From here are the DARK theme styles - mirroring the above styles   */
+/* ==================================================================== */
+
+/* --- Base SVG Layer --- */
+
+.dark #ov-topo svg {
+    background-color: #152439;
+}
+
+
+/* --- "No Devices" Layer --- */
+
+.dark #ov-topo svg .noDevsBird {
+    fill: #8f4848;
+}
+
+.dark #ov-topo svg #topo-noDevsLayer text {
+    fill: #445461;
+}
+
+/* --- Topo Map --- */
+
+.dark #ov-topo svg #topo-map {
+    stroke-width: 2px;
+    stroke: #37404d;
+    fill: #212c3a;
+}
+
+/* --- general topo-panel styling --- */
+
+.dark .topo-p {
+    background-color: #2f313c;
+    color: #c2c2b7;
+}
+.dark .topo-p svg {
+    background: #8e1e24;
+}
+
+.dark .topo-p svg .glyph {
+    fill: #c2c2b7;
+}
+
+.dark .topo-p hr {
+    background-color: #616876;
+}
+
+.dark .topo-p div.actionBtn svg use.glyph {
+    fill: #5a7f96;
+}
+
+.dark #topo-p-detail .header svg .glyph {
+    fill: #91292f;
+}
+
+.dark #toolbar-topo-tbar .tbar-row.right {
+    color: #666;
+}
+
+/* --- Topo Instance Panel --- */
+
+.dark #topo-p-instance {
+    background-color: #2f313c;
+    color: #c2c2b7;
+    border: 1px solid #364144;
+
+}
+
+.dark #topo-p-instance svg rect {
+    stroke-width: 0;
+    fill: #525660;
+}
+
+/* body of an instance */
+.dark #topo-p-instance .online svg rect {
+    opacity: 1;
+    fill: #838992;
+}
+
+.dark #topo-p-instance svg .glyph {
+    fill: #ddd;
+}
+.dark #topo-p-instance .online svg .glyph {
+    fill: #fff;
+}
+.dark #topo-p-instance .online svg .glyph.overlay {
+    fill: #c7c7c7;
+}
+
+/* offline */
+.dark #topo-p-instance svg .badgeIcon {
+    opacity: 0.4;
+    fill: #939598;
+}
+
+/* online */
+.dark #topo-p-instance .online svg .badgeIcon {
+    opacity: 1.0;
+    fill: #939598;
+}
+.dark #topo-p-instance .online svg .badgeIcon.bird {
+    fill: #ffffff;
+}
+
+.dark #topo-p-instance svg text {
+    text-anchor: left;
+    opacity: 0.5;
+    fill: #aaa;
+}
+
+.dark #topo-p-instance .online svg text {
+    opacity: 1.0;
+    fill: #fff;
+}
+
+.dark #topo-p-instance .onosInst.mastership {
+    opacity: 0.3;
+}
+.dark #topo-p-instance .onosInst.mastership.affinity {
+    opacity: 1.0;
+}
+.dark #topo-p-instance .onosInst.mastership.affinity svg rect {
+    filter: url(#blue-glow);
+}
+
+.dark.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
+    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.7 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
+}
+
+/* --- Topo Nodes --- */
+
+/* Device Nodes */
+
+/* note: device without the 'online' class is offline */
+.dark #ov-topo svg .node.device rect {
+    fill: #707070;
+}
+.dark #ov-topo svg .node.device text {
+    fill: #444;
+}
+.dark #ov-topo svg .node.device use {
+    fill: #eee;
+}
+
+.dark #ov-topo svg .node.device.online rect {
+    fill: #525660;
+}
+.dark #ov-topo svg .node.device.online text {
+    fill: #fff;
+}
+.dark #ov-topo svg .node.device.online use {
+    fill: #fff;
+}
+
+.dark #ov-topo svg .node.device.selected rect {
+    stroke-width: 2.0;
+    stroke: #009fdb;
+}
+
+
+/* Host Nodes */
+
+.dark #ov-topo svg .node.host {
+}
+
+.dark #ov-topo svg .node.host text {
+    stroke: none;
+    font: 9pt sans-serif;
+    fill: #ad5781;
+}
+
+.dark #ov-topo svg .node.host circle {
+    stroke: #a3a596;
+    fill: #8f8272;
+}
+.dark #ov-topo svg .node.host.selected .hostIcon > circle {
+    stroke-width: 2.0;
+    stroke: #009fdb;
+}
+
+.dark #ov-topo svg .node.host use {
+    fill: #000;
+}
+
+/* --- Topo Links --- */
+.dark #ov-topo svg .link.not-permitted {
+    stroke: rgb(255, 60, 60);
+}
+
+/* Port traffic color visualization for Kbps, Mbps, and Gbps */
+/*  .. values good for both light and dark themes            */
+
+/* Primary, Secondary (optical too) colors good for both themes */
+
+/* Link Labels */
+.dark #ov-topo svg .linkLabel rect {
+    fill: #555;
+}
+
+.dark #ov-topo svg .linkLabel text {
+    fill: #eee;
+}
+
+/* Port Labels */
+
+.dark #ov-topo svg .portLabel rect {
+    fill: #222;
+}
+
+.dark #ov-topo svg .portLabel text {
+    fill: #eee;
+}
+
+/* Number of Links Labels */
+
+.dark #ov-topo text.numLinkText {
+    fill: #eee;
+}
+
+
+/* Sprite Layer */
+
+.dark #ov-topo svg #topo-sprites .gold1 use {
+    stroke: #541;
+}
+.dark #ov-topo svg #topo-sprites .gold1 text {
+    fill: #543;
+}
+
+.dark #ov-topo svg #topo-sprites .blue1 use {
+    stroke: #445;
+}
+.dark #ov-topo svg #topo-sprites .blue1 text {
+    fill: #446;
+}
+
+.dark #ov-topo svg #topo-sprites .gray1 use {
+    stroke: #333;
+}
+.dark #ov-topo svg #topo-sprites .gray1 text {
+    fill: #444;
+}
+
+/* fills */
+.dark #ov-topo svg #topo-sprites use.fill-gray2 {
+    fill: #444;
+}
+
+.dark #ov-topo svg #topo-sprites use.fill-blue2 {
+    fill: #447;
+}
diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html
index f162ed1ff5..5a903aff10 100644
--- a/web/gui/src/main/webapp/index.html
+++ b/web/gui/src/main/webapp/index.html
@@ -227,7 +227,6 @@
     <link rel="stylesheet" href="app/view/flow/flow.css">
     <link rel="stylesheet" href="app/view/flow/flow-theme.css">
     <link rel="stylesheet" href="app/view/port/port.css">
-    <link rel="stylesheet" href="app/view/port/port-theme.css">
     <link rel="stylesheet" href="app/view/group/group.css">
     <link rel="stylesheet" href="app/view/group/group-theme.css">
     <link rel="stylesheet" href="app/view/meter/meter.css">
@@ -240,9 +239,9 @@
     <link rel="stylesheet" href="app/view/app/app.css">
     <link rel="stylesheet" href="app/view/app/app-theme.css">
     <link rel="stylesheet" href="app/view/settings/settings.css">
+    <link rel="stylesheet" href="app/view/settings/settings-theme.css">
     <link rel="stylesheet" href="app/view/cluster/cluster.css">
     <link rel="stylesheet" href="app/view/processor/processor.css">
-    <link rel="stylesheet" href="app/view/processor/processor-theme.css">
     <link rel="stylesheet" href="app/view/tunnel/tunnel.css">
 
     <!-- Contributed stylesheets injected here -->
diff --git a/web/gui/src/main/webapp/tests/app/fw/svg/svgUtil-spec.js b/web/gui/src/main/webapp/tests/app/fw/svg/svgUtil-spec.js
index b70df794f0..90054c8e23 100644
--- a/web/gui/src/main/webapp/tests/app/fw/svg/svgUtil-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/svg/svgUtil-spec.js
@@ -157,38 +157,36 @@ describe('factory: fw/svg/svgUtil.js', function() {
        expect(sus.cat7().getColor('foo', false, 'light')).toEqual('#5b99d2');
     });
 
-    it('should provide red', function () {
-       expect(sus.cat7().getColor('bar', false, 'light')).toEqual('#d05a55');
+    it('should provide lt-blue', function () {
+       expect(sus.cat7().getColor('bar', false, 'light')).toEqual('#66cef6');
     });
 
     it('should provide paler shade of blue for muted', function () {
-        expect(sus.cat7().getColor('foo', true, 'light')).toEqual('#a8cceb');
+        expect(sus.cat7().getColor('foo', true, 'light')).toEqual('#9ebedf');
     });
 
-    // TODO: dark theme required
-    xit('should provide an alternate (dark) shade of blue', function () {
+    it('should provide an alternate (dark) shade of blue', function () {
        expect(sus.cat7().getColor('foo', false, 'dark')).toEqual('#5b99d2');
     });
 
-    // TODO: dark theme required
-    xit('should provide an alternate (dark) shade of blue for muted', function () {
-        expect(sus.cat7().getColor('foo', true, 'dark')).toEqual('#a8cceb');
+    it('should provide an alternate (dark) shade of blue for muted', function () {
+        expect(sus.cat7().getColor('foo', true, 'dark')).toEqual('#9ebedf');
     });
 
     it('should iterate across the colors', function () {
         expect(sus.cat7().getColor('foo', false, 'light')).toEqual('#5b99d2');
-        expect(sus.cat7().getColor('bar', false, 'light')).toEqual('#d05a55');
-        expect(sus.cat7().getColor('baz', false, 'light')).toEqual('#716b6b');
-        expect(sus.cat7().getColor('zoo', false, 'light')).toEqual('#7e9aa8');
-        expect(sus.cat7().getColor('sdh', false, 'light')).toEqual('#66cef6');
-        expect(sus.cat7().getColor('goo', false, 'light')).toEqual('#db7773');
-        expect(sus.cat7().getColor('pip', false, 'light')).toEqual('#aeada8');
+        expect(sus.cat7().getColor('bar', false, 'light')).toEqual('#66cef6');
+        expect(sus.cat7().getColor('baz', false, 'light')).toEqual('#d05a55');
+        expect(sus.cat7().getColor('zoo', false, 'light')).toEqual('#0f9d58');
+        expect(sus.cat7().getColor('sdh', false, 'light')).toEqual('#ba7941');
+        expect(sus.cat7().getColor('goo', false, 'light')).toEqual('#3dc0bf');
+        expect(sus.cat7().getColor('pip', false, 'light')).toEqual('#56af00');
 
         // and cycle back to the first color for item #8
         expect(sus.cat7().getColor('bri', false, 'light')).toEqual('#5b99d2');
 
         // and return the same color for the same ID
-        expect(sus.cat7().getColor('zoo', false, 'light')).toEqual('#7e9aa8');
+        expect(sus.cat7().getColor('zoo', false, 'light')).toEqual('#0f9d58');
     });
 
     // === translate(), scale(), skewX(), rotate()