diff --git a/css/backoffice/pages/_all.scss b/css/backoffice/pages/_all.scss
index c5f9aa004..11f5a7599 100644
--- a/css/backoffice/pages/_all.scss
+++ b/css/backoffice/pages/_all.scss
@@ -12,4 +12,5 @@
 @import "datamodel-viewer";
 @import "csv-import";
 @import "global-search";
+@import "run-query";
 @import "welcome-popup";
\ No newline at end of file
diff --git a/css/backoffice/pages/_run-query.scss b/css/backoffice/pages/_run-query.scss
new file mode 100644
index 000000000..efe4674dc
--- /dev/null
+++ b/css/backoffice/pages/_run-query.scss
@@ -0,0 +1,10 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-run-query--highlight--background-color: $ibo-color-primary-300 !default;
+
+.ibo-run-query--highlight{
+  background-color: $ibo-run-query--highlight--background-color;
+}
\ No newline at end of file
diff --git a/datamodels/2.x/combodo-backoffice-darkmoon-theme/scss/scss-variables.scss b/datamodels/2.x/combodo-backoffice-darkmoon-theme/scss/scss-variables.scss
index f2e504844..a8b2e550b 100644
--- a/datamodels/2.x/combodo-backoffice-darkmoon-theme/scss/scss-variables.scss
+++ b/datamodels/2.x/combodo-backoffice-darkmoon-theme/scss/scss-variables.scss
@@ -247,3 +247,5 @@ $ibo-vendors-c3--legend--fill: $ibo-color-white-200;
 $ibo-vendors-c3--legend--background-color: $ibo-color-white-100;
 $ibo-vendors-c3--legend-item--fill: $ibo-color-grey-100;
 $ibo-vendors-c3--axis--fill: $ibo-color-grey-200;
+
+$ibo-run-query--highlight--background-color: $ibo-color-primary-700;
\ No newline at end of file
diff --git a/pages/run_query.php b/pages/run_query.php
index 5010ef1f0..e930ceeb6 100644
--- a/pages/run_query.php
+++ b/pages/run_query.php
@@ -66,7 +66,7 @@ function ShowExamples($oP, $sExpression)
 			$sDisable = '';
 			if ($sOql == $sExpression) {
 				// this one is currently being tested, highlight it
-				$sHighlight = "background-color:yellow;";
+				$sHighlight = "ibo-run-query--highlight";
 				$sDisable = 'disabled';
 				// and remember we are testing a query of the list
 				$bUsingExample = true;
@@ -79,8 +79,8 @@ function ShowExamples($oP, $sExpression)
 			$oFormButton->AddSubBlock(new Html($sContext));
 			//$aDisplayData[$sTopic][] = array(
 			$aDisplayData[Dict::S('UI:RunQuery:QueryExamples')][] = array(
-				'desc' => "<div style=\"$sHighlight\">".utils::EscapeHtml($sDescription)."</div>",
-				'oql' => "<div style=\"$sHighlight\">".utils::EscapeHtml($sOql)."</div>",
+				'desc' => "<div class=\"$sHighlight\">".utils::EscapeHtml($sDescription)."</div>",
+				'oql' => "<div class=\"$sHighlight\">".utils::EscapeHtml($sOql)."</div>",
 				'go' => BlockRenderer::RenderBlockTemplates($oFormButton),
 			);
 		}
@@ -313,7 +313,7 @@ EOF
 					$sBefore = substr($sExpression, 0, $e->GetColumn());
 					$sAfter = substr($sExpression, $e->GetColumn() + strlen($sWrongWord));
 					$sFixedExpression = $sBefore.$sSuggestedWord.$sAfter;
-					$sFixedExpressionHtml = $sBefore.'<span style="background-color:yellow">'.$sSuggestedWord.'</span>'.$sAfter;
+					$sFixedExpressionHtml = $sBefore.'<span class="ibo-run-query--highlight">'.$sSuggestedWord.'</span>'.$sAfter;
 					$sSyntaxErrorText .= "<p>Suggesting: $sFixedExpressionHtml</p>";
 					$oSyntaxErrorPanel->AddSubBlock(new Html($sSyntaxErrorText));