From 99d3fe3893ebef7732c8f7bad01925f90d9b5b68 Mon Sep 17 00:00:00 2001
From: Ankush Menat <ankush@frappe.io>
Date: Tue, 12 Jul 2022 19:59:42 +0530
Subject: [PATCH] fix(dark theme): background color on version page

---
 frappe/core/doctype/version/version_view.html | 11 +++++-----
 frappe/public/scss/common/css_variables.scss  |  4 ++++
 frappe/public/scss/desk/dark.scss             |  4 ++++
 frappe/public/scss/desk/global.scss           | 20 ++++++-------------
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/frappe/core/doctype/version/version_view.html b/frappe/core/doctype/version/version_view.html
index 67f005ed4c..a17460ccc7 100644
--- a/frappe/core/doctype/version/version_view.html
+++ b/frappe/core/doctype/version/version_view.html
@@ -18,8 +18,8 @@
 		{% for item in data.changed %}
 		<tr>
 			<td>{{ frappe.meta.get_label(doc.ref_doctype, item[0]) }}</td>
-			<td class="danger">{{ item[1] }}</td>
-			<td class="success">{{ item[2] }}</td>
+			<td class="diff-remove">{{ item[1] }}</td>
+			<td class="diff-add">{{ item[2] }}</td>
 		</tr>
 		{% endfor %}
 	</tbody>
@@ -43,8 +43,7 @@
 			{% for item in values %}
 			<tr>
 				<td>{{ frappe.meta.get_label(doc.ref_doctype, item[0]) }}</td>
-				<td class="{{
-					key==="added" ? __("success") : __("danger") }}">
+				<td class="{{ key==="added" ? "diff-add" : "diff-remove" }}">
 					{% var item_keys = Object.keys(item[1]).sort(); %}
 					<table class="table table-bordered">
 						<tbody>
@@ -86,8 +85,8 @@
 				<td>{{ frappe.meta.get_label(doc.ref_doctype, table_info[0]) }}</td>
 				<td>{{ table_info[1] }}</td>
 				<td>{{ item[0] }}</td>
-				<td class="danger">{{ item[1] }}</td>
-				<td class="success">{{ item[2] }}</td>
+				<td class="diff-remove">{{ item[1] }}</td>
+				<td class="diff-add">{{ item[2] }}</td>
 			</tr>
 			{% endfor %}
 		{% endfor %}
diff --git a/frappe/public/scss/common/css_variables.scss b/frappe/public/scss/common/css_variables.scss
index ab52c10e45..efcbe06920 100644
--- a/frappe/public/scss/common/css_variables.scss
+++ b/frappe/public/scss/common/css_variables.scss
@@ -262,6 +262,10 @@ $input-height: 28px !default;
 	--checkbox-focus-shadow: 0 0 0 2px var(--gray-300);
 	--checkbox-gradient: linear-gradient(180deg, #4AC3F8 -124.51%, var(--primary) 100%);
 
+    // "diff" colors
+    --diff-added: var(--green-100);
+    --diff-removed: var(--red-100);
+
 	--right-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.25 7.5L4.75 4L1.25 0.5' stroke='%231F272E' stroke-linecap='round' stroke-linejoin='round'/></svg>");
 	--left-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.5 9.5L4 6l3.5-3.5' stroke='%231F272E' stroke-linecap='round' stroke-linejoin='round'></path></svg>");
 }
diff --git a/frappe/public/scss/desk/dark.scss b/frappe/public/scss/desk/dark.scss
index c627d88f89..3d05ecd237 100644
--- a/frappe/public/scss/desk/dark.scss
+++ b/frappe/public/scss/desk/dark.scss
@@ -93,6 +93,10 @@
 
 	--shadow-base:  0px 4px 8px rgba(114, 176, 233, 0.06), 0px 0px 4px rgba(112, 172, 228, 0.12);
 
+    // "diff" colors
+    --diff-added: var(--green-800);
+    --diff-removed: var(--red-800);
+
 	// input
 	--input-disabled-bg: none;
 
diff --git a/frappe/public/scss/desk/global.scss b/frappe/public/scss/desk/global.scss
index 6a85dea6dd..7466bdc874 100644
--- a/frappe/public/scss/desk/global.scss
+++ b/frappe/public/scss/desk/global.scss
@@ -579,22 +579,14 @@ details > summary:focus {
 	color: var(--text-color);
 }
 
-
-.diffview .insert {
-	background-color: var(--green-100);
+.diffview .insert,
+.diff-add {
+	background-color: var(--diff-added);
 }
 
-.diffview .delete {
-	background-color: var(--red-100);
-}
-
-[data-theme="dark"] {
-	.diffview .insert {
-		background-color: var(--green-800);
-	}
-	.diffview .delete {
-		background-color: var(--red-800);
-	}
+.diffview .delete,
+.diff-remove {
+	background-color: var(--diff-removed);
 }
 
 // REDESIGN TODO: Handling of broken images?