/* ===================================================================== * theme-dunk — Kente-inspired dark theme for git.dunk.works * * Palette: traditional Kente cloth (red / yellow / green on black). * - Surfaces: very dark navy-black, taken from the favicon gradient. * - Red (oxblood): danger, removed diffs, branding flourishes. * - Yellow (ochre): warnings, stars, pending, highlights. * - Green (forest): primary actions, links, added diffs, success. * - Brighter favicon hues are reserved for focus rings and small icons, * not for any wide-area fill (they'd compete with the kente trio). * * Base: imports Forgejo's built-in dark theme so we only have to override * the colours we actually want to change. Everything not redeclared here * inherits sensible dark-mode defaults. * * Selector note: Forgejo loads ONE theme CSS at a time, and its own theme * files declare variables on bare `:root { ... }` — not `:root.theme-NAME`. * Wrapping our overrides in `:root.theme-dunk` would make them never match * (the element has no such class), and the @import'd base would * win silently — i.e. the page would look exactly like forgejo-dark with * none of our colours. Keep these rules on bare `:root`. * ===================================================================== */ @import url("./theme-forgejo-dark.css"); /* ===================================================================== * Cantarell — GNOME's UI font, self-hosted. * `local()` first so a system-installed Cantarell (every GNOME desktop, * many Linux distros) is used without fetching anything. Falls back to * the woff2 files deployed alongside this theme by the Ansible role. * font-display: swap so the page never blocks on the font load. * ===================================================================== */ @font-face { font-family: "Cantarell"; font-style: normal; font-weight: 400; font-display: swap; src: local("Cantarell"), url("/assets/fonts/cantarell-400.woff2") format("woff2"); } @font-face { font-family: "Cantarell"; font-style: normal; font-weight: 700; font-display: swap; src: local("Cantarell Bold"), local("Cantarell"), url("/assets/fonts/cantarell-700.woff2") format("woff2"); } :root { /* === UI font ======================================================== */ /* Forgejo defines `--fonts-regular` as * var(--fonts-override, var(--fonts-proportional)), "Liberation Sans", ... * — i.e. `--fonts-override` is the purpose-built slot for theme/custom * font injection, and slots in BEFORE the system stack and emoji * fallback automatically. Setting `--fonts-regular` directly loses to * base.css's later declaration. Monospace is untouched (Cantarell is a * UI face, not a code face). */ --fonts-override: "Cantarell"; /* === Kente palette (raw) ============================================= */ --kente-red: #9E2A22; /* oxblood — load-bearing red */ --kente-red-bright: #E5392E; /* favicon red — reserved for accents */ --kente-yellow: #C4951C; /* ochre — load-bearing yellow */ --kente-yellow-bright: #F5C518; /* favicon yellow — focus / stars */ --kente-green: #1B7A48; /* forest — load-bearing green */ --kente-green-bright: #1FAF66; /* favicon green — focus rings */ --kente-bg: #0B0E13; /* favicon gradient bottom — site background */ --kente-bg-raised: #161C24; /* favicon gradient top — panels, boxes */ --kente-bg-hover: #1C2531; --kente-bg-sunk: #06090E; /* below site bg — code surfaces sit here */ --kente-border: #262E3A; /* favicon border */ /* === Surfaces ======================================================== */ --color-body: var(--kente-bg); --color-box-header: var(--kente-bg-raised); --color-box-body: var(--kente-bg-raised); --color-box-body-highlight: var(--kente-bg-hover); --color-menu: var(--kente-bg-raised); --color-card: var(--kente-bg-raised); --color-markup-code-block: var(--kente-bg-sunk); --color-markup-table-row: var(--kente-bg-raised); --color-markup-code-inline: #1F2733; --color-input-background: #0F141B; --color-secondary-bg: var(--kente-bg-raised); --color-header-bar: var(--kente-bg); --color-header-bar-bg: var(--kente-bg); --color-nav-bg: var(--kente-bg); --color-nav-hover-bg: var(--kente-bg-hover); --color-light: rgba(31, 175, 102, 0.06); --color-light-mimic-enabled: var(--kente-bg-hover); --color-hover: var(--kente-bg-hover); --color-active: #20293A; --color-secondary: var(--kente-border); --color-secondary-dark-1: #2D3645; --color-secondary-dark-2: #364050; --color-secondary-light-1: #1E2530; --color-secondary-light-2: #18202C; --color-light-border: var(--kente-border); --color-input-border: var(--kente-border); --color-input-border-hover: #3A4555; /* === Text =========================================================== */ --color-text: #E1E5EC; --color-text-dark: #F5F7FA; --color-text-light: #B8C0CC; --color-text-light-1: #95A0AE; --color-text-light-2: #7B8694; --color-text-light-3: #5E6976; /* === Primary (Kente green carries the interactive surfaces) ========== */ /* Buttons, links, focus rings, pagination, selected tabs, etc. */ --color-primary: var(--kente-green); --color-primary-contrast: #FFFFFF; --color-primary-dark-1: #19703F; --color-primary-dark-2: #156639; --color-primary-dark-3: #115C32; --color-primary-dark-4: #0E512C; --color-primary-dark-5: #0A4626; --color-primary-dark-6: #073B20; --color-primary-dark-7: #04301A; --color-primary-light-1: #228754; --color-primary-light-2: #2A9460; --color-primary-light-3: #339F6B; --color-primary-light-4: #4DB37E; --color-primary-light-5: #6DC394; --color-primary-light-6: #95D4B0; --color-primary-light-7: #C2E5CD; --color-primary-alpha-10: rgba(27, 122, 72, 0.10); --color-primary-alpha-20: rgba(27, 122, 72, 0.20); --color-primary-alpha-30: rgba(27, 122, 72, 0.30); --color-primary-alpha-40: rgba(27, 122, 72, 0.40); --color-primary-alpha-50: rgba(27, 122, 72, 0.50); --color-primary-alpha-60: rgba(27, 122, 72, 0.60); --color-primary-alpha-70: rgba(27, 122, 72, 0.70); --color-primary-alpha-80: rgba(27, 122, 72, 0.80); --color-primary-alpha-90: rgba(27, 122, 72, 0.90); /* === Semantic palette ================================================ */ /* Kente red/yellow/green replace Forgejo's defaults; other hues are tuned down a notch so they don't fight the trio. */ --color-red: var(--kente-red); --color-orange: #B8651E; --color-yellow: var(--kente-yellow); --color-olive: #8A7A1E; --color-green: var(--kente-green); --color-teal: #1B7A6A; --color-blue: #2A6FB8; --color-violet: #6E4FB0; --color-purple: #8B3FA8; --color-pink: #B8447A; --color-brown: #6B4226; --color-black: var(--kente-bg); /* === Diffs ========================================================== */ /* Kente red for removed, Kente green for added; backgrounds are low- alpha so long files don't strobe. Borders use deeper tones. */ --color-diff-removed-word-bg: rgba(229, 57, 46, 0.40); --color-diff-added-word-bg: rgba(31, 175, 102, 0.40); --color-diff-removed-row-bg: rgba(158, 42, 34, 0.18); --color-diff-added-row-bg: rgba(27, 122, 72, 0.18); --color-diff-removed-row-border: #5A1814; --color-diff-added-row-border: #0E512C; --color-diff-inactive-row-bg: #11161E; /* === Misc / accents ================================================== */ --color-shadow: rgba(0, 0, 0, 0.55); --color-accent: var(--kente-yellow-bright); --color-small-accent: rgba(245, 197, 24, 0.18); --color-active-line: rgba(245, 197, 24, 0.10); --color-caret: var(--color-text); --color-placeholder-text: var(--color-text-light-3); --color-editor-line-highlight: var(--kente-bg-hover); --color-reaction-bg: rgba(27, 122, 72, 0.10); --color-reaction-active-bg: rgba(27, 122, 72, 0.25); --color-tooltip-text: #F5F7FA; --color-tooltip-bg: #1C2531; --color-label-text: #F5F7FA; --color-label-bg: #2D3645; --color-label-hover-bg: #3A4555; --color-project-board-bg: var(--kente-bg-raised); --color-expand-button: var(--kente-bg-hover); /* Markdown: blockquote stripe in Kente ochre — reads as a highlight, not a warning, in a way pure-grey blockquotes never do. */ --color-markdown-blockquote-border: var(--kente-yellow); --color-markdown-blockquote-text: var(--color-text-light); --color-markdown-table-border: var(--kente-border); --color-markdown-code-bg: #1F2733; } /* ===================================================================== * Kente stripe motif — the single identity flourish. * A 3px banded red/yellow/green border under the top navbar. One subtle * touch beats peppering stripes across the UI. * ===================================================================== */ :root #navbar { border-bottom: 3px solid transparent; border-image: linear-gradient( to right, var(--kente-red) 0%, var(--kente-red) 33.333%, var(--kente-yellow) 33.333%, var(--kente-yellow) 66.666%, var(--kente-green) 66.666%, var(--kente-green) 100% ) 1; } /* Focus rings use the bright favicon green so keyboard nav pops without colliding with the deeper forest used for static UI. */ :root *:focus-visible { outline: 2px solid var(--kente-green-bright); outline-offset: 1px; } /* Stars stay in the bright favicon ochre — they're tiny and meant to read as gold, not as a muted "warning yellow". */ :root .ui.star.icon.active, :root .text.yellow { color: var(--kente-yellow-bright) !important; } /* ===================================================================== * Code surface — push file viewer + Chroma container BELOW the site bg. * `--color-markup-code-block` (set above) handles Markdown fenced code; * the file/diff viewer renders through `.code-view` + `.chroma` which * pull their background from a different surface. Setting both to the * sunk-bg makes every code surface read consistently as "set into" the * page. Diff row tints (red/green at low alpha) layer on top unchanged. * ===================================================================== */ :root .code-view, :root .code-view .lines-num, :root .code-view .lines-code, :root .code-view pre, :root .file-view .code-view, :root .chroma { background-color: var(--kente-bg-sunk); } /* Line-number gutter: keep it at the sunk bg but dim the numerals so the code itself is what your eye lands on. */ :root .code-view .lines-num { color: var(--color-text-light-3); } /* ===================================================================== * Chroma syntax highlighting — Kente palette for code views. * * Forgejo renders static code (file browser, diffs, blame, blob view) * through Chroma, which emits short Pygments-style class names under a * `.chroma` wrapper: `.k` keyword, `.s` string, `.m` number, `.nf` func, * `.nt` tag, etc. Each variant has sub-classes (`.kd`, `.s1`, `.mi`...); * we set the parent class and let sub-classes inherit unless they need * a different role. * * Palette uses the BRIGHT favicon hues (not the deeper UI variants) — * code is tiny monospace text and would go muddy in the darker tones. * All three Kente accents earn equal screen time when reading code, * mirroring the Kente-stripe philosophy applied to the navbar. * * Roles: * red (#E5392E) — keywords, builtins, tags, errors (the skeleton) * green (#1FAF66) — strings, function calls (the content) * yellow (#F5C518) — numbers, function/class defs, (the labels & * decorators, html attributes identifiers) * grey (text-3) — comments, operators, punctuation (the scaffold) * * Note: the in-browser file editor uses Monaco, which has its own JS * theme system — these rules don't reach it. Static views (the 99%) only. * ===================================================================== */ /* --- Comments (all variants recede to muted grey) -------------------- */ .chroma .c, /* Comment */ .chroma .ch, /* Comment.Hashbang */ .chroma .cm, /* Comment.Multiline */ .chroma .c1, /* Comment.Single */ .chroma .cs, /* Comment.Special (TODO/FIXME etc.) */ .chroma .cp, /* Comment.Preproc */ .chroma .cpf /* Comment.PreprocFile */ { color: var(--color-text-light-3); font-style: italic; } /* Special comments (TODO/FIXME) lean a shade brighter so they catch the eye without screaming. */ .chroma .cs { color: var(--color-text-light-2); font-weight: 600; } /* --- Keywords (the structural skeleton — Kente red) ------------------ */ .chroma .k, /* Keyword */ .chroma .kc, /* Keyword.Constant (true/false/null) */ .chroma .kd, /* Keyword.Declaration (var/def/let) */ .chroma .kn, /* Keyword.Namespace (import/from) */ .chroma .kp, /* Keyword.Pseudo */ .chroma .kr, /* Keyword.Reserved */ .chroma .kt /* Keyword.Type (int/string in some langs) */ { color: var(--kente-red-bright); } /* Operator-words (Python `and`/`or`/`not`, Ruby `and`/`or`) read as keywords — colour them the same. */ .chroma .ow { color: var(--kente-red-bright); } /* --- Strings (the content — Kente green) ----------------------------- */ .chroma .s, /* String */ .chroma .sa, /* String.Affix (b"..", r"..") */ .chroma .sb, /* String.Backtick */ .chroma .sc, /* String.Char */ .chroma .dl, /* String.Delimiter */ .chroma .sd, /* String.Doc (docstrings) */ .chroma .s2, /* String.Double */ .chroma .sh, /* String.Heredoc */ .chroma .sx, /* String.Other */ .chroma .s1, /* String.Single */ .chroma .ss /* String.Symbol */ { color: var(--kente-green-bright); } /* Escapes and interpolations glow a shade hotter so `${var}` and `\n` pop against the surrounding string body. */ .chroma .se, /* String.Escape */ .chroma .si /* String.Interpol */ { color: var(--kente-yellow-bright); font-weight: 600; } /* Regex literals share the string family but lean toward yellow to hint "this is a different little language inside the string." */ .chroma .sr { color: var(--kente-yellow-bright); } /* --- Numbers and other literals (Kente yellow) ----------------------- */ .chroma .m, /* Number (generic) */ .chroma .mb, /* Number.Bin */ .chroma .mf, /* Number.Float */ .chroma .mh, /* Number.Hex */ .chroma .mi, /* Number.Integer */ .chroma .mo, /* Number.Oct */ .chroma .il, /* Number.IntegerLong */ .chroma .l, /* Literal (generic) */ .chroma .ld /* Literal.Date */ { color: var(--kente-yellow-bright); } /* --- Names (mixed by role) ------------------------------------------- */ /* Plain names / variables stay in body text — no highlight is the right answer for the most common token. */ .chroma .n, /* Name (default) */ .chroma .nv, /* Name.Variable */ .chroma .vc, /* Name.Variable.Class */ .chroma .vg, /* Name.Variable.Global */ .chroma .vi, /* Name.Variable.Instance */ .chroma .nx /* Name.Other */ { color: var(--color-text); } /* Builtins (`print`, `len`, `console`) behave like keywords visually. */ .chroma .nb, /* Name.Builtin */ .chroma .bp /* Name.Builtin.Pseudo (self, this) */ { color: var(--kente-red-bright); } /* Function and class definitions — the "labels of things." Yellow. */ .chroma .nf, /* Name.Function */ .chroma .nc, /* Name.Class */ .chroma .fm /* Name.Function.Magic */ { color: var(--kente-yellow-bright); font-weight: 600; } /* Decorators and entities. */ .chroma .nd, /* Name.Decorator */ .chroma .ni /* Name.Entity (HTML & etc.) */ { color: var(--kente-yellow-bright); } /* Constants (UPPER_SNAKE, named constants) — red, like keywords. */ .chroma .no /* Name.Constant */ { color: var(--kente-red-bright); } /* Exceptions — yellow, like class names (they ARE class names). */ .chroma .ne /* Name.Exception */ { color: var(--kente-yellow-bright); font-weight: 600; } /* Namespaces (module names in imports). Reads as "label." */ .chroma .nn /* Name.Namespace */ { color: var(--kente-yellow-bright); } /* HTML/XML tags read as the markup language's keyword. */ .chroma .nt /* Name.Tag */ { color: var(--kente-red-bright); } /* HTML attributes — yellow pairs with the red tag. */ .chroma .na /* Name.Attribute */ { color: var(--kente-yellow-bright); } /* Labels (goto/case targets, rare). */ .chroma .nl /* Name.Label */ { color: var(--color-text-light); } /* --- Operators and punctuation (recede to dim text) ------------------ */ .chroma .o, /* Operator */ .chroma .p /* Punctuation */ { color: var(--color-text-light); } /* --- Generic (Markdown, diffs inside code blocks, REPL output) ------- */ .chroma .gh, /* Generic.Heading */ .chroma .gu /* Generic.Subheading */ { color: var(--kente-yellow-bright); font-weight: 700; } .chroma .gd { color: var(--kente-red-bright); } /* Generic.Deleted */ .chroma .gi { color: var(--kente-green-bright); } /* Generic.Inserted */ .chroma .ge { color: var(--color-text); font-style: italic; } /* Generic.Emph */ .chroma .gs { color: var(--color-text); font-weight: 700; } /* Generic.Strong */ .chroma .gp { color: var(--kente-green-bright); } /* Generic.Prompt ($> etc.) */ .chroma .go { color: var(--color-text-light); } /* Generic.Output */ .chroma .gt, /* Generic.Traceback */ .chroma .gr { color: var(--kente-red-bright); } /* Generic.Error */ /* --- Errors (Chroma flags invalid tokens with .err) ------------------ */ .chroma .err { color: var(--kente-red-bright); text-decoration: underline wavy var(--kente-red-bright); }