diff --git a/src/_h5ai/client/css/inc/colors.less b/src/_h5ai/client/css/inc/colors.less
index 3e914372..66cb4e81 100644
--- a/src/_h5ai/client/css/inc/colors.less
+++ b/src/_h5ai/client/css/inc/colors.less
@@ -1,6 +1,6 @@
-@col-blue-400: #42a5f5;
-@col-green-500: #4caf50;
 @col-red-500: #f44336;
+@col-green-500: #4caf50;
+@col-blue-400: #42a5f5;
 @col-pink-a200: #ff4081;
 
 @col-white: #ffffff;
@@ -10,11 +10,6 @@
 @col-grey-700: #616161;
 @col-grey-900: #212121;
 
-@col-light: @col-white;
-@col-lightgrey: @col-grey-50;
-@col-darkgrey: @col-grey-100;
-@col-dark: @col-grey-900;
-
 @col-text-primary-black: rgba(0,0,0,0.87);
 @col-text-secondary-black: rgba(0,0,0,0.54);
 @col-text-disabled-black: rgba(0,0,0,0.26);
@@ -28,15 +23,15 @@
 @col-text-selected: @col-text-primary-white;
 @col-back-selected: @col-blue-400;
 
-@col-font-light: @col-light;
-@col-font-dark: @col-dark;
+@col-text-native-selection: @col-text-primary-white;
+@col-back-native-selection: @col-pink-a200;
 
-@col-back-light: @col-lightgrey;
-@col-back-dark: @col-darkgrey;
-
-@col: @col-text-primary-black;
-@col-back: @col-back-dark;
-@col-hover: @col-blue-400;
+@col-text: @col-text-primary-black;
+@col-back: @col-grey-100;
+@col-back-paper: @col-white;
+@col-back-panel: @col-grey-50;
+@col-text-hover: @col-blue-400;
+@col-back-hover: rgba(0,0,0,0.03);
 @col-border: rgba(0,0,0,0.05);
 @col-border-strong: rgba(0,0,0,0.15);
 @col-border-stronger: rgba(0,0,0,0.3);
@@ -45,6 +40,7 @@
 @col-error: @col-red-500;
 
 @col-link: @col-blue-400;
+@col-link-hover: @col-grey-900;
 
 @col-range-back: @col-grey-300;
 @col-range-thumb: @col-grey-700;
diff --git a/src/_h5ai/client/css/inc/core/fallback.less b/src/_h5ai/client/css/inc/core/fallback.less
index 884d3a35..42a19998 100644
--- a/src/_h5ai/client/css/inc/core/fallback.less
+++ b/src/_h5ai/client/css/inc/core/fallback.less
@@ -31,7 +31,7 @@
         cursor: pointer;
 
         &:hover {
-            color: @col-hover;
+            color: @col-text-hover;
         }
     }
     .fb-i {
@@ -63,7 +63,7 @@
     overflow: hidden;
     box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
     text-align: right;
-    background: @col-lightgrey;
+    background: @col-back-panel;
 
     a, a:active, a:visited {
         display: inline-block;
@@ -74,7 +74,7 @@
         outline: 0;
 
         &:hover {
-            color: @col-hover;
+            color: @col-text-hover;
         }
     }
 
@@ -92,7 +92,7 @@ html.no-js, html.no-browser {
 
     #root {
         position: static;
-        background: #fff;
+        background: @col-back-paper;
     }
 
     #fallback, #fallback-hints {
diff --git a/src/_h5ai/client/css/inc/core/notify.less b/src/_h5ai/client/css/inc/core/notify.less
index df7cf7b3..349f93a0 100644
--- a/src/_h5ai/client/css/inc/core/notify.less
+++ b/src/_h5ai/client/css/inc/core/notify.less
@@ -5,7 +5,7 @@
     margin-left: -100px;
     z-index: 100;
     padding: 3px 6px 6px 6px;
-    color: @col-light;
+    color: @col-text-primary-white;
     background: rgba(0,0,0,0.2);
     border-radius: 0 0 4px 4px;
     text-align: center;
diff --git a/src/_h5ai/client/css/inc/core/root-info.less b/src/_h5ai/client/css/inc/core/root-info.less
index 372c7a0d..2b8c1fb3 100644
--- a/src/_h5ai/client/css/inc/core/root-info.less
+++ b/src/_h5ai/client/css/inc/core/root-info.less
@@ -13,7 +13,7 @@
         border-radius: 4px;
         font-family: @font-family-mono;
         letter-spacing: 0.05em;
-        background: @col-lightgrey;
+        background: @col-back-panel;
         border: 1px solid @col-border;
         font-size: 0.9em;
     }
