Add support for different logo on dark mode (#1020)

assets/styles/components/images.scss

@@ -56,3 +56,21 @@ html[data-theme='dark'] {
   max-height: 100%;
   width: auto;
 }
+
+.light-logo {
+  display: inline;
+}
+
+.dark-logo {
+  display: none;
+}
+
+html[data-theme='dark'] {
+  .light-logo {
+    display: none;
+  }
+
+  .dark-logo {
+    display: inline;
+  }
+}

layouts/partials/navigators/navbar.html

@@ -13,6 +13,7 @@
 {{/* by default, don't use any logo */}}
 {{ $mainLogo := "" }}
 {{ $invertedLogo := "" }}
+{{ $darkLogo := "" }}
 
 {{/*  if custom logo has been provided, use them  */}}
 {{ if site.Params.logo.main }}
@@ -21,6 +22,9 @@
 {{ if site.Params.logo.inverted }}
   {{ $invertedLogo = site.Params.logo.inverted }}
 {{ end }}
+{{ if site.Params.logo.dark }}
+  {{ $darkLogo = site.Params.logo.dark }}
+{{ end }}
 
 {{/* resize the logos. don't resize svg because it is not supported */}}
 {{ if $mainLogo }}
@@ -39,6 +43,14 @@
   {{ $invertedLogo = $invertedLogo.RelPermalink}}
 {{ end }}
 
+{{ if $darkLogo }}
+  {{ $darkLogo = resources.Get $darkLogo}}
+  {{ if and $darkLogo (ne $darkLogo.MediaType.SubType "svg")}}
+    {{ $darkLogo = $darkLogo.Resize "42x" }}
+  {{ end }}
+  {{ $darkLogo = $darkLogo.RelPermalink}}
+{{ end }}
+
 {{ $logo := $mainLogo }}
 {{ if .IsHome }}
   {{ $logo = $invertedLogo }}
@@ -154,4 +166,7 @@
   {{ if $invertedLogo }}
     <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo" alt="Inverted Logo">
   {{ end }}
+  {{ if $darkLogo }}
+    <img src="{{ $darkLogo }}" class="d-none" id="dark-logo" alt="Dark Logo">
+  {{ end }}
 </nav>