diff --git a/erpnext/public/scss/point-of-sale.scss b/erpnext/public/scss/point-of-sale.scss
index 27f1ee45481aeee64baefb7cac6c7c44f1de25b0..e0e01c9506e9d028d3a85075b8f4e29a30b50ac4 100644
--- a/erpnext/public/scss/point-of-sale.scss
+++ b/erpnext/public/scss/point-of-sale.scss
@@ -773,7 +773,7 @@
 
 		.submit-order-btn {
 			@extend .primary-action;
-			background-color: var(--blue-500);
+			background-color: var(--primary-color);
 			color: white;
 		}
 
diff --git a/erpnext/selling/page/point_of_sale/pos_item_cart.js b/erpnext/selling/page/point_of_sale/pos_item_cart.js
index dd4ead71107125b2f78ff7de3f91dd5805c31b56..7a360e5fd36912ee9e7c02f369c02ca6d75ee9ed 100644
--- a/erpnext/selling/page/point_of_sale/pos_item_cart.js
+++ b/erpnext/selling/page/point_of_sale/pos_item_cart.js
@@ -191,8 +191,8 @@ erpnext.PointOfSale.ItemCart = class {
 			this.numpad_value = '';
 		});
 
-		this.$component.on('click', '.checkout-btn', async function() {
-			if ($(this).attr('style').indexOf('--blue-500') == -1) return;
+		this.$component.on("click", ".checkout-btn", async function () {
+			if ($(this).attr("style").indexOf("--primary-color") == -1) return;
 
 			await me.events.checkout();
 			me.toggle_checkout_btn(false);
@@ -689,14 +689,14 @@ erpnext.PointOfSale.ItemCart = class {
 
 	highlight_checkout_btn(toggle) {
 		if (toggle) {
-			this.$add_discount_elem.css('display', 'flex');
-			this.$cart_container.find('.checkout-btn').css({
-				'background-color': 'var(--blue-500)'
+			this.$add_discount_elem.css("display", "flex");
+			this.$cart_container.find(".checkout-btn").css({
+				"background-color": "var(--primary-color)",
 			});
 		} else {
-			this.$add_discount_elem.css('display', 'none');
-			this.$cart_container.find('.checkout-btn').css({
-				'background-color': 'var(--blue-200)'
+			this.$add_discount_elem.css("display", "none");
+			this.$cart_container.find(".checkout-btn").css({
+				"background-color": "var(--gray-200)",
 			});
 		}
 	}