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

fix(theme): synchronize navbar logo with active color scheme

Browse Source 
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.
This commit is contained in:
cole-maxwell1
2026-09-07 21:34:45 -05:00
parent d8cf7ed29b
commit 8dc216d4e9
4 changed files with 31 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/css/theme-codecraftsmen-auto.css
-19
View File
@@ -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
-8
View File
@@ -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
-8
View File
@@ -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
+31
View File
@@ -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>