diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 81e8424c65f0e..ff68bbb36b1c7 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -514,12 +514,9 @@
 	/* stylelint-enable function-comma-space-after */
 }
 
-@mixin custom-scrollbars-on-hover() {
+@mixin custom-scrollbars-on-hover($handle-color, $track-color) {
 	visibility: hidden;
 
-	$handle-color: #757575;
-	$track-color: #1e1e1e;
-
 	// WebKit
 	&::-webkit-scrollbar {
 		width: 12px;
diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
index fb8bc46d41878..4db6f772beea7 100644
--- a/packages/edit-site/src/components/sidebar/style.scss
+++ b/packages/edit-site/src/components/sidebar/style.scss
@@ -3,7 +3,7 @@
 	overflow-y: auto;
 
 	.components-navigator-screen {
-		@include custom-scrollbars-on-hover;
+		@include custom-scrollbars-on-hover($gray-700, $gray-900);
 	}
 }