logo: make header color configurable #1012

assets/css/theme-learn.css

@@ -18,6 +18,7 @@
   --MENU-HOME-LINK-color: rgba(224, 224, 224, 1); /* Color of the home button text */
   --MENU-HOME-LINK-HOVER-color: rgba(240, 240, 240, 1); /* Color of the hovered home button text */
 
+  --MENU-HEADER-color: rgba(255, 255, 255, 1); /* color of menu header */
   --MENU-HEADER-BG-color: rgba(132, 81, 161, 1); /* Background color of menu header */
   --MENU-HEADER-BORDER-color: rgba(156, 111, 182, 1); /*Color of menu header border */
 
@@ -40,11 +41,3 @@
   --BOX-BG-color: rgba(255, 255, 255, 0.833); /* color of the content background */
   --BOX-TEXT-color: rgba(16, 16, 16, 1); /* fixed color of the content text */
 }
-
-body a#R-logo,
-body a#R-logo:hover,
-body #R-logo svg,
-body #R-logo svg * {
-  color: var(--INTERNAL-MENU-SEARCH-color);
-  fill: var(--INTERNAL-MENU-SEARCH-color) !important;
-}

assets/css/theme-neon.css

@@ -25,6 +25,7 @@
   --OPENAPI-theme: dark; /* name of the default OpenAPI theme for this variant, can be overridden in hugo.toml */
   --OPENAPI-CODE-theme: tomorrow-night; /* name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml */
 
+  --MENU-HEADER-color: rgba(255, 255, 255, 1); /* color of menu header */
   --MENU-HEADER-BG-color: rgba(0, 0, 0, 0); /* background color of menu header */
 
   --MENU-HOME-LINK-color: rgba(255, 255, 255, 1); /* home button color if configured */
@@ -65,14 +66,6 @@
   --BOX-RED-TEXT-color: var(--BOX-RED-color); /* text color of red boxes */
 }
 
-body a#R-logo,
-body a#R-logo:hover,
-body #R-logo svg,
-body #R-logo svg * {
-  color: var(--INTERNAL-MENU-SEARCH-BORDER-color);
-  fill: var(--INTERNAL-MENU-SEARCH-BORDER-color) !important;
-}
-
 body a#R-logo {
   text-shadow:
     0 0 1px var(--INTERNAL-MENU-SEARCH-BORDER-color),

assets/css/theme-relearn-bright.css

@@ -43,11 +43,3 @@
   --BOX-BG-color: rgba(255, 255, 255, 0.833); /* background color of colored boxes */
   --BOX-TEXT-color: rgba(16, 16, 16, 1); /* text color of colored box content */
 }
-
-body a#R-logo,
-body a#R-logo:hover,
-body #R-logo svg,
-body #R-logo svg * {
-  color: var(--MENU-SEARCH-color);
-  fill: var(--MENU-SEARCH-color) !important;
-}

assets/css/theme-relearn-dark.css

@@ -22,6 +22,8 @@
   --OPENAPI-theme: dark; /* name of the default OpenAPI theme for this variant, can be overridden in hugo.toml */
   --OPENAPI-CODE-theme: obsidian; /* name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml */
 
+  --MENU-HEADER-color: rgba(40, 40, 40, 1); /* color of menu header */
+
   --MENU-HOME-LINK-color: rgba(64, 64, 64, 1); /* home button color if configured */
   --MENU-HOME-LINK-HOVER-color: rgba(0, 0, 0, 1); /* hovered home button color if configured */
 

assets/css/theme-relearn-light.css

@@ -22,6 +22,8 @@
   --OPENAPI-theme: light; /* name of the default OpenAPI theme for this variant, can be overridden in hugo.toml */
   --OPENAPI-CODE-theme: idea; /* name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml */
 
+  --MENU-HEADER-color: rgba(40, 40, 40, 1); /* color of menu header */
+
   --MENU-HOME-LINK-color: rgba(64, 64, 64, 1); /* home button color if configured */
   --MENU-HOME-LINK-HOVER-color: rgba(0, 0, 0, 1); /* hovered home button color if configured */
 

assets/css/theme-zen-dark.css

@@ -50,11 +50,3 @@
 
   --BOX-GREY-color: rgba(71, 71, 71, 1); /* background color of grey boxes */
 }
-
-body a#R-logo,
-body a#R-logo:hover,
-body #R-logo svg,
-body #R-logo svg * {
-  color: var(--MENU-HOME-LINK-color);
-  fill: var(--MENU-HOME-LINK-color) !important;
-}

assets/css/theme-zen-light.css

@@ -50,11 +50,3 @@
 
   --BOX-GREY-color: rgba(210, 210, 210, 1); /* background color of grey boxes */
 }
