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>