Add Light/Dark Logo Swap

K so PaperMod comes with a light-mode/dark-mode toggle, but no method for swapping the site’s logo at the same time. I really wanted that, and got it to work after a few hours of tinkering.

First, copy these files:

themes\PaperMod\layouts\partials\footer.html
themes\PaperMod\layouts\partials\header.html

to here:

layouts\partials\footer.html
layouts\partials\header.html

In your new footer.html file, add two lines to the site.Params.disableThemeToggle block to make your site load the right logo when the theme is switched. Here’s the diff:

--- themes\PaperMod\layouts\partials\footer.html        2022-07-18 09:47:47.635823100 -0700
+++ layouts\partials\footer.html                        2022-07-15 13:59:02.482056200 -0700
@@ -75,9 +75,11 @@
         if (document.body.className.includes("dark")) {
             document.body.classList.remove('dark');
             localStorage.setItem("pref-theme", 'light');
+            document.getElementById("siteLogo").src = "/images/pushblue-dark.png";
         } else {
             document.body.classList.add('dark');
             localStorage.setItem("pref-theme", 'dark');
+            document.getElementById("siteLogo").src = "/images/pushblue-light.png";
         }
     })

Then, in your new header.html file, modify the following:

--- themes\PaperMod\layouts\partials\header.html        2022-07-18 09:47:47.635823100 -0700
+++ layouts\partials\header.html                        2022-07-15 13:59:02.482056200 -0700
@@ -63,13 +63,35 @@
                     <img src="{{ $img.Permalink }}" alt="logo" aria-label="logo"
                         height="{{- site.Params.label.iconHeight | default "30" -}}">
                 {{- else }}
-                <img src="{{- site.Params.label.icon | absURL -}}" alt="logo" aria-label="logo"
+                <img id="siteLogo" src="{{- site.Params.label.icon | absURL -}}" alt="logo" aria-label="logo"
                     height="{{- site.Params.label.iconHeight | default "30" -}}">
+                    <script>
+                        if (document.body.className.includes("dark")) {
+                            document.getElementById("siteLogo").src = "/images/pushblue-light.png";
+                        }
+                    </script>
                 {{- end -}}
                 {{- end -}}

The above adds the siteLogo id tag that we added in the footer to the element that loads your logo, then adds some scripting that tells it to load the dark-mode logo when dark-mode is turned on.

That should do it!