diff --git a/README.md b/README.md new file mode 100644 index 0000000..9ea1773 --- /dev/null +++ b/README.md @@ -0,0 +1,43 @@ +# CodeCraftsmen Gitea Theme + +Custom themes and branding for the CodeCraftsmen Gitea instance. + +## Compatibility + +The theme supports Gitea 1.27.x. Each custom theme imports the matching built-in +Gitea theme and overrides only the CodeCraftsmen palette, typography, and logo. +This allows new upstream theme variables to retain their Gitea defaults. + +The repository intentionally avoids overriding Gitea's internal templates. The +navbar logo is replaced through theme CSS so Gitea template changes are applied +normally during upgrades. + +## Installation + +Copy `public` and `templates` into the instance's Gitea custom path, configure +the available themes, and restart Gitea: + +```ini +[ui] +THEMES = gitea-auto,gitea-light,gitea-dark,codecraftsmen-auto,codecraftsmen-light,codecraftsmen-dark +DEFAULT_THEME = codecraftsmen-auto +``` + +The homelab repository vendors these files under +`ansible/roles/gitea/files/theme` so a Gitea rebuild does not depend on this +repository being available from the Gitea instance. + +## Upgrade Process + +1. Update the imported Gitea version locally. +2. Compare the custom palette with the built-in light and dark themes for that + exact release. +3. Test anonymous, authenticated, and administrator pages with light, dark, and + auto themes. +4. Synchronize the reviewed files into the homelab Gitea role. + +## Assets + +The font and branding files are project-supplied assets. Their presence in this +repository does not grant redistribution rights. Confirm the applicable font +and brand licenses before making the repository public or redistributing it. diff --git a/public/assets/css/chroma/base.css b/public/assets/css/chroma/base.css deleted file mode 100644 index bce1333..0000000 --- a/public/assets/css/chroma/base.css +++ /dev/null @@ -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; -} diff --git a/public/assets/css/chroma/dark.css b/public/assets/css/chroma/dark.css deleted file mode 100644 index bfe9d69..0000000 --- a/public/assets/css/chroma/dark.css +++ /dev/null @@ -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 */ diff --git a/public/assets/css/chroma/light.css b/public/assets/css/chroma/light.css deleted file mode 100644 index c1e4cb3..0000000 --- a/public/assets/css/chroma/light.css +++ /dev/null @@ -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 */ diff --git a/public/assets/css/codemirror/base.css b/public/assets/css/codemirror/base.css deleted file mode 100644 index aedf7d8..0000000 --- a/public/assets/css/codemirror/base.css +++ /dev/null @@ -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; -} diff --git a/public/assets/css/codemirror/dark.css b/public/assets/css/codemirror/dark.css deleted file mode 100644 index 8a20d1c..0000000 --- a/public/assets/css/codemirror/dark.css +++ /dev/null @@ -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; -} diff --git a/public/assets/css/codemirror/light.css b/public/assets/css/codemirror/light.css deleted file mode 100644 index aa89263..0000000 --- a/public/assets/css/codemirror/light.css +++ /dev/null @@ -1 +0,0 @@ -/* Placeholder, there is no light theme, it uses CM defaults */ diff --git a/public/assets/css/theme-codecraftsmen-auto.css b/public/assets/css/theme-codecraftsmen-auto.css index 3467f7b..04d2e85 100644 --- a/public/assets/css/theme-codecraftsmen-auto.css +++ b/public/assets/css/theme-codecraftsmen-auto.css @@ -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"; } diff --git a/public/assets/css/theme-codecraftsmen-dark.css b/public/assets/css/theme-codecraftsmen-dark.css index b3e14e0..b4dc1dd 100644 --- a/public/assets/css/theme-codecraftsmen-dark.css +++ b/public/assets/css/theme-codecraftsmen-dark.css @@ -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, diff --git a/public/assets/css/theme-codecraftsmen-light.css b/public/assets/css/theme-codecraftsmen-light.css index bb8cd9b..ba72cc3 100644 --- a/public/assets/css/theme-codecraftsmen-light.css +++ b/public/assets/css/theme-codecraftsmen-light.css @@ -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, diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl deleted file mode 100644 index 27217e1..0000000 --- a/templates/base/head_navbar.tmpl +++ /dev/null @@ -1,179 +0,0 @@ - diff --git a/templates/custom/header.tmpl b/templates/custom/header.tmpl index 9c26ac1..98a758f 100644 --- a/templates/custom/header.tmpl +++ b/templates/custom/header.tmpl @@ -1,7 +1,6 @@ - - + -