diff --git a/themes/neue-dark-ui/package.cson b/themes/neue-dark-ui/package.cson
index 02eb44849..254775386 100644
--- a/themes/neue-dark-ui/package.cson
+++ b/themes/neue-dark-ui/package.cson
@@ -4,6 +4,7 @@
   'text'
   'block'
   'git'
+  'site'
   'icons'
   'loading'
   'buttons'
diff --git a/themes/neue-dark-ui/site.less b/themes/neue-dark-ui/site.less
new file mode 100644
index 000000000..fa79d92e3
--- /dev/null
+++ b/themes/neue-dark-ui/site.less
@@ -0,0 +1,14 @@
+@import "ui-mixins";
+@import "ui-variables";
+
+.ui-site(@num, @color) {
+  .ui-site-@{num} {
+    background-color: @color;
+  }
+}
+
+.ui-site(1, @ui-site-color-1);
+.ui-site(2, @ui-site-color-2);
+.ui-site(3, @ui-site-color-3);
+.ui-site(4, @ui-site-color-4);
+.ui-site(5, @ui-site-color-5);
diff --git a/themes/neue-dark-ui/ui-variables.less b/themes/neue-dark-ui/ui-variables.less
index 4d1d51213..9f354b1ea 100644
--- a/themes/neue-dark-ui/ui-variables.less
+++ b/themes/neue-dark-ui/ui-variables.less
@@ -44,11 +44,11 @@
 @tab-background-color-active: @panel-heading-background-color;
 @tab-border-color: darken(@tab-background-color-active, 10%);
 
-@site-color-1: #4dd157;
-@site-color-2: #3facc1;
-@site-color-3: #db2ff4;
-@site-color-4: #f4541e;
-@site-color-5: #f5e11d;
+@ui-site-color-1: @background-color-success; // green
+@ui-site-color-2: @background-color-info; // blue
+@ui-site-color-3: @background-color-warning; // orange
+@ui-site-color-4: #db2ff4; // purple
+@ui-site-color-5: #f5e11d; // yellow
 
 
 // Sizes