cole-maxwell1
8dc216d4e9
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.
38 lines
1.7 KiB
Cheetah
38 lines
1.7 KiB
Cheetah
<!-- Privacy-friendly analytics by Plausible -->
|
|
<script nonce="{{ctx.CspScriptNonce}}" async src="https://plausible.colemaxwell.dev/js/pa-IVfYDjRQ-05CMcATP0ha3.js"></script>
|
|
<script nonce="{{ctx.CspScriptNonce}}">
|
|
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>
|