theme: add accent color matcornic#409

maxatome · Dec 2, 2022 · 41582f6 · 41582f6
1 parent 20b5175
commit 41582f6
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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', },