diff --git a/frappe/public/scss/dark.scss b/frappe/public/scss/dark.scss
index f449396cc6..89fdb76fe5 100644
--- a/frappe/public/scss/dark.scss
+++ b/frappe/public/scss/dark.scss
@@ -36,6 +36,7 @@
 	--border-color: var(--gray-700);
 	--dark-border-color: var(--gray-600);
 	--highlight-color: var(--gray-700);
+	--yellow-highlight-color: var(--yellow-700);
 
 	.frappe-card {
 		.btn-default {
diff --git a/frappe/public/scss/grid.scss b/frappe/public/scss/grid.scss
index 8a4d021636..a88a2d6dba 100644
--- a/frappe/public/scss/grid.scss
+++ b/frappe/public/scss/grid.scss
@@ -40,7 +40,7 @@
 	// padding: 10px 15px;
 
 	&.highlight {
-		background-color: var(--yellow-50);
+		background-color: var(--yellow-highlight-color);
 	}
 
 	&.sortable-handle {
diff --git a/frappe/public/scss/list.scss b/frappe/public/scss/list.scss
index 71f058a1b1..4b3682d65b 100644
--- a/frappe/public/scss/list.scss
+++ b/frappe/public/scss/list.scss
@@ -79,9 +79,9 @@ body.no-list-sidebar {
 	flex-direction: column;
 	outline: none;
 
-	// &:focus {
-	//		background-color: $light-yellow;
-	// }
+	&:focus {
+		background-color: var(--yellow-highlight-color);
+	}
 }
 
 .list-row {
diff --git a/frappe/public/scss/variables.scss b/frappe/public/scss/variables.scss
index 362e36583a..b4d6469fb1 100644
--- a/frappe/public/scss/variables.scss
+++ b/frappe/public/scss/variables.scss
@@ -181,6 +181,7 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
 	--border-color: var(--gray-100);
 	--dark-border-color: var(--gray-300);
 	--highlight-color: var(--gray-50);
+	--yellow-highlight-color: var(--yellow-50);
 
 	// Border Sizes
 	--border-radius-sm: 4px;