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.

public/assets/css/branding.css

@@ -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");
+    }
+}

public/assets/css/theme-codecraftsmen-auto.css

@@ -1,53 +1,6 @@
 @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;
-}
-
-html[data-theme="codecraftsmen-auto"] .page-content.home img.logo {
-  display: none;
-}
-
-html[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;
-}
-
-@media (prefers-color-scheme: light) {
-  html[data-theme="codecraftsmen-auto"] #navbar #navbar-logo {
-    background-image: url("../img/logo-light-no-slogan.svg");
-  }
-
-  html[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[data-theme="codecraftsmen-auto"] #navbar #navbar-logo {
-    background-image: url("../img/logo-dark-no-slogan.svg");
-  }
-
-  html[data-theme="codecraftsmen-auto"] .page-content.home .center:has(> img.logo)::before {
-    background-image: url("../img/logo-dark.svg");
-  }
-}
-
 gitea-theme-meta-info {
     --theme-display-name: "CodeCraftsmen Auto";
     --theme-color-scheme: "auto";

public/assets/css/theme-codecraftsmen-dark.css

@@ -1,5 +1,3 @@
-@import "./theme-gitea-dark.css";
-
 gitea-theme-meta-info {
     --theme-display-name: "CodeCraftsmen Dark";
     --theme-color-scheme: "dark";
@@ -88,6 +86,7 @@ gitea-theme-meta-info {
     --color-console-active-bg: #2e353b;
     --color-console-menu-bg: #262b31;
     --color-console-menu-border: #414b55;
+    --color-console-link: #969aa1;
     /* named colors */
     --color-red: #d52b1e;
     --color-orange: #cc580c;
@@ -157,17 +156,36 @@ gitea-theme-meta-info {
     --color-ansi-bright-magenta: #d74397;
     --color-ansi-bright-cyan: #00b6ad;
     --color-ansi-bright-white: var(--color-console-fg);
+    /* 16-color series */
+    --color-series-16-0: #7db233;
+    --color-series-16-1: #499a37;
+    --color-series-16-2: #ce4751;
+    --color-series-16-3: #8f9121;
+    --color-series-16-4: #ac32a6;
+    --color-series-16-5: #7445e9;
+    --color-series-16-6: #c67d28;
+    --color-series-16-7: #4db392;
+    --color-series-16-8: #aa4d30;
+    --color-series-16-9: #2a6f84;
+    --color-series-16-10: #c45327;
+    --color-series-16-11: #3d965c;
+    --color-series-16-12: #792a93;
+    --color-series-16-13: #439d73;
+    --color-series-16-14: #103aad;
+    --color-series-16-15: #982e85;
     /* other colors */
     --color-grey: #384149;
     --color-grey-light: #818f9e;
     --color-gold: #b1983b;
     --color-white: #ffffff;
+    --color-diff-added-fg: #93b373;
     --color-diff-added-linenum-bg: #274227;
     --color-diff-added-row-bg: #203224;
     --color-diff-added-row-border: #314a37;
     --color-diff-added-word-bg: #3c653c;
     --color-diff-moved-row-bg: #818044;
     --color-diff-moved-row-border: #bcca6f;
+    --color-diff-removed-fg: #fb5f5b;
     --color-diff-removed-linenum-bg: #482121;
     --color-diff-removed-row-bg: #301e1e;
     --color-diff-removed-row-border: #634343;
@@ -187,6 +205,9 @@ gitea-theme-meta-info {
     --color-info-border: #306090;
     --color-info-bg: #26354c;
     --color-info-text: #38a8e8;
+    --color-priority-border: #4a268d;
+    --color-priority-bg: #251c39;
+    --color-priority-text: #a371f7;
     --color-red-badge: #db2828;
     --color-red-badge-bg: #db28281a;
     --color-red-badge-hover-bg: #db28284d;
@@ -220,7 +241,12 @@ gitea-theme-meta-info {
     --color-input-border: var(--color-secondary);
     --color-input-border-hover: var(--color-secondary-dark-1);
     --color-light: #00001728;
-  --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
+    --color-light-mimic-enabled: rgba(
+        0,
+        0,
+        0,
+        calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
+    );
     --color-light-border: #e8f3ff28;
     --color-hover: #e8f3ff19;
     --color-hover-opaque: #21252a; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */
@@ -238,8 +264,11 @@ gitea-theme-meta-info {
     --color-expand-button: #2f363d;
     --color-placeholder-text: var(--color-text-light-3);
     --color-editor-line-highlight: var(--color-primary-light-5);
+    --color-editor-selection: var(--color-primary-alpha-50);
     --color-project-column-bg: var(--color-secondary-light-2);
-  --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */
+    --color-caret: var(
+        --color-text
+    ); /* should ideally be --color-text-dark, see #15651 */
     --color-reaction-bg: #e8f3ff12;
     --color-reaction-hover-bg: var(--color-primary-light-4);
     --color-reaction-active-bg: var(--color-primary-light-5);
@@ -258,6 +287,51 @@ gitea-theme-meta-info {
     --color-highlight-fg: #f2b134;
     --color-highlight-bg: #6b5428;
     --color-overlay-backdrop: #080808c0;
+    --color-danger: var(--color-red);
+    --color-transparency-grid-light: #2a2a2a;
+    --color-transparency-grid-dark: #1a1a1a;
+    --color-workflow-edge-hover: #666a73;
+    --color-syntax-keyword: #ff8854;
+    --color-syntax-bool: #25bbc9;
+    --color-syntax-control: #dd9e17;
+    --color-syntax-name: #fabd2f;
+    --color-syntax-type: #eb8cb3;
+    --color-syntax-number: #63b2dd;
+    --color-syntax-operator: #ff8854;
+    --color-syntax-regexp: #b89de4;
+    --color-syntax-string: #95b62a;
+    --color-syntax-comment: #8898b0;
+    --color-syntax-invalid: #ff8686;
+    --color-syntax-link: var(--color-primary);
+    --color-syntax-tag: #ff8854;
+    --color-syntax-attribute: #c792ff;
+    --color-syntax-property: #55afff;
+    --color-syntax-variable: #e29b33;
+    --color-syntax-string-special: #dd9e17;
+    --color-syntax-escape: #c7a618;
+    --color-syntax-entity: #c792ff;
+    --color-syntax-preproc: #4cbe7a;
+    --color-syntax-preproc-file: #63b2dd;
+    --color-syntax-decorator: #4cbe7a;
+    --color-syntax-namespace: #c9d1d9;
+    --color-syntax-name-pseudo: #c792ff;
+    --color-syntax-comment-special: #b89de4;
+    --color-syntax-text: #c9d1d9;
+    --color-syntax-text-alt: #b9bcc7;
+    --color-syntax-punctuation: #d2d4db;
+    --color-syntax-whitespace: #7f8699;
+    --color-syntax-diff-fg: #ffffff;
+    --color-syntax-deleted-bg: #5f3737;
+    --color-syntax-inserted-bg: #3a523a;
+    --color-syntax-emph: #d1a242;
+    --color-syntax-strong: #e29b33;
+    --color-syntax-heading: #dd9e17;
+    --color-syntax-subheading: #95b62a;
+    --color-syntax-output: #8898b0;
+    --color-syntax-prompt: #e29b33;
+    --color-syntax-traceback: #ff8686;
+    --color-syntax-matching-bracket-bg: #00918a48;
+    --color-syntax-nonmatching-bracket-bg: #cc484848;
     accent-color: var(--color-accent);
     color-scheme: dark;
 }
@@ -288,38 +362,15 @@ gitea-theme-meta-info {
 
 /* CodeCraftsmen brand typography (falls back gracefully if custom fonts are not installed) */
 :root {
-  --cc-font-body: "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+    --cc-font-body:
-  --cc-font-heading: "alro", "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
+        "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
-  --cc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
-}
+    --cc-font-heading:
-
+        "alro", "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
-html[data-theme="codecraftsmen-dark"] #navbar #navbar-logo {
+        Roboto, Helvetica, Arial;
-  background-image: url("../img/logo-dark-no-slogan.svg");
+    --cc-font-mono:
-  background-position: center;
+        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-  background-repeat: no-repeat;
+        "Liberation Mono", "Courier New", monospace;
-  background-size: 60px 30px;
-}
-
-html[data-theme="codecraftsmen-dark"] #navbar #navbar-logo img {
-  visibility: hidden;
-  width: 60px;
-  height: 30px;
-}
-
-html[data-theme="codecraftsmen-dark"] .page-content.home img.logo {
-  display: none;
-}
-
-html[data-theme="codecraftsmen-dark"] .page-content.home .center:has(> img.logo)::before {
-  content: "";
-  display: block;
-  width: 220px;
-  height: 220px;
-  margin: 0 auto;
-  background-image: url("../img/logo-dark.svg");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
 }
 
 body,

public/assets/css/theme-codecraftsmen-light.css

@@ -1,5 +1,3 @@
-@import "./theme-gitea-light.css";
-
 gitea-theme-meta-info {
     --theme-display-name: "CodeCraftsmen Light";
     --theme-color-scheme: "light";
@@ -88,6 +86,7 @@ gitea-theme-meta-info {
     --color-console-active-bg: #2e353b;
     --color-console-menu-bg: #262b31;
     --color-console-menu-border: #414b55;
+    --color-console-link: #5c656d;
     /* named colors */
     --color-red: #d52b1e;
     --color-orange: #f2711c;
@@ -157,17 +156,36 @@ gitea-theme-meta-info {
     --color-ansi-bright-magenta: #d74397;
     --color-ansi-bright-cyan: #00b6ad;
     --color-ansi-bright-white: var(--color-console-fg);
+    /* 16-color series */
+    --color-series-16-0: #7db233;
+    --color-series-16-1: #499a37;
+    --color-series-16-2: #ce4751;
+    --color-series-16-3: #8f9121;
+    --color-series-16-4: #ac32a6;
+    --color-series-16-5: #7445e9;
+    --color-series-16-6: #c67d28;
+    --color-series-16-7: #4db392;
+    --color-series-16-8: #aa4d30;
+    --color-series-16-9: #2a6f84;
+    --color-series-16-10: #c45327;
+    --color-series-16-11: #3d965c;
+    --color-series-16-12: #792a93;
+    --color-series-16-13: #439d73;
+    --color-series-16-14: #103aad;
+    --color-series-16-15: #982e85;
     /* other colors */
     --color-grey: #697077;
     --color-grey-light: #7c838a;
     --color-gold: #a1882b;
     --color-white: #ffffff;
+    --color-diff-added-fg: #177231;
     --color-diff-added-linenum-bg: #d1f8d9;
     --color-diff-added-row-bg: #e6ffed;
     --color-diff-added-row-border: #e6ffed;
     --color-diff-added-word-bg: #acf2bd;
     --color-diff-moved-row-bg: #f1f8d1;
     --color-diff-moved-row-border: #d0e27f;
+    --color-diff-removed-fg: #c61f2b;
     --color-diff-removed-linenum-bg: #ffcecb;
     --color-diff-removed-row-bg: #ffeef0;
     --color-diff-removed-row-border: #f1c0c0;
@@ -187,6 +205,9 @@ gitea-theme-meta-info {
     --color-info-border: #a9d5de;
     --color-info-bg: #f8ffff;
     --color-info-text: #276f86;
+    --color-priority-border: #b9a1ff66;
+    --color-priority-bg: #f3e7ff;
+    --color-priority-text: #8250df;
     --color-red-badge: #db2828;
     --color-red-badge-bg: #db28281a;
     --color-red-badge-hover-bg: #db28284d;
@@ -220,7 +241,12 @@ gitea-theme-meta-info {
     --color-input-border: var(--color-secondary);
     --color-input-border-hover: var(--color-secondary-dark-1);
     --color-light: #00001706;
-  --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
+    --color-light-mimic-enabled: rgba(
+        0,
+        0,
+        0,
+        calc(6 / 255 * 222 / 255 / var(--opacity-disabled))
+    );
     --color-light-border: #0000171d;
     --color-hover: #00001708;
     --color-hover-opaque: #f1f3f5; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */
@@ -238,6 +264,7 @@ gitea-theme-meta-info {
     --color-expand-button: #cfe8fa;
     --color-placeholder-text: var(--color-text-light-3);
     --color-editor-line-highlight: var(--color-primary-light-6);
+    --color-editor-selection: var(--color-primary-alpha-30);
     --color-project-column-bg: var(--color-secondary-light-4);
     --color-caret: var(--color-text-dark);
     --color-reaction-bg: #0000170a;
@@ -258,44 +285,66 @@ gitea-theme-meta-info {
     --color-highlight-fg: #7a5230;
     --color-highlight-bg: #fae4b8;
     --color-overlay-backdrop: #080808c0;
+    --color-danger: var(--color-red);
+    --color-transparency-grid-light: #fafafa;
+    --color-transparency-grid-dark: #e2e2e2;
+    --color-workflow-edge-hover: #b1b7bd;
+    --color-syntax-keyword: #a73a00;
+    --color-syntax-bool: #076872;
+    --color-syntax-control: #7d5700;
+    --color-syntax-name: #785900;
+    --color-syntax-type: #ae2368;
+    --color-syntax-number: #105ead;
+    --color-syntax-operator: #a73a00;
+    --color-syntax-regexp: #773dc5;
+    --color-syntax-string: #456800;
+    --color-syntax-comment: #506070;
+    --color-syntax-invalid: #c00000;
+    --color-syntax-link: var(--color-primary);
+    --color-syntax-tag: #a73a00;
+    --color-syntax-attribute: #6f41c5;
+    --color-syntax-property: #2060a0;
+    --color-syntax-variable: #944a00;
+    --color-syntax-string-special: #7d5700;
+    --color-syntax-escape: #785900;
+    --color-syntax-entity: #6f41c5;
+    --color-syntax-preproc: #2d6a4b;
+    --color-syntax-preproc-file: #105ead;
+    --color-syntax-decorator: #2d6a4b;
+    --color-syntax-namespace: #555555;
+    --color-syntax-name-pseudo: #6f41c5;
+    --color-syntax-comment-special: #773dc5;
+    --color-syntax-text: inherit;
+    --color-syntax-text-alt: #47525b;
+    --color-syntax-punctuation: inherit;
+    --color-syntax-whitespace: #bbbbbb;
+    --color-syntax-diff-fg: #000000;
+    --color-syntax-deleted-bg: #ffdddd;
+    --color-syntax-inserted-bg: #ddffdd;
+    --color-syntax-emph: #8b5000;
+    --color-syntax-strong: inherit;
+    --color-syntax-heading: #7d5700;
+    --color-syntax-subheading: #456800;
+    --color-syntax-output: #506070;
+    --color-syntax-prompt: #944a00;
+    --color-syntax-traceback: #c00000;
+    --color-syntax-matching-bracket-bg: #00b5ad38;
+    --color-syntax-nonmatching-bracket-bg: #db282838;
     accent-color: var(--color-accent);
     color-scheme: light;
 }
 
 /* CodeCraftsmen brand typography (falls back gracefully if custom fonts are not installed) */
 :root {
-  --cc-font-body: "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+    --cc-font-body:
-  --cc-font-heading: "alro", "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
+        "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
-  --cc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
-}
+    --cc-font-heading:
-
+        "alro", "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
-html[data-theme="codecraftsmen-light"] #navbar #navbar-logo {
+        Roboto, Helvetica, Arial;
-  background-image: url("../img/logo-light-no-slogan.svg");
+    --cc-font-mono:
-  background-position: center;
+        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-  background-repeat: no-repeat;
+        "Liberation Mono", "Courier New", monospace;
-  background-size: 60px 30px;
-}
-
-html[data-theme="codecraftsmen-light"] #navbar #navbar-logo img {
-  visibility: hidden;
-  width: 60px;
-  height: 30px;
-}
-
-html[data-theme="codecraftsmen-light"] .page-content.home img.logo {
-  display: none;
-}
-
-html[data-theme="codecraftsmen-light"] .page-content.home .center:has(> img.logo)::before {
-  content: "";
-  display: block;
-  width: 220px;
-  height: 220px;
-  margin: 0 auto;
-  background-image: url("../img/logo-light.svg");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
 }
 
 body,

templates/custom/header.tmpl

@@ -1,3 +1,4 @@
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/branding.css">
 <!-- 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}}">