diff --git a/frappe/public/build.json b/frappe/public/build.json
index 35e9d62436..fcf2c29673 100755
--- a/frappe/public/build.json
+++ b/frappe/public/build.json
@@ -305,5 +305,6 @@
 	"css/email.css": "public/scss/email.scss",
 	"js/barcode_scanner.min.js": "public/js/frappe/barcode_scanner/quagga.js",
 	"js/user_profile_controller.min.js": "desk/page/user_profile/user_profile_controller.js",
-	"css/login.css": "public/scss/login.scss"
+	"css/login.css": "public/scss/login.scss",
+	"js/data_import_tools.min.js": "public/js/frappe/data_import/index.js"
 }
diff --git a/frappe/public/js/frappe/data_import/import_preview.js b/frappe/public/js/frappe/data_import/import_preview.js
index 477cfb0786..32a41587f7 100644
--- a/frappe/public/js/frappe/data_import/import_preview.js
+++ b/frappe/public/js/frappe/data_import/import_preview.js
@@ -188,12 +188,13 @@ frappe.data_import.ImportPreview = class ImportPreview {
 			.join(',');
 		this.datatable.style.setStyle(row_classes, {
 			pointerEvents: 'none',
-			backgroundColor: frappe.ui.color.get_color_shade('white', 'light'),
-			color: frappe.ui.color.get_color_shade('black', 'extra-light')
+			backgroundColor: frappe.ui.color.get_color_shade('gray', 'extra-light'),
+			color: frappe.ui.color.get_color_shade('gray', 'dark')
 		});
 	}
 
 	add_actions() {
+		console.log("add_actions")
 		let actions = [
 			{
 				label: __('Map Columns'),
diff --git a/frappe/public/js/frappe/ui/colors.js b/frappe/public/js/frappe/ui/colors.js
index 9ce71abae4..ec9607c387 100644
--- a/frappe/public/js/frappe/ui/colors.js
+++ b/frappe/public/js/frappe/ui/colors.js
@@ -39,7 +39,8 @@ frappe.ui.color = {
 		};
 
 		if(Object.keys(shades).includes(shade)) {
-			return frappe.ui.color_map[color_name][shades[shade]];
+			const color = this.get_color(color_name)
+			return color[shades[shade]];
 		} else {
 			// eslint-disable-next-line
 			console.warn(`'shade' can be one of ${Object.keys(shades)} and not ${shade}`);