✨Add dark mode logo option

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]

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 }}"