feat(theme): apply branded logos across all themes

Load a shared branding stylesheet globally so built-in and CodeCraftsmen themes display the appropriate navbar and homepage logos. Use fixed artwork for explicit light and dark themes while respecting the system preference for automatic themes. Centralize the logo overrides, remove duplicated theme-specific rules, and make the custom light and dark themes self-contained. Synchronize their palette variables with Gitea 1.27, including syntax, diff, priority, editor, console, workflow, transparency, and chart colors.
2026-09-08 11:07:50 -05:00
parent b21d961929
commit 0875dfa276
5 changed files with 797 additions and 628 deletions
@@ -0,0 +1,115 @@
+html:is(
+        [data-theme="gitea-light"],
+        [data-theme="gitea-dark"],
+        [data-theme="gitea-auto"],
+        [data-theme="codecraftsmen-light"],
+        [data-theme="codecraftsmen-dark"],
+        [data-theme="codecraftsmen-auto"]
+    )
+    #navbar
+    #navbar-logo {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 60px 30px;
+}
+
+html:is(
+        [data-theme="gitea-light"],
+        [data-theme="gitea-dark"],
+        [data-theme="gitea-auto"],
+        [data-theme="codecraftsmen-light"],
+        [data-theme="codecraftsmen-dark"],
+        [data-theme="codecraftsmen-auto"]
+    )
+    #navbar
+    #navbar-logo
+    img {
+    visibility: hidden;
+    width: 60px;
+    height: 30px;
+}
+
+html:is(
+        [data-theme="gitea-light"],
+        [data-theme="gitea-dark"],
+        [data-theme="gitea-auto"],
+        [data-theme="codecraftsmen-light"],
+        [data-theme="codecraftsmen-dark"],
+        [data-theme="codecraftsmen-auto"]
+    )
+    .page-content.home
+    img.logo {
+    display: none;
+}
+
+html:is(
+        [data-theme="gitea-light"],
+        [data-theme="gitea-dark"],
+        [data-theme="gitea-auto"],
+        [data-theme="codecraftsmen-light"],
+        [data-theme="codecraftsmen-dark"],
+        [data-theme="codecraftsmen-auto"]
+    )
+    .page-content.home
+    .center:has(> img.logo)::before {
+    content: "";
+    display: block;
+    width: 220px;
+    height: 220px;
+    margin: 0 auto;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+html:is([data-theme="gitea-light"], [data-theme="codecraftsmen-light"])
+    #navbar
+    #navbar-logo {
+    background-image: url("../img/logo-light-no-slogan.svg");
+}
+
+html:is([data-theme="gitea-light"], [data-theme="codecraftsmen-light"])
+    .page-content.home
+    .center:has(> img.logo)::before {
+    background-image: url("../img/logo-light.svg");
+}
+
+html:is([data-theme="gitea-dark"], [data-theme="codecraftsmen-dark"])
+    #navbar
+    #navbar-logo {
+    background-image: url("../img/logo-dark-no-slogan.svg");
+}
+
+html:is([data-theme="gitea-dark"], [data-theme="codecraftsmen-dark"])
+    .page-content.home
+    .center:has(> img.logo)::before {
+    background-image: url("../img/logo-dark.svg");
+}
+
+@media (prefers-color-scheme: light) {
+    html:is([data-theme="gitea-auto"], [data-theme="codecraftsmen-auto"])
+        #navbar
+        #navbar-logo {
+        background-image: url("../img/logo-light-no-slogan.svg");
+    }
+
+    html:is([data-theme="gitea-auto"], [data-theme="codecraftsmen-auto"])
+        .page-content.home
+        .center:has(> img.logo)::before {
+        background-image: url("../img/logo-light.svg");
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    html:is([data-theme="gitea-auto"], [data-theme="codecraftsmen-auto"])
+        #navbar
+        #navbar-logo {
+        background-image: url("../img/logo-dark-no-slogan.svg");
+    }
+
+    html:is([data-theme="gitea-auto"], [data-theme="codecraftsmen-auto"])
+        .page-content.home
+        .center:has(> img.logo)::before {
+        background-image: url("../img/logo-dark.svg");
+    }
+}