diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md
index c453b7ccef..edef68be0c 100644
--- a/exampleSite/content/basics/migration/_index.en.md
+++ b/exampleSite/content/basics/migration/_index.en.md
@@ -22,6 +22,8 @@ This document shows you what's new in the latest release. For a detailed list of
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme now supports some of GFM (GitHub Flavored Markdown) syntax and Hugo Markdown extensions, namely [task lists]({{% relref "cont/markdown#tasks" %}}), [defintion lists]({{% relref "cont/markdown#defintions" %}}) and [footnotes]({{% relref "cont/markdown#footnotes" %}}).
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} A new color `--ACCENT-color` was introduced which is used for highlightning search results on the page. In case you simply don't care, you don't need to change anything in your variant stylesheet as the old `yellow` color is still used as default.
+
 ---
 
 ## 5.7.0
diff --git a/static/css/ie.css b/static/css/ie.css
index 84480ccec4..fe9d7a8f66 100644
--- a/static/css/ie.css
+++ b/static/css/ie.css
@@ -154,6 +154,10 @@
 		color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */
 	}
 
+	mark {
+		background-color: #ffff00;
+	}
+
 	h1 {
 		color: #101010; /* var(--MAIN-TEXT-color) */
 		font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */
diff --git a/static/css/nucleus.css b/static/css/nucleus.css
index e9547ebae0..6ce283ec0b 100644
--- a/static/css/nucleus.css
+++ b/static/css/nucleus.css
@@ -68,10 +68,6 @@ strong {
 dfn {
   font-style: italic; }
 
-mark {
-  background: #FFFF27;
-  color: #333; }
-
 sub,
 sup {
   font-size: 0.8rem;
diff --git a/static/css/theme-neon.css b/static/css/theme-neon.css
index 8ead2d5ac0..8b34b67eaf 100644
--- a/static/css/theme-neon.css
+++ b/static/css/theme-neon.css
@@ -12,6 +12,7 @@
 :root {
     --PRIMARY-color: #f300b2; /* brand primary color */
     --SECONDARY-color: #1c90f3; /* brand secondary color */
+    --ACCENT-color: #ffaa00; /* brand accent color, used for search highlights */
 
     --MAIN-TEXT-color: #e0e0e0; /* text color of content and h1 titles */
     --MAIN-LINK-HOVER-color: #4cabff; /* hovered link color of content */
diff --git a/static/css/theme-relearn-dark.css b/static/css/theme-relearn-dark.css
index e33b2aeda9..7ad782c305 100644
--- a/static/css/theme-relearn-dark.css
+++ b/static/css/theme-relearn-dark.css
@@ -8,6 +8,7 @@
 :root {
     --PRIMARY-color: #7dc903; /* brand primary color */
     --SECONDARY-color: #6c8ce3; /* brand secondary color */
+    --ACCENT-color: #ff44ff; /* brand accent color, used for search highlights */
 
     --MAIN-TEXT-color: #e0e0e0; /* text color of content and h1 titles */
     --MAIN-LINK-HOVER-color: #93b0ff; /* hovered link color of content */
diff --git a/static/css/theme-relearn-light.css b/static/css/theme-relearn-light.css
index 990ad70451..e79dd9a706 100644
--- a/static/css/theme-relearn-light.css
+++ b/static/css/theme-relearn-light.css
@@ -8,6 +8,7 @@
 :root {
     --PRIMARY-color: #7dc903; /* brand primary color */
     --SECONDARY-color: #486ac9; /* brand secondary color */
+    --ACCENT-color: #ff88ff; /* brand accent color, used for search highlights */
 
     --MAIN-TEXT-color: #101010; /* text color of content and h1 titles */
     --MAIN-LINK-HOVER-color: #202891; /* hovered link color of content */
diff --git a/static/css/theme.css b/static/css/theme.css
index 6562a802fa..303d61dad2 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -422,6 +422,10 @@ body:not(.print) #body-inner.narrow p {
     text-align: justify;
 }
 
+mark {
+    color: black;
+}
+
 h1 {
     font-weight: 200;
     text-align: center;
diff --git a/static/css/variant.css b/static/css/variant.css
index 3ac6ae8b59..069b31ae81 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -3,6 +3,7 @@
     this is only possible because every color variant defines this variable, otherwise we would have been lost */
     --INTERNAL-PRIMARY-color: var(--PRIMARY-color, var(--MENU-HEADER-BG-color, rgba( 0, 0, 0, 0 ))); /* not --INTERNAL-MENU-HEADER-BG-color */
     --INTERNAL-SECONDARY-color: var(--SECONDARY-color, var(--MAIN-LINK-color, #486ac9)); /* not --INTERNAL-MAIN-LINK-color */
+    --INTERNAL-ACCENT-color: var(--ACCENT-color, #ffff00);
 
     --INTERNAL-MAIN-LINK-color: var(--MAIN-LINK-color, var(--SECONDARY-color, #486ac9)); /* not --INTERNAL-SECONDARY-color */
     --INTERNAL-MAIN-LINK-HOVER-color: var(--MAIN-LINK-HOVER-color, var(--INTERNAL-MAIN-LINK-color));
@@ -183,6 +184,10 @@ a:hover,
     color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
 }
 
+mark {
+    background-color: var(--INTERNAL-ACCENT-color);
+}
+
 h1 {
     color: var(--INTERNAL-MAIN-TITLES-H1-color);
     font-family: var(--INTERNAL-MAIN-TITLES-H1-font);
diff --git a/static/js/variant.js b/static/js/variant.js
index d14819e40b..6869aeb1a7 100644
--- a/static/js/variant.js
+++ b/static/js/variant.js
@@ -525,6 +525,7 @@ var variants = {
 	variantvariables: [
 		{ name: 'PRIMARY-color',                         group: 'content',       fallback: 'MENU-HEADER-BG-color',        tooltip: 'brand primary color', },
 		{ name: 'SECONDARY-color',                       group: 'content',       fallback: 'MAIN-LINK-color',             tooltip: 'brand secondary color', },
+		{ name: 'ACCENT-color',                          group: 'content',        default: '#ffff00',                     tooltip: 'brand accent color, used for search highlights', },
 
 		{ name: 'MAIN-LINK-color',                       group: 'content',       fallback: 'SECONDARY-color',             tooltip: 'link color of content', },
 		{ name: 'MAIN-LINK-HOVER-color',                 group: 'content',       fallback: 'MAIN-LINK-color',             tooltip: 'hoverd link color of content', },