From edf3ba2583211238805eda7fcbe895e88f677300 Mon Sep 17 00:00:00 2001
From: Emruz Hossain <hossainemruz@gmail.com>
Date: Mon, 6 Jan 2025 17:12:16 +0600
Subject: [PATCH] Add support for different logo on dark mode

Fixes #1013

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/hugo-toha/toha/issues/1013?shareId=XXXX-XXXX-XXXX-XXXX).
---
 assets/scripts/features/darkmode/index.js |  2 +-
 assets/scripts/features/theme/index.js    |  2 +-
 assets/styles/components/images.scss      | 20 +++++++++++++++++++-
 layouts/partials/navigators/navbar.html   | 15 +++++++++++++++
 4 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/assets/scripts/features/darkmode/index.js b/assets/scripts/features/darkmode/index.js
index 74ac8e099..5d8443e40 100644
--- a/assets/scripts/features/darkmode/index.js
+++ b/assets/scripts/features/darkmode/index.js
@@ -67,4 +67,4 @@ function setImages(newScheme) {
       if (dark !== null) dark.style.display = 'none'
     }
   }
-}
\ No newline at end of file
+}
diff --git a/assets/scripts/features/theme/index.js b/assets/scripts/features/theme/index.js
index 3d7ae0830..f845e9d8b 100644
--- a/assets/scripts/features/theme/index.js
+++ b/assets/scripts/features/theme/index.js
@@ -85,4 +85,4 @@ function setImages(newScheme) {
       if (dark !== null) dark.style.display = 'none'
     }
   }
-}
\ No newline at end of file
+}
diff --git a/assets/styles/components/images.scss b/assets/styles/components/images.scss
index 146ea8b0c..8a354092b 100644
--- a/assets/styles/components/images.scss
+++ b/assets/styles/components/images.scss
@@ -55,4 +55,22 @@ html[data-theme='dark'] {
 .company-logo {
   max-height: 100%;
   width: auto;
-}
\ No newline at end of file
+}
+
+.light-logo {
+  display: inline;
+}
+
+.dark-logo {
+  display: none;
+}
+
+html[data-theme='dark'] {
+  .light-logo {
+    display: none;
+  }
+
+  .dark-logo {
+    display: inline;
+  }
+}
diff --git a/layouts/partials/navigators/navbar.html b/layouts/partials/navigators/navbar.html
index bb8274fdf..704c3ce3b 100644
--- a/layouts/partials/navigators/navbar.html
+++ b/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>