From 25a60fffd1551e671e8ba29f50ca03680d03179b Mon Sep 17 00:00:00 2001
From: Daniel Odrinski <contact@danwise.online>
Date: Wed, 26 Apr 2023 18:49:53 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8[#676]=20Add=20logo=20dark/light=20mod?=
 =?UTF-8?q?e=20switching=20mechanism?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/js/appearance.js           | 29 ++++++++++++++++++++++++++---
 config/_default/languages.en.toml |  1 +
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/assets/js/appearance.js b/assets/js/appearance.js
index 0acf9f18..d0663390 100644
--- a/assets/js/appearance.js
+++ b/assets/js/appearance.js
@@ -26,16 +26,20 @@ window.addEventListener("DOMContentLoaded", (event) => {
   const switcher = document.getElementById("appearance-switcher");
   const switcherMobile = document.getElementById("appearance-switcher-mobile");
 
+  var targetAppearance = document.documentElement.classList.contains("dark") ? "dark" : "light"
   updateMeta()
+  updateLogo(targetAppearance)
 
   if (switcher) {
     switcher.addEventListener("click", () => {
       document.documentElement.classList.toggle("dark");
+      var targetAppearance = document.documentElement.classList.contains("dark") ? "dark" : "light"
       localStorage.setItem(
         "appearance",
-        document.documentElement.classList.contains("dark") ? "dark" : "light"
+        targetAppearance
       );
       updateMeta()
+      updateLogo(targetAppearance)
     });
     switcher.addEventListener("contextmenu", (event) => {
       event.preventDefault();
@@ -45,11 +49,13 @@ window.addEventListener("DOMContentLoaded", (event) => {
   if (switcherMobile) {
     switcherMobile.addEventListener("click", () => {
       document.documentElement.classList.toggle("dark");
+      var targetAppearance = document.documentElement.classList.contains("dark") ? "dark" : "light"
       localStorage.setItem(
         "appearance",
-        document.documentElement.classList.contains("dark") ? "dark" : "light"
+        targetAppearance
       );
       updateMeta()
+      updateLogo(targetAppearance)
     });
     switcherMobile.addEventListener("contextmenu", (event) => {
       event.preventDefault();
@@ -64,4 +70,21 @@ var updateMeta = () => {
   elem = document.querySelector('body');
   style = getComputedStyle(elem);
   document.querySelector('meta[name="theme-color"]').setAttribute('content', style.backgroundColor);
-}
\ No newline at end of file
+}
+
+var updateLogo = (targetAppearance) => {
+  {{ 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 elems;
+  elems = document.querySelectorAll("img.logo")
+  targetLogoPath = 
+    targetAppearance == "{{ .Site.Params.DefaultAppearance }}" ?
+    "{{ $primaryLogo.RelPermalink }}" : "{{ $secondaryLogo.RelPermalink }}"
+  for (const elem of elems) {
+    elem.setAttribute("src", targetLogoPath)
+  }
+  {{ end }}
+  {{- end }}
+}
diff --git a/config/_default/languages.en.toml b/config/_default/languages.en.toml
index 379c57ba..31e570ba 100644
--- a/config/_default/languages.en.toml
+++ b/config/_default/languages.en.toml
@@ -7,6 +7,7 @@ rtl = false
 
 title = "Blowfish"
 # logo = "img/logo.png"
+# secondaryLogo = "img/secondary-logo.png"
 # description = "My awesome website"
 # copyright = "Copy, _right?_ :thinking_face:"