diff --git a/assets/stylesheets/shared/_themes.scss b/assets/stylesheets/shared/_themes.scss
index 598dfaa4862fc..49d7d94cfd7e3 100644
--- a/assets/stylesheets/shared/_themes.scss
+++ b/assets/stylesheets/shared/_themes.scss
@@ -27,10 +27,16 @@
  */
 
 // Layout
-$masterbar-color:         $blue-wordpress;
-$sidebar-bg-color:        $gray-lighten-30;
-$sidebar-text-color:      $gray-dark;
-$sidebar-selected-color:  $gray-text-min;
+$masterbar-color:                  $white;
+$masterbar-bg-color:               $blue-wordpress;
+$masterbar-border-color:           darken( $masterbar-bg-color, 4% );
+$masterbar-item-active-bg-color:   darken( $masterbar-bg-color, 17% );
+$masterbar-item-hover-bg-color:    lighten( $masterbar-bg-color, 5% );
+$masterbar-item-new-color:         $blue-wordpress;
+
+$sidebar-bg-color:                 $gray-lighten-30;
+$sidebar-text-color:               $gray-dark;
+$sidebar-selected-color:           $gray-text-min;
 
 /**
  * 2.0 Color scheme definitions
@@ -41,22 +47,28 @@ $sidebar-selected-color:  $gray-text-min;
 
 $color-schemes: (
 	default: (
-		'--masterbar-color':					$masterbar-color,
-		'--sidebar-bg-color':					$sidebar-bg-color,
-		'--sidebar-text-color':					$sidebar-text-color,
-		'--sidebar-selected-color':				$sidebar-selected-color
+		'--masterbar-color':                    $masterbar-color,
+		'--masterbar-bg-color':                 $masterbar-bg-color,
+		'--masterbar-border-color':             $masterbar-border-color,
+		'--masterbar-item-active-bg-color':     $masterbar-item-active-bg-color,
+		'--masterbar-item-hover-bg-color':      $masterbar-item-hover-bg-color,
+		'--masterbar-item-new-color':           $masterbar-item-new-color,
 	),
 	light: (
-		'--masterbar-color':					$gray,
-		'--sidebar-bg-color':					$white,
-		'--sidebar-text-color':					$sidebar-text-color,
-		'--sidebar-selected-color':				$sidebar-selected-color
+		'--masterbar-color':                    $gray-text,
+		'--masterbar-bg-color':                 $gray-lighten-20,
+		'--masterbar-border-color':             $gray-lighten-10,
+		'--masterbar-item-active-bg-color':     $gray-lighten-10,
+		'--masterbar-item-hover-bg-color':      $gray-lighten-30,
+		'--masterbar-item-new-color':           $gray-text,
 	),
 	dark: (
-		'--masterbar-color':					$gray-dark,
-		'--sidebar-bg-color':					$gray-dark,
-		'--sidebar-text-color':					$white,
-		'--sidebar-selected-color':				$sidebar-selected-color
+		'--masterbar-color':                    $masterbar-color,
+		'--masterbar-bg-color':                 $gray-dark,
+		'--masterbar-border-color':             $gray-darken-10,
+		'--masterbar-item-active-bg-color':     $gray-text-min,
+		'--masterbar-item-hover-bg-color':      $gray-darken-10,
+		'--masterbar-item-new-color':           $masterbar-item-new-color,
 	)
 );
 
diff --git a/client/components/sub-masterbar-nav/style.scss b/client/components/sub-masterbar-nav/style.scss
index c443726544241..e833862cc4e11 100644
--- a/client/components/sub-masterbar-nav/style.scss
+++ b/client/components/sub-masterbar-nav/style.scss
@@ -3,7 +3,7 @@
 	display: flex;
 	flex-direction: column;
 	padding: 56px 20px 28px;
-	background-color: $masterbar-color;
+	background-color: $masterbar-bg-color;
 
 	&:not(.is-collapsed) .sub-masterbar-nav__select {
 		background-color: $blue-dark;
@@ -89,7 +89,7 @@
 
 	&:hover,
  	&:focus {
-		background: lighten( $masterbar-color, 5% );
+		background: lighten( $masterbar-bg-color, 5% );
 		color: $white;
 		outline: 0;
 		transition: all 200ms ease-out;
diff --git a/client/layout/masterbar/style.scss b/client/layout/masterbar/style.scss
index a739fd249c97c..f18c055bc28e6 100644
--- a/client/layout/masterbar/style.scss
+++ b/client/layout/masterbar/style.scss
@@ -3,9 +3,14 @@ $autobar-height: 20px;
 
 // The WordPress.com Masterbar
 .masterbar {
-	background: $masterbar-color;
-	border-bottom: 1px solid darken( $masterbar-color, 4% );
-	color: $white;
+	border-bottom: 1px solid;
+	@include theme-multiple(
+		(
+			'background': --masterbar-bg-color,
+			'border-color': --masterbar-border-color,
+			'color': --masterbar-color,
+		)
+	);
 	font-size: 16px;
 	display: flex;
 	height: $masterbar-height;
@@ -38,7 +43,7 @@ $autobar-height: 20px;
 	display: flex;
 		align-items: center;
 	position: relative;
-	color: $white;
+	@include theme( color, --masterbar-color );
 	font-size: 14px;
 	height: $masterbar-height;
 	line-height: $masterbar-height;
@@ -48,7 +53,7 @@ $autobar-height: 20px;
 	transition: all 150ms ease-in;
 
 	&:visited {
-		color: $white;
+		@include theme( color, --masterbar-color );
 	}
 
 	&[href] {
@@ -56,7 +61,7 @@ $autobar-height: 20px;
 	}
 
 	.masterbar__item-content {
-		color: $white;
+		@include theme( color, --masterbar-color );
 	}
 
 	.gridicon + .masterbar__item-content {
@@ -65,13 +70,13 @@ $autobar-height: 20px;
 
 	&:hover,
 	&:focus {
-		background: lighten( $masterbar-color, 5% );
-		color: $white;
+		@include theme( background, --masterbar-item-hover-bg-color );
+		@include theme( color, --masterbar-color );
 		outline: 0;
 	}
 
 	&.is-active {
-		background: darken( $masterbar-color, 17% );
+		@include theme( background, --masterbar-item-active-bg-color );
 	}
 
 	.is-support-user &.is-active {
@@ -140,13 +145,13 @@ $autobar-height: 20px;
 .masterbar__item-new {
 	background: $white;
 	border-radius: 3px;
-	color: $blue-wordpress;
+	@include theme( color, --masterbar-item-new-color );
 	height: 36px;
 	margin: 5px 8px;
 	transition: all 0.2s ease-out;
 
 	&:visited {
-		color: $blue-wordpress;
+		@include theme( color, --masterbar-item-new-color );
 	}
 
 	&.is-active {
@@ -156,11 +161,11 @@ $autobar-height: 20px;
 	&:hover,
 	&:focus {
 		background: $gray-light;
-		color: $blue-wordpress;
+		@include theme( color, --masterbar-item-new-color );
 	}
 
 	.masterbar__item-content {
-		color: $blue-wordpress;
+		@include theme( color, --masterbar-item-new-color );
 		display: none;
 
 		@include breakpoint( ">960px" ) {
@@ -182,7 +187,7 @@ $autobar-height: 20px;
 
 	// active state when editing
 	.is-group-editor & {
-		background: darken( $masterbar-color, 17% );
+		background: darken( $masterbar-bg-color, 17% );
 		color: $white;
 	}
 
@@ -192,7 +197,7 @@ $autobar-height: 20px;
 	}
 
 	.is-group-editor &:hover {
-		background: darken( $masterbar-color, 13% );
+		background: darken( $masterbar-bg-color, 13% );
 	}
 
 }
@@ -237,7 +242,7 @@ $autobar-height: 20px;
 	}
 
 	.masterbar__notifications-bubble {
-		border: solid 2px $masterbar-color;
+		border: solid 2px $masterbar-bg-color;
 		border-radius: 50%;
 		display: none;
 		font-size: 8px;
@@ -259,11 +264,11 @@ $autobar-height: 20px;
 	}
 
 	&:hover .masterbar__notifications-bubble {
-		border-color: lighten( $masterbar-color, 5% );
+		border-color: lighten( $masterbar-bg-color, 5% );
 	}
 
 	&.is-active .masterbar__notifications-bubble {
-		border-color: darken( $masterbar-color, 10% );
+		border-color: darken( $masterbar-bg-color, 10% );
 	}
 
 	&.has-unread .masterbar__notifications-bubble {
@@ -358,8 +363,8 @@ $autobar-height: 20px;
 	}
 
 	.is-group-editor & {
-		background: darken( $masterbar-color, 12% );
-		border-left: 1px solid darken( $masterbar-color, 5% );
+		background: darken( $masterbar-bg-color, 12% );
+		border-left: 1px solid darken( $masterbar-bg-color, 5% );
 
 		.count {
 			color: $gray-light;
@@ -367,7 +372,7 @@ $autobar-height: 20px;
 	}
 
 	.is-group-editor &:hover {
-		background: darken( $masterbar-color, 17% );
+		background: darken( $masterbar-bg-color, 17% );
 
 		.count {
 			color: $white;