From 08bda9879a539d9434c49d3377dcdc400602b021 Mon Sep 17 00:00:00 2001
From: Haojin Li <hl420@duke.edu>
Date: Thu, 13 Apr 2023 03:57:46 -0400
Subject: [PATCH] :sparkles:Add dark mode logo option

---
 config/_default/params.toml |  1 +
 layouts/partials/logo.html  | 25 ++++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/config/_default/params.toml b/config/_default/params.toml
index bb8bdd54..c9a9788c 100644
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -17,6 +17,7 @@ enableCodeCopy = false
 [header]
   layout = "basic" # valid options: basic, hamburger, hybrid, custom
   # logo = "img/logo.jpg"
+  # darkLogo = "img/dark-logo.jpg" # specify a different logo for dark mode if needed
   showTitle = true
 
 [footer]
diff --git a/layouts/partials/logo.html b/layouts/partials/logo.html
index a9cd2a59..de66af69 100644
--- a/layouts/partials/logo.html
+++ b/layouts/partials/logo.html
@@ -1,6 +1,29 @@
 {{- if .Site.Params.header.logo }}
   {{- $logo := resources.Get .Site.Params.header.logo }}
-  {{- if $logo }}
+  {{- $darkLogo := resources.Get .Site.Params.header.darkLogo }}
+
+  <!-- If both logos are present, show different logo accordingly -->
+  {{- if and $logo $darkLogo }}
+    <a href="{{ "" | relLangURL }}" class="inline mr-2 dark:hidden">
+      <img
+        src="{{ $logo.RelPermalink }}"
+        width="{{ div $logo.Width 2 }}"
+        height="{{ div $logo.Height 2 }}"
+        class="max-h-[10rem] max-w-[10rem] object-scale-down object-left"
+        alt="{{ .Site.Title }}"
+      />
+    </a>
+    <a href="{{ "" | relLangURL }}" class="hidden mr-2 dark:inline">
+      <img
+        src="{{ $darkLogo.RelPermalink }}"
+        width="{{ div $darkLogo.Width 2 }}"
+        height="{{ div $darkLogo.Height 2 }}"
+        class="max-h-[10rem] max-w-[10rem] object-scale-down object-left"
+        alt="{{ .Site.Title }}"
+      />
+    </a>
+  <!-- Else if the standard logo is present, show the logo -->
+  {{- else if $logo }}
     <a href="{{ "" | relLangURL }}" class="mr-2">
       <img
         src="{{ $logo.RelPermalink }}"