-
-body a#R-logo,
-body a#R-logo:hover,
-body #R-logo svg,
-body #R-logo svg * {
-  color: var(--MENU-HOME-LINK-color);
-  fill: var(--MENU-HOME-LINK-color) !important;
-}

assets/css/theme.css

@@ -2424,7 +2424,7 @@ html[dir='rtl'] #R-sidebar ul.collapsible-menu > li > input:checked + label > i.
 }
 
 a#R-logo {
-  color: var(--MENU-SECTIONS-BG-color);
+  color: var(--INTERNAL-MENU-HEADER-color);
   font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings);
   font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight);
   font-family: var(--INTERNAL-MAIN-TITLES-H4-font);
@@ -2433,7 +2433,7 @@ a#R-logo {
   white-space: nowrap;
 }
 a#R-logo:hover {
-  color: var(--MENU-SECTIONS-BG-color);
+  color: var(--INTERNAL-MENU-HEADER-color);
 }
 
 /* those sizes are for the default logo */
@@ -2446,10 +2446,22 @@ a#R-logo.R-default {
   }
 }
 
+body a#R-logo,
+body a#R-logo:hover,
 body #R-logo svg,
-body #R-logo svg * {
+body #R-logo svg :not([color]),
-  color: var(--MENU-SECTIONS-BG-color);
+body #R-logo svg :not([color='black']),
-  fill: var(--MENU-SECTIONS-BG-color) !important;
+body #R-logo svg :not([color='#000000']) {
+  color: var(--INTERNAL-MENU-HEADER-color) !important;
+}
+
+body a#R-logo,
+body a#R-logo:hover,
+body #R-logo svg,
+body #R-logo svg :not([fill]),
+body #R-logo svg :not([fill='black']),
+body #R-logo svg :not([fill='#000000']) {
+  fill: var(--INTERNAL-MENU-HEADER-color) !important;
 }
 
 .columnize {

assets/css/variables.css

@@ -81,6 +81,8 @@
     --INTERNAL-MENU-BORDER-color: var(--MENU-BORDER-color, transparent);
     --INTERNAL-MENU-TOPBAR-BORDER-color: var(--MENU-TOPBAR-BORDER-color, var(--INTERNAL-MENU-HEADER-BG-color));
     --INTERNAL-MENU-TOPBAR-SEPARATOR-color: var(--MENU-TOPBAR-SEPARATOR-color, transparent);
+
+    --INTERNAL-MENU-HEADER-color: var(--MENU-HEADER-color, var(--INTERNAL-MENU-SECTIONS-LINK-color));
     --INTERNAL-MENU-HEADER-BG-color: var(--MENU-HEADER-BG-color, var(--PRIMARY-color, rgba( 0, 0, 0, 0 ))); /* not --INTERNAL-PRIMARY-color */
     --INTERNAL-MENU-HEADER-BORDER-color: var(--MENU-HEADER-BORDER-color, var(--INTERNAL-MENU-HEADER-BG-color));
     --INTERNAL-MENU-HEADER-SEPARATOR-color: var(--MENU-HEADER-SEPARATOR-color, var(--INTERNAL-MENU-HEADER-BORDER-color));

docs/content/introduction/releasenotes/7/4.en.md

@@ -43,4 +43,6 @@ weight = -4
 
   This was done to be compatible with adding custom scripts in an older version of the Hugo documentation.
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The logo color is now configurable via the `--MENU-HEADER-color` variable in your variant stylesheets.
+
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Table headers are sticky now.

layouts/partials/version.txt

@@ -1 +1 @@
-7.3.2+5f9fee85c496d624b916f206a0e97bf0861fe268
+7.3.2+71b4e34bc10d55f7f151d72b7d65d5e05cb5f655

static/js/variant.js

@@ -561,6 +561,7 @@ var variants = {
     { name: 'MENU-BORDER-color', group: 'header', default: 'transparent', tooltip: 'border color between menu and content' },
     { name: 'MENU-TOPBAR-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color', tooltip: 'border color of vertical line between menu and topbar' },
     { name: 'MENU-TOPBAR-SEPARATOR-color', group: 'header', default: 'transparent', tooltip: 'separator color of vertical line between menu and topbar' },
+    { name: 'MENU-HEADER-color', group: 'header', fallback: 'MENU-SECTIONS-LINK-color', tooltip: 'color of menu header' },
     { name: 'MENU-HEADER-BG-color', group: 'header', fallback: 'PRIMARY-color', tooltip: 'background color of menu header' },
     { name: 'MENU-HEADER-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color', tooltip: 'border color between menu header and menu' },
     { name: 'MENU-HEADER-SEPARATOR-color', group: 'header', fallback: 'MENU-HEADER-BORDER-color', tooltip: 'separator color between menu header and menu' },