First pass at using CSS variables.

src/application/dockpanel.less

@@ -5,7 +5,7 @@
 
 
 .p-DockPanel-tabPanel > .p-StackedPanel {
-  background: white;
+  background:var(--jp-dockpanel-content-background);
   border-left: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
   border-right: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
   border-bottom: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
@@ -14,7 +14,7 @@
 
 .p-DockPanel-overlay {
   background: rgba(33, 150, 243, 0.1);
-  border: var(--jp-borderWidth) dashed var(--jp-1st-branch-color);
+  border: var(--jp-borderWidth) dashed var(--jp-1st-brand-color);
   transition-property: top, left, right, bottom;
   transition-duration: 150ms;
   transition-timing-function: ease;
@@ -31,7 +31,7 @@
 
 
 #jp-main-dock-panel .p-TabBar-tab.jp-mod-current {
-  border-top: var(--jp-borderWidth) solid var(--jp-1st-branch-color);
+  border-top: var(--jp-borderWidth) solid var(--jp-1st-brand-color);
 }
 
 

src/application/menus.less

@@ -11,8 +11,8 @@
 
 .p-MenuBar {
   padding-left: 5px;
-  background: white;
-  color: rgba(0, 0, 0, 0.87);
+  background: var(--jp-menu-background);
+  color: var(--jp-menu-font-color);
   font-size: var(--jp-ui-fontSize);
 }
 
@@ -31,13 +31,12 @@
 
 
 .p-MenuBar-item.p-mod-active {
-  background: #E5E5E5;
+  background: var(--jp-menu-selected-background);
 }
 
 
 .p-MenuBar.p-mod-active .p-MenuBar-item.p-mod-active {
   z-index: 10001;
-  background: white;
   border-left: var(--jp-borderWidth) solid #C0C0C0;
   border-right: var(--jp-borderWidth) solid #C0C0C0;
   box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
@@ -45,7 +44,7 @@
 
 
 .p-MenuBar-item.p-mod-disabled {
-  color: rgba(0, 0, 0, 0.26);
+  color: var(--jp-2nd-ui-font-color);
 }
 
 
@@ -53,12 +52,12 @@
   margin: 2px;
   padding: 0;
   border: none;
-  border-left: var(--jp-borderWidth) solid #DDDDDD;
+  border-left: var(--jp-borderWidth) solid var(--jp-2nd-borderColor);
 }
 
 
 .p-MenuBar-item.p-mod-active > .p-MenuBar-itemLabel {
-  color: var(--jp-1st-branch-color);
+  color: var(--jp-1st-brand-color);
 }
 
 
@@ -75,7 +74,7 @@
 
 #jp-top-panel {
   border-bottom: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
-  background: white;
+  background: var(--jp-menu-background);
   display: flex;
   min-height: 28px;
 }
@@ -89,9 +88,9 @@
 .p-Menu {
   z-index: 10000;
   padding: 4px 0px;
-  background: white;
-  color: rgba(0, 0, 0, 0.87);
-  border: var(--jp-borderWidth) solid #C0C0C0;
+  background: var(--jp-menu-background);
+  color: var(--jp-1st-ui-font-color);
+  border: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
   font-size: var(--jp-ui-fontSize);
   box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
 }
@@ -106,12 +105,12 @@
 
 
 .p-Menu-item.p-mod-active {
-  background: #E5E5E5;
+  background: var(--jp-menu-selected-background);
 }
 
 
 .p-Menu-item.p-mod-disabled {
-  color: rgba(0, 0, 0, 0.25);
+  color: var(--jp-2nd-ui-font-color);
 }
 
 
@@ -156,7 +155,7 @@
   display: block;
   position: relative;
   top: 4px;
-  border-top: var(--jp-borderWidth) solid #DDDDDD;
+  border-top: var(--jp-borderWidth) solid var(--jp-2nd-layout-color);
 }
 
 .p-Menu-itemIcon::before,

