diff --git a/packages/base-styles/_default-custom-properties.scss b/packages/base-styles/_default-custom-properties.scss
index 52dfeb3899d772..5760753c48ce85 100644
--- a/packages/base-styles/_default-custom-properties.scss
+++ b/packages/base-styles/_default-custom-properties.scss
@@ -1,4 +1,3 @@
-
 // It is important to include these styles in all built stylesheets.
 // This allows to CSS variables post CSS plugin to generate fallbacks.
 // It also provides default CSS variables for npm package consumers.
@@ -6,4 +5,5 @@
 	@include admin-scheme(#007cba);
 	--wp-block-synced-color: #7a00df;
 	--wp-block-synced-color--rgb: #{hex-to-rgb(#7a00df)};
+	--wp-bound-block-color: #9747ff;
 }
diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
index dd3f3eee016d57..4b2d3df725a66b 100644
--- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
+++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
@@ -11,7 +11,7 @@ export default function BlockBindingsToolbarIndicator() {
 			<ToolbarItem
 				as={ 'div' }
 				aria-label={ _x( 'Connected', 'block toolbar button label' ) }
-				className="block-editor__block-bindings-indicator block-toolbar__block-bindings-indicator"
+				className="block-editor-block-bindings-toolbar-indicator"
 			>
 				<Icon icon={ connection } size={ 24 } />
 			</ToolbarItem>
diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
index 30e4b724b5b52d..4aeabdf8acf6e8 100644
--- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
+++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
@@ -1,14 +1,14 @@
-.block-toolbar__block-bindings-indicator {
+.block-editor-block-bindings-toolbar-indicator {
 	display: inline-flex;
 	align-items: center;
 	height: 48px;
 	padding: 6px;
-}
 
-.block-editor__block-bindings-indicator svg g {
-	stroke: #9747ff;
-	fill: transparent;
-	stroke-width: 1.5;
-	stroke-linecap: round;
-	stroke-linejoin: round;
+	svg g {
+		stroke: var(--wp-bound-block-color);
+		fill: transparent;
+		stroke-width: 1.5;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
 }
diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
index 891c574af65883..c929c1014dc030 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/index.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -130,7 +130,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	const hasBlockBindings = !! blockEditContext[ blockBindingsKey ];
 	const bindingsStyle =
 		hasBlockBindings && canBindBlock( name )
-			? { '--wp-admin-theme-color': '#9747FF' }
+			? { '--wp-admin-theme-color': 'var(--wp-bound-block-color)' }
 			: {};
 
 	// Ensures it warns only inside the `edit` implementation for the block.
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index b5200006b7e1ed..1214ec4ec7c08a 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -288,7 +288,7 @@ function ListViewBlockSelectButton(
 						</span>
 					) }
 					{ isConnected && canBindBlock( blockName ) && (
-						<span className="block-editor__block-bindings-indicator">
+						<span className="block-editor-list-view-block-select-button__bindings">
 							<Icon icon={ connection } />
 						</span>
 					) }
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 11cf1fafa0e14b..1245bfbabcb7a7 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -557,3 +557,11 @@ $block-navigation-max-indent: 8;
 .list-view-appender__description {
 	display: none;
 }
+
+.block-editor-list-view-block-select-button__bindings svg g {
+	stroke: var(--wp-bound-block-color);
+	fill: transparent;
+	stroke-width: 1.5;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+}