From 8dc216d4e990e4a652cdf1a69bb2bdd3f4b6b4ef Mon Sep 17 00:00:00 2001
From: cole-maxwell1 <cole.n.maxwell99@gmail.com>
Date: Mon, 7 Sep 2026 21:34:45 -0500
Subject: [PATCH] fix(theme): synchronize navbar logo with active color scheme

Replace CSS background-image switching with direct navbar image source updates to avoid Safari and WebKit repaint failures.

Select the appropriate logo during initial DOM construction and update it when the system color scheme changes, Safari restores a cached page, or the document returns to the foreground. Preserve CSP compatibility and Gitea subpath support while retaining the existing logo dimensions.
---
 .../assets/css/theme-codecraftsmen-auto.css   | 19 ------------
 .../assets/css/theme-codecraftsmen-dark.css   |  8 -----
 .../assets/css/theme-codecraftsmen-light.css  |  8 -----
 templates/custom/header.tmpl                  | 31 +++++++++++++++++++
 4 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/public/assets/css/theme-codecraftsmen-auto.css b/public/assets/css/theme-codecraftsmen-auto.css
index 032c700..7a6e3db 100644
--- a/public/assets/css/theme-codecraftsmen-auto.css
+++ b/public/assets/css/theme-codecraftsmen-auto.css
@@ -1,30 +1,11 @@
 @import "./theme-codecraftsmen-light.css" (prefers-color-scheme: light);
 @import "./theme-codecraftsmen-dark.css" (prefers-color-scheme: dark);
 
-html[data-theme="codecraftsmen-auto"] #navbar #navbar-logo {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 60px 30px;
-}
-
 html[data-theme="codecraftsmen-auto"] #navbar #navbar-logo img {
-  visibility: hidden;
   width: 60px;
   height: 30px;
 }
 
-@media (prefers-color-scheme: light) {
-  html[data-theme="codecraftsmen-auto"] #navbar #navbar-logo {
-    background-image: url("../img/logo-light-no-slogan.svg");
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  html[data-theme="codecraftsmen-auto"] #navbar #navbar-logo {
-    background-image: url("../img/logo-dark-no-slogan.svg");
-  }
-}
-
 gitea-theme-meta-info {
   --theme-display-name: "CodeCraftsmen Auto";
   --theme-color-scheme: "auto";
diff --git a/public/assets/css/theme-codecraftsmen-dark.css b/public/assets/css/theme-codecraftsmen-dark.css
index 8356b51..f6814f3 100644
--- a/public/assets/css/theme-codecraftsmen-dark.css
+++ b/public/assets/css/theme-codecraftsmen-dark.css
@@ -293,15 +293,7 @@ gitea-theme-meta-info {
   --cc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
-html[data-theme="codecraftsmen-dark"] #navbar #navbar-logo {
-  background-image: url("../img/logo-dark-no-slogan.svg");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 60px 30px;
-}
-
 html[data-theme="codecraftsmen-dark"] #navbar #navbar-logo img {
-  visibility: hidden;
   width: 60px;
   height: 30px;
 }
diff --git a/public/assets/css/theme-codecraftsmen-light.css b/public/assets/css/theme-codecraftsmen-light.css
index b50a30e..b28a13d 100644
--- a/public/assets/css/theme-codecraftsmen-light.css
+++ b/public/assets/css/theme-codecraftsmen-light.css
@@ -269,15 +269,7 @@ gitea-theme-meta-info {
   --cc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
-html[data-theme="codecraftsmen-light"] #navbar #navbar-logo {
-  background-image: url("../img/logo-light-no-slogan.svg");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 60px 30px;
-}
-
 html[data-theme="codecraftsmen-light"] #navbar #navbar-logo img {
-  visibility: hidden;
   width: 60px;
   height: 30px;
 }
diff --git a/templates/custom/header.tmpl b/templates/custom/header.tmpl
index 98a758f..c1a5bfc 100644
--- a/templates/custom/header.tmpl
+++ b/templates/custom/header.tmpl
@@ -4,3 +4,34 @@
   window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
   plausible.init()
 </script>
+
+<script nonce="{{ctx.CspScriptNonce}}">
+  (() => {
+    const darkMode = window.matchMedia("(prefers-color-scheme: dark)");
+    const updateNavbarLogo = () => {
+      const logo = document.querySelector("#navbar-logo img");
+      const theme = document.documentElement.dataset.theme;
+      if (!logo) return false;
+      if (!theme?.startsWith("codecraftsmen-")) return true;
+
+      const dark = theme === "codecraftsmen-dark" || (theme === "codecraftsmen-auto" && darkMode.matches);
+      const src = `${window.config.assetUrlPrefix}/img/logo-${dark ? "dark" : "light"}-no-slogan.svg`;
+      if (logo.getAttribute("src") !== src) logo.setAttribute("src", src);
+      return true;
+    };
+
+    const navbarObserver = new MutationObserver(() => {
+      if (updateNavbarLogo()) navbarObserver.disconnect();
+    });
+    navbarObserver.observe(document.documentElement, {childList: true, subtree: true});
+    document.addEventListener("DOMContentLoaded", () => {
+      updateNavbarLogo();
+      navbarObserver.disconnect();
+    }, {once: true});
+    darkMode.addEventListener("change", updateNavbarLogo);
+    window.addEventListener("pageshow", updateNavbarLogo);
+    document.addEventListener("visibilitychange", () => {
+      if (!document.hidden) updateNavbarLogo();
+    });
+  })();
+</script>