@@ -27,7 +27,7 @@
         transition: all 0.2s ease-in-out;
 
         &:hover {
-            color: @col-hover;
+            color: @col-text-hover;
         }
     }
 
@@ -35,7 +35,7 @@
         margin: 12px auto 24px auto;
         padding: 6px 18px;
         width: 210px;
-        background: #fafafa;
+        background: @col-back-panel;
         border: 1px solid @col-border;
         border-radius: 4px;
 
@@ -45,7 +45,7 @@
     }
 
     #pass {
-        .el-input();
+        .el-input;
         display: inline-block;
         margin: 8px;
         padding: 0 12px;
@@ -55,7 +55,7 @@
     }
 
     #login, #logout {
-        .el-button();
+        .el-button;
         display: inline-block;
         margin: 8px;
         padding: 0 12px;
@@ -77,9 +77,9 @@
         padding: 0;
 
         .test {
-            .card();
-            .rounded();
-            background: @col-light;
+            .card;
+            .rounded;
+            background: @col-back-paper;
             margin: 12px 0 0 0;
             padding: 8px 12px 12px 12px;
         }
diff --git a/src/_h5ai/client/css/inc/core/sidebar.less b/src/_h5ai/client/css/inc/core/sidebar.less
index 806634c6..c2ba64e3 100644
--- a/src/_h5ai/client/css/inc/core/sidebar.less
+++ b/src/_h5ai/client/css/inc/core/sidebar.less
@@ -3,7 +3,7 @@
     overflow: auto;
     flex: 0 0 auto;
     order: 0;
-    background: #fafafa;
+    background: @col-back-panel;
     border-right: 1px solid rgba(0,0,0,0.08);
     padding: 16px;
 
@@ -22,12 +22,12 @@
         display: inline-block;
         margin: 4px;
         border-radius: 2px;
-        color: @col;
+        color: @col-text;
         cursor: pointer;
         transition: all 0.2s ease-in-out;
 
         &:hover {
-            background: rgba(0,0,0,0.03);
+            background: @col-back-hover;
         }
 
         &.active {
@@ -59,7 +59,7 @@
         font-family: @font-family;
         font-size: @font-size;
         font-weight: @font-weight;
-        color: @col;
+        color: @col-text;
         background: transparent;
         width: 100%;
         border: 0 solid #000;
@@ -67,7 +67,7 @@
         outline: 0;
 
         &:hover {
-            background: rgba(0,0,0,0.03);
+            background: @col-back-hover;
         }
     }
 
diff --git a/src/_h5ai/client/css/inc/core/topbar.less b/src/_h5ai/client/css/inc/core/topbar.less
index da27b0e3..c9690485 100644
--- a/src/_h5ai/client/css/inc/core/topbar.less
+++ b/src/_h5ai/client/css/inc/core/topbar.less
@@ -10,7 +10,7 @@
     align-content: flex-start;
     align-items: stretch;
 
-    background: @col-lightgrey;
+    background: @col-back-panel;
     box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
     z-index: 1;
 }
@@ -34,7 +34,7 @@
         }
 
         &:hover {
-            background: rgba(0,0,0,0.03);
+            background: @col-back-hover;
         }
     }
 }
@@ -64,8 +64,8 @@
         text-decoration: none;
     }
     &:hover {
-        color: @col-hover;
-        background: rgba(0,0,0,0.03);
+        color: @col-text-hover;
+        background: @col-back-hover;
     }
     &:focus {
         outline: 0;
diff --git a/src/_h5ai/client/css/inc/core/view-details.less b/src/_h5ai/client/css/inc/core/view-details.less
index 621f387d..3fc86237 100644
--- a/src/_h5ai/client/css/inc/core/view-details.less
+++ b/src/_h5ai/client/css/inc/core/view-details.less
@@ -26,7 +26,7 @@
     margin: 16px;
 
     #items {
-        .rounded();
+        .rounded;
         box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
     }
 
