diff --git a/components/placeholder/style.scss b/components/placeholder/style.scss
index 555fa529d489b..9eee059b75002 100644
--- a/components/placeholder/style.scss
+++ b/components/placeholder/style.scss
@@ -9,7 +9,13 @@
 	text-align: center;
 	font-family: $default-font;
 	font-size: $default-font-size;
-	background: $light-gray-100;
+
+	// use opacity to work in various editor styles
+	background: $dark-opacity-light-200;
+
+	.is-dark-theme & {
+		background: $light-opacity-light-200;
+	}
 }
 
 .components-placeholder__label {
diff --git a/edit-post/assets/stylesheets/_colors.scss b/edit-post/assets/stylesheets/_colors.scss
index 9f21b513edafa..5772fec5f2daf 100644
--- a/edit-post/assets/stylesheets/_colors.scss
+++ b/edit-post/assets/stylesheets/_colors.scss
@@ -25,6 +25,46 @@ $light-gray-200: #f3f4f5;
 $light-gray-100: #f8f9f9;
 $white: #fff;
 
+// Dark opacities, for use with light themes
+$dark-opacity-900: rgba( $dark-gray-900, .8 );
+$dark-opacity-800: rgba( $dark-gray-900, .75 );
+$dark-opacity-700: rgba( $dark-gray-900, .7 );
+$dark-opacity-600: rgba( $dark-gray-900, .65 );
+$dark-opacity-500: rgba( $dark-gray-900, .6 );
+$dark-opacity-400: rgba( $dark-gray-900, .55 );
+$dark-opacity-300: rgba( $dark-gray-900, .5 );
+$dark-opacity-200: rgba( $dark-gray-900, .45 );
+$dark-opacity-100: rgba( $dark-gray-900, .4 );
+$dark-opacity-light-900: rgba( $dark-gray-900, .35 );
+$dark-opacity-light-800: rgba( $dark-gray-900, .3 );
+$dark-opacity-light-700: rgba( $dark-gray-900, .25 );
+$dark-opacity-light-600: rgba( $dark-gray-900, .2 );
+$dark-opacity-light-500: rgba( $dark-gray-900, .15 );
+$dark-opacity-light-400: rgba( $dark-gray-900, .1 );
+$dark-opacity-light-300: rgba( $dark-gray-900, .075 );
+$dark-opacity-light-200: rgba( $dark-gray-900, .05 );
+$dark-opacity-light-100: rgba( $dark-gray-900, .025 );
+
+// Light opacities, for use with dark themes
+$light-opacity-900: rgba( $white, 1 );
+$light-opacity-800: rgba( $white, .9 );
+$light-opacity-700: rgba( $white, .85 );
+$light-opacity-600: rgba( $white, .8 );
+$light-opacity-500: rgba( $white, .75 );
+$light-opacity-400: rgba( $white, .7 );
+$light-opacity-300: rgba( $white, .65 );
+$light-opacity-200: rgba( $white, .6 );
+$light-opacity-100: rgba( $white, .55 );
+$light-opacity-light-900: rgba( $white, .5 );
+$light-opacity-light-800: rgba( $white, .45 );
+$light-opacity-light-700: rgba( $white, .4 );
+$light-opacity-light-600: rgba( $white, .35 );
+$light-opacity-light-500: rgba( $white, .3 );
+$light-opacity-light-400: rgba( $white, .25 );
+$light-opacity-light-300: rgba( $white, .2 );
+$light-opacity-light-200: rgba( $white, .15 );
+$light-opacity-light-100: rgba( $white, .1 );
+
 // Additional colors
 // some from https://make.wordpress.org/design/handbook/foundations/colors/
 $blue-wordpress: #0073aa;
diff --git a/edit-post/assets/stylesheets/_mixins.scss b/edit-post/assets/stylesheets/_mixins.scss
index fe5f3db38f8c5..badee2f7d96c8 100644
--- a/edit-post/assets/stylesheets/_mixins.scss
+++ b/edit-post/assets/stylesheets/_mixins.scss
@@ -127,17 +127,20 @@ $float-margin: calc( 50% - #{ $content-width-padding / 2 } );
 }
 
 @mixin button-style__hover {
+	background-color: $white;
 	color: $dark-gray-900;
 	box-shadow: inset 0 0 0 1px $light-gray-500, inset 0 0 0 2px $white, 0 1px 1px rgba( $dark-gray-900, .2 );
 }
 
 @mixin button-style__active() {
 	outline: none;
+	background-color: $white;
 	color: $dark-gray-900;
 	box-shadow: inset 0 0 0 1px $light-gray-700, inset 0 0 0 2px $white;
 }
 
 @mixin button-style__focus-active() {
+	background-color: $white;
 	color: $dark-gray-900;
 	box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white;
 
diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
index dd99e2b0b8fc3..bdd3f4b492282 100644
--- a/edit-post/assets/stylesheets/_z-index.scss
+++ b/edit-post/assets/stylesheets/_z-index.scss
@@ -3,8 +3,8 @@
 // value is designed to work with).
 
 $z-layers: (
+	'.editor-block-list__block-edit:before': 0,
 	'.editor-block-switcher__arrow': 1,
-	'.editor-block-list__block-edit:before': -1,
 	'.editor-block-list__block .wp-block-more:before': -1,
 	'.editor-block-list__block {core/image aligned left or right}': 20,
 	'.editor-block-list__block {core/image aligned wide or fullwide}': 20,
diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss
index 2ab7413575a2f..71047034849fb 100644
--- a/edit-post/assets/stylesheets/main.scss
+++ b/edit-post/assets/stylesheets/main.scss
@@ -48,6 +48,11 @@
 	}
 }
 
+// in order to use mix-blend-mode, this element needs to have an explicitly set background-color
+html {
+	background: $white;
+}
+
 body.gutenberg-editor-page {
 	background: $white;
 
@@ -174,17 +179,33 @@ body.gutenberg-editor-page {
 .editor-block-list__block {
 	input,
 	textarea {
+		// use opacity to work in various editor styles
 		&::-webkit-input-placeholder {
-			color: $dark-gray-300;
+			color: $dark-opacity-300;
 		}
 		&::-moz-placeholder {
-			color: $dark-gray-300;
+			color: $dark-opacity-300;
 		}
 		&:-ms-input-placeholder {
-			color: $dark-gray-300;
+			color: $dark-opacity-300;
 		}
 		&:-moz-placeholder {
-			color: $dark-gray-300;
+			color: $dark-opacity-300;
+		}
+
+		.is-dark-theme & {
+			&::-webkit-input-placeholder {
+				color: $light-opacity-300;
+			}
+			&::-moz-placeholder {
+				color: $light-opacity-300;
+			}
+			&:-ms-input-placeholder {
+				color: $light-opacity-300;
+			}
+			&:-moz-placeholder {
+				color: $light-opacity-300;
+			}
 		}
 	}
 }
diff --git a/edit-post/components/layout/style.scss b/edit-post/components/layout/style.scss
index 34a8ce6053e51..fa6899853fb06 100644
--- a/edit-post/components/layout/style.scss
+++ b/edit-post/components/layout/style.scss
@@ -10,6 +10,7 @@
 		position: sticky;
 		top: $header-height;
 		right: 0;
+		color: $dark-gray-900;
 
 		@include break-small {
 			position: fixed;
diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
index 7412f27d4e74d..5c2b7abcfbd4b 100644
--- a/edit-post/components/visual-editor/style.scss
+++ b/edit-post/components/visual-editor/style.scss
@@ -67,7 +67,7 @@
 
 // This is a focus style shown for blocks that need an indicator even when in an isEditing state
 // like for example an image block that receives arrowkey focus.
-.edit-post-visual-editor .editor-block-list__block:not( .is-selected )   {
+.edit-post-visual-editor .editor-block-list__block:not( .is-selected ) {
 	.editor-block-list__block-edit {
 		box-shadow: 0 0 0 0 $white, 0 0 0 0 $dark-gray-900;
 		transition: .1s box-shadow .05s;
@@ -86,6 +86,7 @@
 	.editor-post-permalink {
 		left: $block-padding;
 		right: $block-padding;
+		color: $dark-gray-900;
 	}
 
 	@include break-small() {
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index 5411d6119e98e..56bf9082c2029 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -1,6 +1,6 @@
 .components-draggable__clone {
 	& > .editor-block-list__block > .editor-block-list__block-draggable {
-		background: $white;
+		background: $white; // @todo: ensure this works with themes that invert the color
 		box-shadow: $shadow-popover;
 
 		@include break-small {
@@ -33,9 +33,15 @@
 		right: 0;
 		bottom: 0;
 		left: 0;
-		background-color: $light-gray-200;
 		visibility: hidden;
 
+		// use opacity to work in various editor styles
+		background-color: $dark-opacity-light-200;
+
+		.is-dark-theme & {
+			background-color: $light-opacity-light-200;
+		}
+
 		@include break-small {
 			margin: 0 48px;
 		}
@@ -57,7 +63,7 @@
 	}
 
 
-	cursor: move;/* Fallback for IE/Edge < 14 */
+	cursor: move; // Fallback for IE/Edge < 14
 	cursor: grab;
 }
 
@@ -168,16 +174,26 @@
 		top: 10px;
 	}
 
-	&.is-selected > .editor-block-mover:before,
 	&.is-hovered > .editor-block-mover:before {
-		border-right: 1px solid $light-gray-500;
 		right: 0;
+
+		// use opacity to work in various editor styles
+		border-right: 1px solid $dark-opacity-light-500;
+
+		.is-dark-theme & {
+			border-right-color: $light-opacity-light-500;
+		}
 	}
 
-	&.is-selected > .editor-block-settings-menu:before,
 	&.is-hovered > .editor-block-settings-menu:before {
-		border-left: 1px solid $light-gray-500;
 		left: 0;
+
+		// use opacity to work in various editor styles
+		border-left: 1px solid $dark-opacity-light-500; 
+
+		.is-dark-theme & {
+			border-left-color: $light-opacity-light-500;
+		}
 	}
 
 	&.is-typing .editor-block-list__empty-block-inserter,
@@ -213,7 +229,12 @@
 
 	// focused block-style
 	&.is-selected > .editor-block-list__block-edit:before {
-		outline: 1px solid $light-gray-500;
+		// use opacity to work in various editor styles
+		outline: 1px solid $dark-opacity-light-500;
+	
+		.is-dark-theme & {
+			outline-color: $light-opacity-light-500;
+		}
 	}
 
 	/**
@@ -235,6 +256,13 @@
 
 	&.is-multi-selected .editor-block-list__block-edit:before {
 		background: $blue-medium-highlight;
+
+		// use opacity to work in various editor styles
+		mix-blend-mode: multiply;
+	
+		.is-dark-theme & {
+			mix-blend-mode: soft-light;
+		}
 	}
 
 	/**
@@ -250,7 +278,12 @@
 	}
 
 	&.is-shared > .editor-block-list__block-edit:before {
-		outline: 1px dashed $light-gray-500;
+		// use opacity to work in various editor styles
+		outline: 1px dashed $dark-opacity-light-500;
+
+		.is-dark-theme & {
+			outline-color: $light-opacity-light-500;
+		}
 	}
 
 	/**
@@ -501,11 +534,6 @@
 	margin: $item-spacing;
 	cursor: move;/* Fallback for IE/Edge < 14 */
 	cursor: grab;
-
-	.editor-inserter__toggle {
-		color: $dark-gray-300;
-		margin: 4px 0 0 -4px;	// align better with text blocks
-	}
 }
 
 .editor-block-list__insertion-point {
@@ -652,10 +680,18 @@
 
 .editor-block-contextual-toolbar .editor-block-toolbar,
 .editor-block-list__breadcrumb .components-toolbar {
-	border: 1px solid $light-gray-500;
 	width: 100%;
 	background: $white;
 
+	// use opacity to work in various editor styles
+	background-clip: padding-box;
+	box-sizing: padding-box;
+	border: 1px solid $dark-opacity-light-500; 
+
+	.is-dark-theme & {
+		border-color: $light-opacity-light-500; 
+	}
+
 	// this prevents floats from messing up the position
 	position: absolute;
 	left: 0;
@@ -665,16 +701,15 @@
 		right: 0;
 	}
 
-	// remove stacked borders in inline toolbar
-	> div:first-child {
-		margin-left: -1px;
-	}
-
 	@include break-small() {
 		width: auto;
 	}
 }
 
+.editor-block-contextual-toolbar .editor-block-toolbar {
+	border-bottom: none;
+}
+
 .editor-block-list__breadcrumb .components-toolbar {
 	padding: 0px 12px;
 	line-height: $block-toolbar-height - 1px;
diff --git a/editor/components/block-mover/style.scss b/editor/components/block-mover/style.scss
index a6ce8ff48b69b..9242aa5f7a077 100644
--- a/editor/components/block-mover/style.scss
+++ b/editor/components/block-mover/style.scss
@@ -14,17 +14,27 @@
 	border: none;
 	outline: none;
 	background: none;
-	color: $dark-gray-300;
 	cursor: pointer;
 	padding: 0;
 	width: $block-side-ui-width;
 	height: $block-side-ui-width;	// the side UI can be no taller than 2 * $block-side-ui-width, which matches the height of a line of text
 	border-radius: $button-style__radius-roundrect;
 
+	// use opacity to work in various editor styles
+	color: $dark-opacity-300;
+
+	.is-dark-theme & {
+		color: $light-opacity-300;
+	}
+
 	&[aria-disabled="true"] {
 		cursor: default;
-		color: $light-gray-300;
 		pointer-events: none;
+		color: $dark-opacity-light-300; // use opacity to work in various editor styles
+
+		.is-dark-theme & {
+			color: $light-opacity-light-300;
+		}
 	}
 
 	svg {
diff --git a/editor/components/block-settings-menu/style.scss b/editor/components/block-settings-menu/style.scss
index a7bb45c17fecd..239996f51a03c 100644
--- a/editor/components/block-settings-menu/style.scss
+++ b/editor/components/block-settings-menu/style.scss
@@ -6,7 +6,7 @@
 	}
 }
 
-// The Blocks "More" Menu ellipsis icon button
+// The Blocks "More" Menu ellipsis icon button, and trash button
 .editor-block-settings-remove,
 .editor-block-settings-menu__toggle {
 	justify-content: center;
@@ -15,6 +15,13 @@
 	height: $block-side-ui-width;
 	border-radius: $button-style__radius-roundrect;
 
+	// use opacity to work in various editor styles
+	color: $dark-opacity-500;
+
+	.is-dark-theme & {
+		color: $light-opacity-500;
+	}
+
 	// Apply a background in nested contexts, only on desktop
 	@include break-small() {
 		.editor-block-list__layout .editor-block-list__layout & {
@@ -22,6 +29,7 @@
 			border-color: $light-gray-500;
 			border-style: solid;
 			border-width: 1px;
+			color: $dark-gray-500; // always show dark gray in nested contexts
 		}
 	}
 }
diff --git a/editor/components/block-toolbar/style.scss b/editor/components/block-toolbar/style.scss
index a75efcff4d5e0..c615ffadab7e9 100644
--- a/editor/components/block-toolbar/style.scss
+++ b/editor/components/block-toolbar/style.scss
@@ -24,5 +24,8 @@
 
 .editor-block-toolbar .editor-block-switcher {
 	display: inline-flex;
-	border-left: 1px solid $light-gray-500;
+
+	.edit-post-header-toolbar__block-toolbar & {
+		border-left-color: 1px solid $light-gray-500;
+	}
 }
diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss
index bf2ef1bf5ce9f..68420d7a4e392 100644
--- a/editor/components/default-block-appender/style.scss
+++ b/editor/components/default-block-appender/style.scss
@@ -14,17 +14,30 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 		font-family: $editor-font;
 		cursor: text;
 		width: 100%;
-		color: $dark-gray-300;
 		font-family: $editor-font;
 		outline: 1px solid transparent;
 		transition: 0.2s outline;
+
+		// use opacity to work in various editor styles
+		color: $dark-opacity-300;
+
+		.is-dark-theme & {
+			color: $light-opacity-300;
+		}
 	}
 
 	// Show quick insertion icons faded until hover
 	.editor-inserter-with-shortcuts {
-		.components-icon-button {
-			color: $light-gray-700;
-			transition: color 0.2s;
+		opacity: .5;
+		transition: opacity 0.2s;
+
+		.components-icon-button:not( :hover ) {
+			// use opacity to work in various editor styles
+			color: $dark-opacity-500;
+
+			.is-dark-theme & {
+				color: $light-opacity-500;
+			}
 		}
 	}
 
@@ -36,10 +49,6 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 	&:hover {
 		.editor-inserter-with-shortcuts {
 			opacity: 1;
-
-			.components-icon-button {
-				color: $dark-gray-500;
-			}
 		}
 
 		.editor-inserter__toggle {
@@ -59,19 +68,28 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 	position: absolute;
 	top: $item-spacing;
 	right: $item-spacing;	// show on the right on mobile
-	transition: opacity 0.2s;
 
 	@include break-small {
 		left: -$block-side-ui-padding;
 		right: auto;
 	}
 
+	&:disabled {
+		display: none;
+	}
+
 	.editor-inserter__toggle {
+		transition: opacity 0.2s;
 		border-radius: 50%;
-	}
 
-	&:disabled {
-		display: none;
+		// use opacity to work in various editor styles
+		&:not( :hover ) {
+			color: $dark-opacity-500;
+
+			.is-dark-theme & {
+				color: $light-opacity-500;
+			}
+		}
 	}
 }
 
diff --git a/editor/components/inserter-with-shortcuts/style.scss b/editor/components/inserter-with-shortcuts/style.scss
index 0e8009d5b2803..3d89b83a79ec7 100644
--- a/editor/components/inserter-with-shortcuts/style.scss
+++ b/editor/components/inserter-with-shortcuts/style.scss
@@ -12,4 +12,11 @@
 	width: $icon-button-size;
 	height: $icon-button-size;
 	padding-top: 8px;
+
+	// use opacity to work in various editor styles
+	color: $dark-opacity-light-700;
+
+	.is-dark-theme & {
+		color: $light-opacity-light-700;
+	}
 }
diff --git a/editor/components/post-permalink/style.scss b/editor/components/post-permalink/style.scss
index 646f22098b9df..c9f687dae2859 100644
--- a/editor/components/post-permalink/style.scss
+++ b/editor/components/post-permalink/style.scss
@@ -1,7 +1,6 @@
 .editor-post-permalink {
 	display: inline-flex;
 	align-items: center;
-	border: 1px solid $light-gray-500;
 	background: $white;
 	padding: 5px;
 	font-family: $default-font;
@@ -9,6 +8,12 @@
 	height: 40px;
 	white-space: nowrap;
 
+	// use opacity to work in various editor styles
+	border: 1px solid $dark-opacity-light-500;
+	border-bottom: none;
+	background-clip: padding-box;
+	box-sizing: padding-box;
+
 	// put toolbar snugly to edge on mobile
 	margin-left: -$block-padding - 1px;	// stack borders
 	margin-right: -$block-padding - 1px;
diff --git a/editor/components/post-title/style.scss b/editor/components/post-title/style.scss
index 8b589eb4d8476..690f7f86d3043 100644
--- a/editor/components/post-title/style.scss
+++ b/editor/components/post-title/style.scss
@@ -9,6 +9,7 @@
 		margin: 0;
 		box-shadow: none;
 		border: 1px solid transparent;
+		background: transparent;
 		font-family: $editor-font;
 		line-height: $default-line-height;
 
@@ -19,14 +20,19 @@
 
 	&.is-selected .editor-post-title__input,
 	.editor-post-title__input:hover {
-		border: 1px solid $light-gray-500;
+		// use opacity to work in various editor styles
+		border: 1px solid $dark-opacity-light-500;
+
+		.is-dark-theme & {
+			border-color: $light-opacity-light-500;
+		}
 	}
 }
 
 .editor-post-title .editor-post-permalink {
 	font-size: $default-font-size;
 	position: absolute;
-	top: -34px;
+	top: -35px;
 	left: 0;
 	right: 0;
 }