colem/gitea-custom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(theme): switch navbar and home logos through pure css

Browse Source 
Extend theme-aware logo switching to the home page hero logo, which previously never changed with the active color scheme, and keep the navbar logo switching in the same CSS-only mechanism.

Replace the header template synchronization script with theme CSS background images so logos render correctly at first paint, work with JavaScript disabled, and avoid WebKit replaced-element repaint behavior. Hide the upstream images as layout placeholders and use selectors that outrank Gitea's navbar hover styles.

Add an AGENTS.md guide documenting repository scope, theme and template constraints, verification expectations, and the manual deployment flow.
This commit is contained in:
cole-maxwell1
2026-09-07 21:57:59 -05:00
parent 8dc216d4e9
commit b21d961929
5 changed files with 119 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/custom/header.tmpl
-31
View File
@@ -4,34 +4,3 @@
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>