From 8d07768a07beea9d07ac554c0a7c87c01bb6ca81 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <13928957+surajshetty3416@users.noreply.github.com>
Date: Wed, 31 Mar 2021 23:42:11 +0530
Subject: [PATCH] fix: Chart style in Dark Mode (#12751)

---
 frappe/public/build.json          |  4 ++--
 frappe/public/scss/desk/dark.scss | 22 ++++++++++++----------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/frappe/public/build.json b/frappe/public/build.json
index 51a2f55a37..f2252b8dfe 100755
--- a/frappe/public/build.json
+++ b/frappe/public/build.json
@@ -79,9 +79,9 @@
 		"public/less/controls.less",
 		"public/less/chat.less",
 		"public/css/fonts/inter/inter.css",
-		"public/scss/desk.scss",
 		"node_modules/frappe-charts/dist/frappe-charts.min.css",
-		"node_modules/plyr/dist/plyr.css"
+		"node_modules/plyr/dist/plyr.css",
+		"public/scss/desk.scss"
 	],
 	"css/frappe-rtl.css": [
 		"public/css/bootstrap-rtl.css",
diff --git a/frappe/public/scss/desk/dark.scss b/frappe/public/scss/desk/dark.scss
index 7bbf582af0..39ad3fa321 100644
--- a/frappe/public/scss/desk/dark.scss
+++ b/frappe/public/scss/desk/dark.scss
@@ -114,19 +114,21 @@
 	// --criticism-bg: var(--red-600);
 
 	// Frappe Charts Colors
-	--charts-label-color: var(--gray-300);
-	--charts-axis-line-color: var(--gray-500);
+	.chart-container {
+		--charts-label-color: var(--gray-300);
+		--charts-axis-line-color: var(--gray-500);
 
-	--charts-stroke-width: 5px;
-	--charts-dataset-circle-stroke: #ffffff;
-	--charts-dataset-circle-stroke-width: var(--charts-stroke-width);
+		--charts-stroke-width: 5px;
+		--charts-dataset-circle-stroke: #ffffff;
+		--charts-dataset-circle-stroke-width: var(--charts-stroke-width);
 
-	--charts-tooltip-title: var(--charts-label-color);
-	--charts-tooltip-label: var(--charts-label-color);
-	--charts-tooltip-value: white;
-	--charts-tooltip-bg: var(--gray-900);
+		--charts-tooltip-title: var(--charts-label-color);
+		--charts-tooltip-label: var(--charts-label-color);
+		--charts-tooltip-value: white;
+		--charts-tooltip-bg: var(--gray-900);
 
-	--charts-legend-label: var(--charts-label-color);
+		--charts-legend-label: var(--charts-label-color);
+	}
 
 	// find better fix
 	.heatmap-chart {