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.

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

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

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

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>