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,20 +1,9 @@
 @import "./theme-codecraftsmen-light.css" (prefers-color-scheme: light);
 @import "./theme-codecraftsmen-dark.css" (prefers-color-scheme: dark);
 
-@media (prefers-color-scheme: light) {
-  html[data-theme="codecraftsmen-auto"] #navbar-logo img {
-    content: url("../img/logo-light-no-slogan.svg");
-    width: 60px;
-    height: 30px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  html[data-theme="codecraftsmen-auto"] #navbar-logo img {
-    content: url("../img/logo-dark-no-slogan.svg");
-    width: 60px;
-    height: 30px;
-  }
+html[data-theme="codecraftsmen-auto"] #navbar #navbar-logo img {
+  width: 60px;
+  height: 30px;
 }
 
 gitea-theme-meta-info {

public/assets/css/theme-codecraftsmen-dark.css

@@ -293,8 +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-logo img {
-  content: url("../img/logo-dark-no-slogan.svg");
+html[data-theme="codecraftsmen-dark"] #navbar #navbar-logo img {
   width: 60px;
   height: 30px;
 }

public/assets/css/theme-codecraftsmen-light.css

@@ -269,8 +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-logo img {
-  content: url("../img/logo-light-no-slogan.svg");
+html[data-theme="codecraftsmen-light"] #navbar #navbar-logo img {
   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>