src/application/sidepanel.less

@@ -6,7 +6,7 @@
 
 .jp-SideBar.p-TabBar {
   color: var(--jp-1st-ui-font-color);
-  background: white;
+  background: var(--jp-sidepanel-tab-unselected-background);
   font-size: 14px;
   min-width: 36px;
   max-width: 36px;
@@ -51,7 +51,7 @@
 
 .jp-SideBar .p-TabBar-tab {
   padding: 0 18px;
-  background: white;
+  background: var(--jp-sidepanel-tab-unselected-background);
   border: none;
   overflow: visible;
 }
@@ -63,13 +63,13 @@
 
 
 .jp-SideBar .p-TabBar-tab:hover:not(.p-mod-current) {
-  background: #FAFAFA;
+  background: var(--jp-sidepanel-tab-hover-background);
 }
 
 
 .jp-SideBar .p-TabBar-tab.p-mod-current {
-  color: var(--jp-1st-branch-color);
-  background: #FAFAFA;
+  color: var(--jp-1st-brand-color);
+  background: var(--jp-sidepanel-tab-selected-background);
 }
 
 

src/application/tabs.less

@@ -65,18 +65,18 @@
 
 .p-TabBar-tab {
   padding: 0px 10px;
-  background: #EEEEEE;
+  background: var(--jp-tab-unselected-background);
   border: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
 }
 
 
 .p-TabBar-tab.p-mod-current {
-  background: white;
+  background: var(--jp-tab-selected-background);
 }
 
 
 .p-TabBar-tab:hover:not(.p-mod-current) {
-  background: #FAFAFA;
+  background: var(--jp-tab-hover-background);
 }
 
 
@@ -190,9 +190,9 @@
   min-width: var(--jp-horizontal-tab-width);
   line-height: var(--jp-horizontal-tab-height);
   color: var(--jp-1st-ui-font-color);
-  background: white;
+  background: var(--jp-tab-selected-background);
   border: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
-  border-top: var(--jp-borderWidth) solid var(--jp-1st-branch-color);
+  border-top: var(--jp-borderWidth) solid var(--jp-1st-brand-color);
   font-size: var(--jp-ui-fontSize);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
   transform: translateX(-40%) translateY(-58%);
@@ -201,7 +201,7 @@
 
 .p-TabPanel-stackedPanel {
   padding: 0px;
-  background: white;
+  background: var(--jp-dockpanel-content-background);
   border: var(--jp-borderWidth) solid #C0C0C0;
   // This shadow requires a bottom/right padding on the .p-DockPanel-tabPanel
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

src/commandpalette/index.less

@@ -24,7 +24,7 @@
 .p-CommandPalette-wrapper::after {
     font-family: FontAwesome;
     content: "\f002"; /* search */
-    color: var(--jp-1st-branch-color);
+    color: var(--jp-1st-brand-color);
 }
 
 .p-CommandPalette-input {

src/default-theme/variables.less

@@ -10,10 +10,10 @@
   // Borders
 
   --jp-borderWidth: 1px;
-  --jp-0th-borderColor: var(--md-grey-500);  
-  --jp-1st-borderColor: var(--md-grey-400);
+  --jp-0th-borderColor: var(--md-grey-700);  
+  --jp-1st-borderColor: var(--md-grey-500);
   --jp-2nd-borderColor: var(--md-grey-300);
-  --jp-3rd-borderColor: var(--md-grey-200);
+  --jp-3rd-borderColor: var(--md-grey-100);
 
   // UI Fonts
 
@@ -44,8 +44,8 @@
 
   --jp-0th-layout-color: white;  
   --jp-1st-layout-color: white;
-  --jp-2nd-layout-color: var(--md-grey-100);
-  --jp-3rd-layout-color: var(--md-grey-200);
+  --jp-2nd-layout-color: var(--md-grey-200);
+  --jp-3rd-layout-color: var(--md-grey-400);
 
   // Brand/accent
 
@@ -60,27 +60,26 @@
 
   // Menus
   --jp-menu-font-color: var(--jp-1st-ui-font-color);
-  --jp-menu-color: var(--jp-1st-layout-color);
-  --jp-menu-border-color: var(--jp-1st-borderColor);
-  --jp-menu-hover-color: var(--jp-2nd-layout-color);
+  --jp-menu-background: var(--jp-1st-layout-color);
+  --jp-menu-selected-background: var(--jp-2nd-layout-color);
+  --jp-menu-hover-background: var(--jp-2nd-layout-color);
 
   // Tabs
-  --jp-tab-selected-color: var(--jp-1st-layout-color);
-  --jp-tab-unselected-color: var(--jp-2nd-layout-color);
-  --jp-tab-hover-color: var(--jp-1st-layout-color);
+  --jp-tab-selected-background: var(--jp-1st-layout-color);
+  --jp-tab-unselected-background: var(--jp-2nd-layout-color);
+  --jp-tab-hover-background: var(--jp-1st-layout-color);
 
   // DockPanel
   --jp-dockpanel-background: var(--jp-3rd-layout-color);
-  --jp-dockpanel-content-color: var(--jp-1st-layout-color);
-  --jp-dockpanel-borderColor: var(--jp-1st-borderColor);
-  --jp-dockpanel-tab-selected-color: var(--jp-tab-selected-color);
-  --jp-dockpanel-tab-unselected-color: var(--jp-tab-unselected-color);
-  --jp-dockpanel-tab-hover-color: var(--jp-tab-hover-color);
+  --jp-dockpanel-content-background: var(--jp-1st-layout-color);
+  --jp-dockpanel-tab-selected-background: var(--jp-tab-selected-background);
+  --jp-dockpanel-tab-unselected-background: var(--jp-tab-unselected-background);
+  --jp-dockpanel-tab-hover-background: var(--jp-tab-hover-background);
 
   // SidePanel
-  --jp-sidepanel-background: var(--jp-1st-layout-color);
-  --jp-sidepanel-tab-selected-color: var(--jp-tab-selected-color);
-  --jp-sidepanel-tab-unselected-color: var(--jp-tab-unselected-color);
-  --jp-sidepanel-tab-hover-color: var(--jp-tab-hover-color);
+  --jp-sidepanel-content-background: var(--jp-1st-layout-color);
+  --jp-sidepanel-tab-selected-background: var(--jp-tab-selected-background);
+  --jp-sidepanel-tab-unselected-background: var(--jp-tab-unselected-background);
+  --jp-sidepanel-tab-hover-background: var(--jp-tab-hover-background);
 
 }

src/dialog/index.less

@@ -82,7 +82,7 @@
 
 
 .jp-Dialog-okButton {
-  background: var(--jp-1st-branch-color);
+  background: var(--jp-1st-brand-color);
   color: white;
 }
 

src/faq/index.less

@@ -97,7 +97,7 @@ h1 span.jp-FAQ-title {
 .jp-FAQ-a {
     text-decoration: none;
     cursor: pointer;
-    color: var(--jp-1st-branch-color);
+    color: var(--jp-1st-brand-color);
 }
 
 

src/filebrowser/index.less

@@ -182,7 +182,7 @@
 
 .jp-DirListing-item.jp-mod-selected {
   color: white;
-  background: var(--jp-1st-branch-color);
+  background: var(--jp-1st-brand-color);
 }
 
 

src/inspector/index.less

@@ -32,7 +32,7 @@
 .jp-Inspector .p-TabBar-tab.p-mod-current {
   min-height: 24px;
   background: #FFFFFF;
-  border-top: var(--jp-borderWidth) solid var(--jp-1st-branch-color);
+  border-top: var(--jp-borderWidth) solid var(--jp-1st-brand-color);
 }