fix: Use css variables for mention colors

frappe/public/scss/common/quill.scss

@@ -119,7 +119,7 @@
 	border: 1px solid var(--border-color);
 	padding: 2px 5px;
 	font-size: var(--text-sm);
-	background-color: var(--fg-color);
+	background-color: var(--user-mention-bg-color);
 }
 
 // table
@@ -174,7 +174,7 @@
 .ql-editor.read-mode {
 	padding: 0;
 	.mention {
-		background-color: var(--control-bg);
+		--user-mention-bg-color: var(--control-bg);
 	}
 }
 
@@ -193,5 +193,5 @@
 }
 
 .mention[data-is-group="true"] {
-	background-color: var(--purple-100) !important;
+	background-color: var(--group-mention-bg-color);
 }

frappe/public/scss/desk/css_variables.scss

@@ -59,6 +59,10 @@ $input-height: 28px !default;
 	--timeline-content-max-width: 700px;
 	--timeline-left-padding: calc(var(--padding-xl) + var(--timeline-item-icon-size) / 2);
 
+	// mentions
+	--user-mention-bg-color: var(--fg-color);
+	--group-mention-bg-color: var(--bg-purple);
+
 	// skeleton
 	--skeleton-bg: var(--gray-100);
 

frappe/public/scss/desk/dark.scss

@@ -99,7 +99,7 @@
 	.ql-editor {
 		color: var(--text-on-gray);
 		&.read-mode {
-			span,
+			span:not(.mention),
 			p,
 			u,
 			strong {