fix: Chart style in Dark Mode (#12751)

frappe · Mar 31, 2021 · 8d07768 · 8d07768
1 parent b279ca2
commit 8d07768
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git 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
@@ -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 {