theme: add accent color #409

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

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) */

static/css/nucleus.css

@@ -68,10 +68,6 @@ strong {
 dfn {
   font-style: italic; }
 
-mark {
-  background: #FFFF27;
-  color: #333; }
-
 sub,
 sup {
   font-size: 0.8rem;

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 */

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 */

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 */

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;

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);

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', },