@@ -34,7 +34,7 @@
         position: relative;
         white-space: nowrap;
         display: list-item;
-        background: #fafafa;
+        background: @col-back-panel;
         border-bottom: 1px solid rgba(0,0,0,0.07);
         border-radius: 2px 2px 0 0;
 
@@ -46,7 +46,7 @@
 
             &:hover {
                 opacity: 1;
-                color: @col-hover;
+                color: @col-text-hover;
             }
         }
 
@@ -75,7 +75,7 @@
         border-bottom: 1px solid rgba(0,0,0,0.07);
 
         &:hover {
-            .raised();
+            .raised;
             z-index: 1;
         }
 
@@ -92,7 +92,7 @@
         padding: 8px;
 
         .thumb {
-            .rounded();
+            .rounded;
             box-shadow: 0 0 1px 0 rgba(0,0,0,0.2);
         }
     }
diff --git a/src/_h5ai/client/css/inc/core/view-grid.less b/src/_h5ai/client/css/inc/core/view-grid.less
index bf19aad9..82486fdc 100644
--- a/src/_h5ai/client/css/inc/core/view-grid.less
+++ b/src/_h5ai/client/css/inc/core/view-grid.less
@@ -20,21 +20,21 @@
     margin: 8px;
 
     .item {
-        .card();
-        .rounded();
+        .card;
+        .rounded;
         overflow: hidden;
         float: left;
         margin: 8px;
 
         &:hover {
-            .raised();
+            .raised;
         }
     }
 
     .square {
         display: inline-block;
         vertical-align: top;
-        background: #fafafa;
+        background: @col-back-panel;
     }
 
     .label {
diff --git a/src/_h5ai/client/css/inc/core/view-icons.less b/src/_h5ai/client/css/inc/core/view-icons.less
index e71e2c90..e5f51ab7 100644
--- a/src/_h5ai/client/css/inc/core/view-icons.less
+++ b/src/_h5ai/client/css/inc/core/view-icons.less
@@ -24,20 +24,20 @@
     margin: 8px;
 
     .item {
-        .card();
-        .rounded();
+        .card;
+        .rounded;
         overflow: hidden;
         float: left;
         margin: 8px;
 
         &:hover {
-            .raised();
+            .raised;
         }
     }
 
     .landscape {
         display: block;
-        background: #fafafa;
+        background: @col-back-panel;
     }
 
     .label {
diff --git a/src/_h5ai/client/css/inc/core/view.less b/src/_h5ai/client/css/inc/core/view.less
index 1079a2e2..bf999182 100644
--- a/src/_h5ai/client/css/inc/core/view.less
+++ b/src/_h5ai/client/css/inc/core/view.less
@@ -23,11 +23,11 @@
     .item {
         position: relative;
         white-space: nowrap;
-        background: #fff;
+        background: @col-back-paper;
 
         &:hover {
-            color: @col-hover;
-            background: @col-lightgrey;
+            color: @col-text-hover;
+            background: @col-back-panel;
             border-color: @col-border;
 
             .selector {
diff --git a/src/_h5ai/client/css/inc/ext/contextmenu.less b/src/_h5ai/client/css/inc/ext/contextmenu.less
index e723c8bf..60ccc95d 100644
--- a/src/_h5ai/client/css/inc/ext/contextmenu.less
+++ b/src/_h5ai/client/css/inc/ext/contextmenu.less
@@ -9,14 +9,14 @@
     z-index: 200;
 
     .cm-panel {
-        .popup();
-        .rounded();
+        .popup;
+        .rounded;
         display: block;
         position: absolute;
         left: 100px;
         top: 100px;
-        background: #fff;
-        color: @col;
+        background: @col-back-paper;
+        color: @col-text;
         z-index: 10;
         overflow: auto;
         min-width: 200px;
@@ -39,8 +39,8 @@
                 cursor: pointer;
 
                 &:hover {
-                    color: @col-hover;
-                    background: @col-darkgrey;
+                    color: @col-text-hover;
+                    background: @col-grey-100;
                 }
 
                 .cm-icon {
diff --git a/src/_h5ai/client/css/inc/ext/crumb.less b/src/_h5ai/client/css/inc/ext/crumb.less
index 2789c93b..dad955ab 100644
--- a/src/_h5ai/client/css/inc/ext/crumb.less
+++ b/src/_h5ai/client/css/inc/ext/crumb.less
@@ -6,7 +6,7 @@
     // border-left: 1px solid rgba(0,0,0,0.05);
 
     a, a:active, a:visited {
-        color: @col;
+        color: @col-text;
         cursor: pointer;
         text-decoration: none;
 
@@ -14,7 +14,7 @@
             font-weight: bold;
         }
         &:hover {
-            color: @col-hover;
+            color: @col-text-hover;
         }
         &:focus {
             outline: 0;
diff --git a/src/_h5ai/client/css/inc/ext/custom.less b/src/_h5ai/client/css/inc/ext/custom.less
index b7d3c285..4de47c34 100644
--- a/src/_h5ai/client/css/inc/ext/custom.less
+++ b/src/_h5ai/client/css/inc/ext/custom.less
@@ -1,6 +1,6 @@
 #content-header, #content-footer {
     margin: 16px;
-    color: @col;
+    color: @col-text;
     padding: 8px;
 
     a, a:active, a:visited {
@@ -9,7 +9,7 @@
         cursor: pointer;
 
         &:hover {
-            color: @col-dark;
+            color: @col-link-hover;
         }
     }
 
diff --git a/src/_h5ai/client/css/inc/ext/filter.less b/src/_h5ai/client/css/inc/ext/filter.less
index 5b41c36f..fb507439 100644
--- a/src/_h5ai/client/css/inc/ext/filter.less
+++ b/src/_h5ai/client/css/inc/ext/filter.less
@@ -6,7 +6,7 @@
         font-family: @font-family;
         font-weight: lighter;
         font-size: 16px;
-        color: @col;
+        color: @col-text;
         background: transparent;
         outline: 0;
         width: 160px;
diff --git a/src/_h5ai/client/css/inc/ext/info.less b/src/_h5ai/client/css/inc/ext/info.less
index faa2344a..d9470f4a 100644
--- a/src/_h5ai/client/css/inc/ext/info.less
+++ b/src/_h5ai/client/css/inc/ext/info.less
@@ -16,7 +16,7 @@
         height: 180px;
 
         img {
-            .rounded();
+            .rounded;
             display: block;
             overflow: hidden;
             margin: 0 auto;
diff --git a/src/_h5ai/client/css/inc/ext/preview-aud.less b/src/_h5ai/client/css/inc/ext/preview-aud.less
index 0a91798a..a74cc5fb 100644
--- a/src/_h5ai/client/css/inc/ext/preview-aud.less
+++ b/src/_h5ai/client/css/inc/ext/preview-aud.less
@@ -1,8 +1,8 @@
 #pv-aud-audio {
+    .raised;
+
     position: absolute;
 
     max-width: 100%;
     max-height: 100%;
-
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
 }
diff --git a/src/_h5ai/client/css/inc/ext/preview-img.less b/src/_h5ai/client/css/inc/ext/preview-img.less
index 5978164f..cd2f299f 100644
--- a/src/_h5ai/client/css/inc/ext/preview-img.less
+++ b/src/_h5ai/client/css/inc/ext/preview-img.less
@@ -1,4 +1,5 @@
 #pv-img-image {
+    .raised;
 
     @check-white: #f8f8f8;
     @check-black: #e8e8e8;
@@ -15,8 +16,6 @@
     background-size: 60px 60px;
     background-position: 0 0, 30px 30px;
 
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
-
     &.loading {
         opacity: 0.5;
         margin-top: 32px;
diff --git a/src/_h5ai/client/css/inc/ext/preview-txt.less b/src/_h5ai/client/css/inc/ext/preview-txt.less
index 8b98bc45..27e1718c 100644
--- a/src/_h5ai/client/css/inc/ext/preview-txt.less
+++ b/src/_h5ai/client/css/inc/ext/preview-txt.less
@@ -1,13 +1,13 @@
 #pv-txt-text {
+    .raised;
+
     max-width: 960px;
     text-align: left;
-    background: #fff;
+    background: @col-back-paper;
     margin: 0 auto;
     padding: 8px;
     overflow: auto;
 
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
-
     &.highlighted {
 
         code {
diff --git a/src/_h5ai/client/css/inc/ext/preview-vid.less b/src/_h5ai/client/css/inc/ext/preview-vid.less
index 43f8a5c5..23ee93b0 100644
--- a/src/_h5ai/client/css/inc/ext/preview-vid.less
+++ b/src/_h5ai/client/css/inc/ext/preview-vid.less
@@ -1,10 +1,10 @@
 #pv-vid-video {
+    .raised;
+
     position: absolute;
 
     max-width: 100%;
     max-height: 100%;
-
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
 }
 
 #pv-vid-video:-webkit-full-screen {
diff --git a/src/_h5ai/client/css/inc/ext/preview.less b/src/_h5ai/client/css/inc/ext/preview.less
index 8fd7e625..e4d01b7d 100644
--- a/src/_h5ai/client/css/inc/ext/preview.less
+++ b/src/_h5ai/client/css/inc/ext/preview.less
@@ -14,7 +14,7 @@
 }
 
 #pv-overlay.fullscreen {
-    background: #111;
+    background: @col-grey-900;
 }
 
 #pv-content {
@@ -29,7 +29,6 @@
         height: 240px;
         margin: -120px -120px;
         border-radius: 120px;
-        background: #f00;
         opacity: 0.5;
         overflow: hidden;
     }
@@ -57,9 +56,9 @@
 
     &:hover {
         img {
+            .raised;
             opacity: 1;
             background: rgba(27,27,27,0.8);
-            box-shadow: 0 0 8px 2px rgba(0,0,0,0.3);
         }
     }
 }
@@ -126,13 +125,13 @@
 }
 
 #pv-bottombar {
+    .raised;
     position: fixed;
     z-index: 5;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgb(27,27,27);
-    box-shadow: 0 0 8px 2px rgba(0,0,0,0.3);
     height: 48px;
 }
 
diff --git a/src/_h5ai/client/css/inc/ext/tree.less b/src/_h5ai/client/css/inc/ext/tree.less
index fd90b0cd..a0f01aec 100644
--- a/src/_h5ai/client/css/inc/ext/tree.less
+++ b/src/_h5ai/client/css/inc/ext/tree.less
@@ -17,10 +17,10 @@
         margin-left: 20px;
         padding: 3px 0;
         text-decoration: none;
-        color: @col;
+        color: @col-text;
 
         &:hover {
-            color: @col-hover;
+            color: @col-text-hover;
         }
     }
 
diff --git a/src/_h5ai/client/css/inc/misc.less b/src/_h5ai/client/css/inc/misc.less
index c457eaa4..87001604 100644
--- a/src/_h5ai/client/css/inc/misc.less
+++ b/src/_h5ai/client/css/inc/misc.less
@@ -3,8 +3,16 @@ html {
     overflow: auto;
 }
 
-::-moz-selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
-::selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
+::-moz-selection {
+    color: @col-text-native-selection;
+    background: @col-back-native-selection;
+    text-shadow: none;
+}
+::selection {
+    color: @col-text-native-selection;
+    background: @col-back-native-selection;
+    text-shadow: none;
+}
 
 *:focus {
     outline: none;
diff --git a/src/_h5ai/client/css/inc/mixins.less b/src/_h5ai/client/css/inc/mixins.less
index 3ab1e9c2..b3c414f8 100644
--- a/src/_h5ai/client/css/inc/mixins.less
+++ b/src/_h5ai/client/css/inc/mixins.less
@@ -1,22 +1,22 @@
-.card() {
+.card {
     box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
 }
 
-.raised() {
+.raised {
     box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
 }
 
-.popup() {
+.popup {
     box-shadow: 0 1px 20px 0 rgba(0,0,0,0.5);
 }
 
-.rounded() {
+.rounded {
     border-radius: 2px;
 }
 
-.el-button() {
-    .card();
-    .rounded();
+.el-button {
+    .card;
+    .rounded;
     transition: all 0.2s ease-in-out;
     color: @col-text-primary-white;
     background: @col-blue-400;
@@ -25,20 +25,20 @@
     text-decoration: none;
 
     &:hover {
-        .raised();
+        .raised;
     }
 }
 
-.el-input() {
-    .card();
-    .rounded();
+.el-input {
+    .card;
+    .rounded;
     -moz-appearance: none;
     -ms-appearance: none;
     -webkit-appearance: none;
     font-family: @font-family;
     font-weight: @font-weight;
     color: @col-text-primary-black;
-    background: @col-light;
+    background: @col-back-paper;
     border: none;
     outline: none;
 }