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

feat(theme): align custom themes with Gitea 1.27

Browse Source 
Import upstream Gitea light and dark themes so new defaults and syntax styles remain compatible across upgrades. Replace the custom navbar template with CSS-based logo overrides and remove redundant Chroma and CodeMirror assets.

Add theme color-scheme metadata, correct relative asset paths, apply CSP nonces to analytics scripts, and document installation, compatibility, upgrade, and licensing requirements.
This commit is contained in:
cole-maxwell1
2026-09-07 16:24:29 -05:00
parent 1532ef27be
commit 0483209214
12 changed files with 76 additions and 551 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/css/chroma/base.css
-46
View File
@@ -1,46 +0,0 @@
/* LineTableTD */
.chroma .lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0;
}
/* LineTable */
.chroma .lntable {
border-spacing: 0;
padding: 0;
margin: 0;
border: 0;
width: auto;
overflow: auto;
display: block;
}
/* LineHighlight */
.chroma .hl {
display: block;
width: 100%;
}
/* LineNumbersTable */
.chroma .lnt {
margin-right: 0.4em;
padding: 0 0.4em;
}
/* LineNumbers */
.chroma .ln {
margin-right: 0.4em;
padding: 0 0.4em;
}
/* GenericStrong */
.chroma .gs {
font-weight: var(--font-weight-semibold);
}
/* GenericUnderline */
.chroma .gl {
text-decoration: underline;
}
public/assets/css/chroma/dark.css
-76
View File
@@ -1,76 +0,0 @@
/* https://github.com/alecthomas/chroma/blob/6428fb4e65f3c1493491571c8a6a8f1add1da822/types.go#L208 */
.chroma .bp { color: #fabd2f; } /* NameBuiltinPseudo */
.chroma .c { color: #777e94; } /* Comment */
.chroma .c1 { color: #777e94; } /* CommentSingle */
.chroma .ch { color: #777e94; } /* CommentHashbang */
.chroma .cm { color: #777e94; } /* CommentMultiline */
.chroma .cp { color: #8ec07c; } /* CommentPreproc */
.chroma .cpf { color: #649bc4; } /* CommentPreprocFile */
.chroma .cs { color: #9075cd; } /* CommentSpecial */
.chroma .dl { color: #649bc4; } /* LiteralStringDelimiter */
.chroma .fm {} /* NameFunctionMagic */
.chroma .g {} /* Generic */
.chroma .gd { color: #ffffff; background-color: #5f3737; } /* GenericDeleted */
.chroma .ge { color: #ddee30; } /* GenericEmph */
.chroma .gh { color: #ffaa10; } /* GenericHeading */
.chroma .gi { color: #ffffff; background-color: #3a523a; } /* GenericInserted */
.chroma .gl {} /* GenericUnderline */
.chroma .go { color: #777e94; } /* GenericOutput */
.chroma .gp { color: #ebdbb2; } /* GenericPrompt */
.chroma .gr { color: #ff4433; } /* GenericError */
.chroma .gs { color: #ebdbb2; } /* GenericStrong */
.chroma .gt { color: #ff7540; } /* GenericTraceback */
.chroma .gu { color: #b8bb26; } /* GenericSubheading */
.chroma .il { color: #649bc4; } /* LiteralNumberIntegerLong */
.chroma .k { color: #ff7540; } /* Keyword */
.chroma .kc { color: #649bc4; } /* KeywordConstant */
.chroma .kd { color: #ff7540; } /* KeywordDeclaration */
.chroma .kn { color: #ffaa10; } /* KeywordNamespace */
.chroma .kp { color: #5f8700; } /* KeywordPseudo */
.chroma .kr { color: #ff7540; } /* KeywordReserved */
.chroma .kt { color: #ff7b72; } /* KeywordType */
.chroma .l {} /* Literal */
.chroma .ld {} /* LiteralDate */
.chroma .m { color: #649bc4; } /* LiteralNumber */
.chroma .mb { color: #649bc4; } /* LiteralNumberBin */
.chroma .mf { color: #649bc4; } /* LiteralNumberFloat */
.chroma .mh { color: #649bc4; } /* LiteralNumberHex */
.chroma .mi { color: #649bc4; } /* LiteralNumberInteger */
.chroma .mo { color: #649bc4; } /* LiteralNumberOct */
.chroma .n { color: #c9d1d9; } /* Name */
.chroma .na { color: #fabd2f; } /* NameAttribute */
.chroma .nb { color: #fabd2f; } /* NameBuiltin */
.chroma .nc { color: #ffaa10; } /* NameClass */
.chroma .nd { color: #8ec07c; } /* NameDecorator */
.chroma .ne { color: #ff7540; } /* NameException */
.chroma .nf { color: #fabd2f; } /* NameFunction */
.chroma .ni { color: #fabd2f; } /* NameEntity */
.chroma .nl { color: #ff7540; } /* NameLabel */
.chroma .nn { color: #c9d1d9; } /* NameNamespace */
.chroma .no { color: #649bc4; } /* NameConstant */
.chroma .nt { color: #ff7540; } /* NameTag */
.chroma .nv { color: #ebdbb2; } /* NameVariable */
.chroma .nx { color: #b6bac5; } /* NameOther */
.chroma .o { color: #ff7540; } /* Operator */
.chroma .ow { color: #5f8700; } /* OperatorWord */
.chroma .p { color: #d2d4db; } /* Punctuation */
.chroma .py {} /* NameProperty */
.chroma .s { color: #b8bb26; } /* LiteralString */
.chroma .s1 { color: #b8bb26; } /* LiteralStringSingle */
.chroma .s2 { color: #b8bb26; } /* LiteralStringDouble */
.chroma .sa { color: #ffaa10; } /* LiteralStringAffix */
.chroma .sb { color: #b8bb26; } /* LiteralStringBacktick */
.chroma .sc { color: #ffaa10; } /* LiteralStringChar */
.chroma .sd { color: #b8bb26; } /* LiteralStringDoc */
.chroma .se { color: #ff8540; } /* LiteralStringEscape */
.chroma .sh { color: #b8bb26; } /* LiteralStringHeredoc */
.chroma .si { color: #ffaa10; } /* LiteralStringInterpol */
.chroma .sr { color: #9075cd; } /* LiteralStringRegex */
.chroma .ss { color: #ff8540; } /* LiteralStringSymbol */
.chroma .sx { color: #ffaa10; } /* LiteralStringOther */
.chroma .vc { color: #649bee; } /* NameVariableClass */
.chroma .vg { color: #649bee; } /* NameVariableGlobal */
.chroma .vi { color: #649bee; } /* NameVariableInstance */
.chroma .vm {} /* NameVariableMagic */
.chroma .w { color: #7f8699; } /* TextWhitespace */
.chroma .err {/* not styled because Chroma uses it on too many things like JSX */} /* Error */
public/assets/css/chroma/light.css
-76
View File
@@ -1,76 +0,0 @@
/* https://github.com/alecthomas/chroma/blob/6428fb4e65f3c1493491571c8a6a8f1add1da822/types.go#L208 */
.chroma .bp { color: #999999; } /* NameBuiltinPseudo */
.chroma .c { color: #6a737d; } /* Comment */
.chroma .c1 { color: #6a737d; } /* CommentSingle */
.chroma .ch { color: #6a737d; } /* CommentHashbang */
.chroma .cm { color: #999988; } /* CommentMultiline */
.chroma .cp { color: #109295; } /* CommentPreproc */
.chroma .cpf { color: #4c4dbc; } /* CommentPreprocFile */
.chroma .cs { color: #999999; } /* CommentSpecial */
.chroma .dl { color: #106303; } /* LiteralStringDelimiter */
.chroma .fm {} /* NameFunctionMagic */
.chroma .g {} /* Generic */
.chroma .gd { color: #000000; background-color: #ffdddd; } /* GenericDeleted */
.chroma .ge { color: #000000; } /* GenericEmph */
.chroma .gh { color: #999999; } /* GenericHeading */
.chroma .gi { color: #000000; background-color: #ddffdd; } /* GenericInserted */
.chroma .gl {} /* GenericUnderline */
.chroma .go { color: #888888; } /* GenericOutput */
.chroma .gp { color: #555555; } /* GenericPrompt */
.chroma .gr { color: #aa0000; } /* GenericError */
.chroma .gs {} /* GenericStrong */
.chroma .gt { color: #aa0000; } /* GenericTraceback */
.chroma .gu { color: #aaaaaa; } /* GenericSubheading */
.chroma .il { color: #009999; } /* LiteralNumberIntegerLong */
.chroma .k { color: #d73a49; } /* Keyword */
.chroma .kc { color: #d73a49; } /* KeywordConstant */
.chroma .kd { color: #d73a49; } /* KeywordDeclaration */
.chroma .kn { color: #d73a49; } /* KeywordNamespace */
.chroma .kp { color: #d73a49; } /* KeywordPseudo */
.chroma .kr { color: #d73a49; } /* KeywordReserved */
.chroma .kt { color: #445588; } /* KeywordType */
.chroma .l {} /* Literal */
.chroma .ld {} /* LiteralDate */
.chroma .m { color: #009999; } /* LiteralNumber */
.chroma .mb { color: #009999; } /* LiteralNumberBin */
.chroma .mf { color: #009999; } /* LiteralNumberFloat */
.chroma .mh { color: #009999; } /* LiteralNumberHex */
.chroma .mi { color: #009999; } /* LiteralNumberInteger */
.chroma .mo { color: #009999; } /* LiteralNumberOct */
.chroma .n {} /* Name */
.chroma .na { color: #d73a49; } /* NameAttribute */
.chroma .nb { color: #005cc5; } /* NameBuiltin */
.chroma .nc { color: #445588; } /* NameClass */
.chroma .nd { color: #3c5d5d; } /* NameDecorator */
.chroma .ne { color: #990000; } /* NameException */
.chroma .nf { color: #005cc5; } /* NameFunction */
.chroma .ni { color: #6f42c1; } /* NameEntity */
.chroma .nl { color: #990000; } /* NameLabel */
.chroma .nn { color: #555555; } /* NameNamespace */
.chroma .no { color: #008080; } /* NameConstant */
.chroma .nt { color: #22863a; } /* NameTag */
.chroma .nv { color: #008080; } /* NameVariable */
.chroma .nx { color: #24292e; } /* NameOther */
.chroma .o { color: #d73a49; } /* Operator */
.chroma .ow { color: #d73a49; } /* OperatorWord */
.chroma .p {} /* Punctuation */
.chroma .py {} /* NameProperty */
.chroma .s { color: #106303; } /* LiteralString */
.chroma .s1 { color: #106303; } /* LiteralStringSingle */
.chroma .s2 { color: #106303; } /* LiteralStringDouble */
.chroma .sa { color: #cc7a00; } /* LiteralStringAffix */
.chroma .sb { color: #106303; } /* LiteralStringBacktick */
.chroma .sc { color: #cc7a00; } /* LiteralStringChar */
.chroma .sd { color: #106303; } /* LiteralStringDoc */
.chroma .se { color: #994400; } /* LiteralStringEscape */
.chroma .sh { color: #106303; } /* LiteralStringHeredoc */
.chroma .si { color: #cc7a00; } /* LiteralStringInterpol */
.chroma .sr { color: #4c4dbc; } /* LiteralStringRegex */
.chroma .ss { color: #994400; } /* LiteralStringSymbol */
.chroma .sx { color: #106303; } /* LiteralStringOther */
.chroma .vc { color: #008080; } /* NameVariableClass */
.chroma .vg { color: #008080; } /* NameVariableGlobal */
.chroma .vi { color: #008080; } /* NameVariableInstance */
.chroma .vm {} /* NameVariableMagic */
.chroma .w { color: #bbbbbb; } /* TextWhitespace */
.chroma .err {/* not styled because Chroma uses it on too many things like JSX */} /* Error */
public/assets/css/codemirror/base.css
-49
View File
@@ -1,49 +0,0 @@
.ui .field:not(:last-child) .EasyMDEContainer .editor-statusbar {
margin-bottom: -1em; /* when there is a statusbar, the "margin-bottom: 1em" of the "field" is not needed, because the statusbar is likely a blank line */
}
.EasyMDEContainer .CodeMirror {
color: var(--color-input-text);
background-color: var(--color-input-background);
border-color: var(--color-secondary);
font: 14px var(--fonts-monospace);
}
.EasyMDEContainer .CodeMirror.cm-s-default {
border-radius: var(--border-radius);
padding: 0 !important;
}
.EasyMDEContainer .CodeMirror.CodeMirror-fullscreen.CodeMirror-focused {
border-right: 1px solid var(--color-primary) !important;
}
.CodeMirror-cursor {
border-color: var(--color-caret) !important;
}
.CodeMirror .cm-comment {
background: inherit !important;
}
.CodeMirror .CodeMirror-code {
font: 14px var(--fonts-monospace);
}
.CodeMirror-selected {
background: var(--color-primary-light-1) !important;
color: var(--color-white) !important;
}
.CodeMirror-placeholder {
color: var(--color-placeholder-text) !important;
opacity: 1 !important;
}
.CodeMirror-focused {
border-color: var(--color-primary) !important;
}
.CodeMirror :focus {
outline: none;
}
public/assets/css/codemirror/dark.css
-106
View File
@@ -1,106 +0,0 @@
.CodeMirror.cm-s-default .cm-property,
.CodeMirror.cm-s-paper .cm-property {
color: #a0cc75;
}
.CodeMirror.cm-s-default .cm-header,
.CodeMirror.cm-s-paper .cm-header {
color: #9daccc;
}
.CodeMirror.cm-s-default .cm-quote,
.CodeMirror.cm-s-paper .cm-quote {
color: #009900;
}
.CodeMirror.cm-s-default .cm-keyword,
.CodeMirror.cm-s-paper .cm-keyword {
color: #cc8a61;
}
.CodeMirror.cm-s-default .cm-atom,
.CodeMirror.cm-s-paper .cm-atom {
color: #ef5e77;
}
.CodeMirror.cm-s-default .cm-number,
.CodeMirror.cm-s-paper .cm-number {
color: #ff5656;
}
.CodeMirror.cm-s-default .cm-def,
.CodeMirror.cm-s-paper .cm-def {
color: #e4e4e4;
}
.CodeMirror.cm-s-default .cm-variable-2,
.CodeMirror.cm-s-paper .cm-variable-2 {
color: #00bdbf;
}
.CodeMirror.cm-s-default .cm-variable-3,
.CodeMirror.cm-s-paper .cm-variable-3 {
color: #008855;
}
.CodeMirror.cm-s-default .cm-comment,
.CodeMirror.cm-s-paper .cm-comment {
color: #8e9ab3;
}
.CodeMirror.cm-s-default .cm-string,
.CodeMirror.cm-s-paper .cm-string {
color: #a77272;
}
.CodeMirror.cm-s-default .cm-string-2,
.CodeMirror.cm-s-paper .cm-string-2 {
color: #ff5500;
}
.CodeMirror.cm-s-default .cm-meta,
.CodeMirror.cm-s-paper .cm-meta,
.CodeMirror.cm-s-default .cm-qualifier,
.CodeMirror.cm-s-paper .cm-qualifier {
color: #ffb176;
}
.CodeMirror.cm-s-default .cm-builtin,
.CodeMirror.cm-s-paper .cm-builtin {
color: #b7c951;
}
.CodeMirror.cm-s-default .cm-bracket,
.CodeMirror.cm-s-paper .cm-bracket {
color: #999977;
}
.CodeMirror.cm-s-default .cm-tag,
.CodeMirror.cm-s-paper .cm-tag {
color: #f1d273;
}
.CodeMirror.cm-s-default .cm-attribute,
.CodeMirror.cm-s-paper .cm-attribute {
color: #bfcc70;
}
.CodeMirror.cm-s-default .cm-hr,
.CodeMirror.cm-s-paper .cm-hr {
color: #999999;
}
.CodeMirror.cm-s-default .cm-url,
.CodeMirror.cm-s-paper .cm-url {
color: #c5cfd0;
}
.CodeMirror.cm-s-default .cm-link,
.CodeMirror.cm-s-paper .cm-link {
color: #d8c792;
}
.CodeMirror.cm-s-default .cm-error,
.CodeMirror.cm-s-paper .cm-error {
color: #dbdbeb;
}
public/assets/css/codemirror/light.css
-1
View File
@@ -1 +0,0 @@
/* Placeholder, there is no light theme, it uses CM defaults */
public/assets/css/theme-codecraftsmen-auto.css
+13 -3
View File
@@ -1,13 +1,23 @@
@import "./theme-codecraftsmen-light.css" (prefers-color-scheme: light);
@import "./theme-codecraftsmen-dark.css" (prefers-color-scheme: dark);
#navbar-logo .nav-logo-dark { display: none; }
@media (prefers-color-scheme: light) {
html[data-theme="codecraftsmen-auto"] #navbar-logo img {
content: url("../img/logo-light-no-slogan.svg");
width: 60px;
height: 30px;
}
}
@media (prefers-color-scheme: dark) {
html[data-theme="codecraftsmen-auto"] #navbar-logo .nav-logo-light { display: none; }
html[data-theme="codecraftsmen-auto"] #navbar-logo .nav-logo-dark { display: inline; }
html[data-theme="codecraftsmen-auto"] #navbar-logo img {
content: url("../img/logo-dark-no-slogan.svg");
width: 60px;
height: 30px;
}
}
gitea-theme-meta-info {
--theme-display-name: "CodeCraftsmen Auto";
--theme-color-scheme: "auto";
}
public/assets/css/theme-codecraftsmen-dark.css
+9 -6
View File
@@ -1,20 +1,20 @@
@import "./chroma/dark.css";
@import "./codemirror/dark.css";
@import "./theme-gitea-dark.css";
gitea-theme-meta-info {
--theme-display-name: "CodeCraftsmen Dark";
--theme-color-scheme: "dark";
}
@font-face {
font-family: "Gotham";
src: url("/assets/fonts/GothamNarrow-Medium.woff2") format("woff2");
src: url("../fonts/GothamNarrow-Medium.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "alro";
src: url("/assets/fonts/alro-bold-700.woff2") format("woff2");
src: url("../fonts/alro-bold-700.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -293,8 +293,11 @@ 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-logo .nav-logo-light { display: none; }
html[data-theme="codecraftsmen-dark"] #navbar-logo .nav-logo-dark { display: inline; }
html[data-theme="codecraftsmen-dark"] #navbar-logo img {
content: url("../img/logo-dark-no-slogan.svg");
width: 60px;
height: 30px;
}
body,
input,
public/assets/css/theme-codecraftsmen-light.css
+9 -6
View File
@@ -1,20 +1,20 @@
@import "./chroma/light.css";
@import "./codemirror/light.css";
@import "./theme-gitea-light.css";
gitea-theme-meta-info {
--theme-display-name: "CodeCraftsmen Light";
--theme-color-scheme: "light";
}
@font-face {
font-family: "Gotham";
src: url("/assets/fonts/GothamNarrow-Medium.woff2") format("woff2");
src: url("../fonts/GothamNarrow-Medium.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "alro";
src: url("/assets/fonts/alro-bold-700.woff2") format("woff2");
src: url("../fonts/alro-bold-700.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -269,8 +269,11 @@ 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-logo .nav-logo-light { display: inline; }
html[data-theme="codecraftsmen-light"] #navbar-logo .nav-logo-dark { display: none; }
html[data-theme="codecraftsmen-light"] #navbar-logo img {
content: url("../img/logo-light-no-slogan.svg");
width: 60px;
height: 30px;
}
body,
input,