diff --git a/.prettierignore b/.prettierignore
index 457e2eb5..d2d823c7 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -30,3 +30,5 @@ layouts/_default/index.json
 layouts/shortcodes/screenshot.html
 layouts/shortcodes/figure.html
 layouts/partials/hugo-embedded/shortcodes/figure-default.html
+
+assets/js/appearance.js
diff --git a/assets/js/appearance.js b/assets/js/appearance.js
index 6cb43b14..1af7f713 100644
--- a/assets/js/appearance.js
+++ b/assets/js/appearance.js
@@ -96,6 +96,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
   }
 });
 
+
 var updateMeta = () => {
   var elem, style;
   elem = document.querySelector('body');
@@ -103,6 +104,33 @@ var updateMeta = () => {
   document.querySelector('meta[name="theme-color"]').setAttribute('content', style.backgroundColor);
 }
 
+{{ if and (.Site.Params.Logo) (.Site.Params.SecondaryLogo) }}
+{{ $primaryLogo := resources.Get .Site.Params.Logo }}
+{{ $secondaryLogo := resources.Get .Site.Params.SecondaryLogo }}
+{{ if and ($primaryLogo) ($secondaryLogo) }}
+var updateLogo = (targetAppearance) => {
+  var imgElems = document.querySelectorAll("img.logo");
+  var logoContainers = document.querySelectorAll("span.logo");
+  
+  targetLogoPath = 
+    targetAppearance == "{{ .Site.Params.DefaultAppearance }}" ?
+    "{{ $primaryLogo.RelPermalink }}" : "{{ $secondaryLogo.RelPermalink }}"
+  for (const elem of imgElems) {
+    elem.setAttribute("src", targetLogoPath)
+  }
+
+  {{ if eq $primaryLogo.MediaType.SubType "svg" }}
+  targetContent = 
+    targetAppearance == "{{ .Site.Params.DefaultAppearance }}" ?
+    `{{ $primaryLogo.Content | safeHTML }}` : `{{ $secondaryLogo.Content | safeHTML }}`
+  for (const container of logoContainers) {
+    container.innerHTML = targetContent;
+  }
+  {{ end }}
+}
+{{ end }}
+{{- end }}
+
 var getTargetAppearance = () => {
   return document.documentElement.classList.contains("dark") ? "dark" : "light"
 }
diff --git a/layouts/partials/header/basic.html b/layouts/partials/header/basic.html
index ac776b87..9c9c9f13 100644
--- a/layouts/partials/header/basic.html
+++ b/layouts/partials/header/basic.html
@@ -1,49 +1,26 @@
 <div class="main-menu flex items-center w-full gap-2 p-1 pl-0">
-  {{ $primary := resources.Get .Site.Params.Logo }}
-  {{ $secondary := resources.Get .Site.Params.SecondaryLogo }}
-
-  {{ if or $primary $secondary }}
-    <div>
-      <a href="{{ "" | relLangURL }}" class="flex">
-        <span class="sr-only">{{ .Site.Title | markdownify }}</span>
-
-        {{ if $primary }}
-          <div class="{{ cond $secondary "block dark:hidden" "" }}">
-            {{- if eq $primary.MediaType.SubType "svg" -}}
-              <span class="logo object-scale-down object-left nozoom">
-                {{ $primary.Content | safeHTML }}
-              </span>
-            {{ else }}
-              <img
-                src="{{ $primary.RelPermalink }}"
-                width="{{ div $primary.Width 2 }}"
-                height="{{ div $primary.Height 2 }}"
-                class="logo max-h-20 max-w-20 object-scale-down object-left nozoom"
-                alt="Site logo">
-            {{ end }}
-          </div>
-        {{ end }}
-
-        {{ if $secondary }}
-          <div class="hidden dark:block">
-            {{ if eq $secondary.MediaType.SubType "svg" }}
-              <span class="logo object-scale-down object-left nozoom">
-                {{ $secondary.Content | safeHTML }}
-              </span>
-            {{ else }}
-              <img
-                src="{{ $secondary.RelPermalink }}"
-                width="{{ div $secondary.Width 2 }}"
-                height="{{ div $secondary.Height 2 }}"
-                class="logo max-h-20 max-w-20 object-scale-down object-left nozoom"
-                alt="Site logo (dark mode)">
-            {{ end }}
-          </div>
-        {{ end }}
-      </a>
-    </div>
+  {{ if .Site.Params.Logo }}
+    {{ $logo := resources.Get .Site.Params.Logo }}
+    {{ if $logo }}
+      <div>
+        <a href="{{ "" | relLangURL }}" class="flex">
+          <span class="sr-only">{{ .Site.Title | markdownify }}</span>
+          {{ if eq $logo.MediaType.SubType "svg" }}
+            <span class="logo object-scale-down object-left nozoom">
+              {{ $logo.Content | safeHTML }}
+            </span>
+          {{ else }}
+            <img
+              src="{{ $logo.RelPermalink }}"
+              width="{{ div $logo.Width 2 }}"
+              height="{{ div $logo.Height 2 }}"
+              class="logo max-h-20 max-w-20 object-scale-down object-left nozoom"
+              alt="">
+          {{ end }}
+        </a>
+      </div>
+    {{ end }}
   {{ end }}
-
   {{ if not .Site.Params.disableTextInHeader | default true }}
     <a href="{{ "" | relLangURL }}" class="text-base font-medium truncate min-w-0 shrink">
       {{ .Site.Title | markdownify }}