From 67f948028cae137d4a722ab121fb23460f729736 Mon Sep 17 00:00:00 2001 From: iris Date: Wed, 20 May 2026 15:42:32 +0200 Subject: [PATCH] =?UTF-8?q?add=20catppuccin=20mocha=20=C3=97=20vibec0re=20?= =?UTF-8?q?theme=20to=20forge?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - new nix/forge-theme/theme-catppuccin-vibec0re.css: full Catppuccin Mocha palette mapped to all Forgejo CSS custom properties + chroma syntax highlighting; vibec0re glow effects on primary buttons, nav, and links - hive-forge.nix: ui.DEFAULT_THEME + ui.THEMES settings - systemd.tmpfiles.rules symlinks the nix-managed CSS into /var/lib/forgejo/custom/public/assets/css/ before forgejo starts; container rebuild picks up CSS changes automatically Closes #55 --- nix/forge-theme/theme-catppuccin-vibec0re.css | 304 ++++++++++++++++++ nix/modules/hive-forge.nix | 15 + 2 files changed, 319 insertions(+) create mode 100644 nix/forge-theme/theme-catppuccin-vibec0re.css diff --git a/nix/forge-theme/theme-catppuccin-vibec0re.css b/nix/forge-theme/theme-catppuccin-vibec0re.css new file mode 100644 index 0000000..1141186 --- /dev/null +++ b/nix/forge-theme/theme-catppuccin-vibec0re.css @@ -0,0 +1,304 @@ +/* Catppuccin Mocha × vibec0re — hyperhive forge theme + Palette: https://catppuccin.com/palette (Mocha) + Primary accent: Mauve #cba6f7 (mirrors hive-c0re dashboard --purple) + Syntax highlighting: Catppuccin Mocha chroma palette +*/ + +/* ── chroma syntax highlighting ──────────────────────────────────────── */ +.chroma .bp{color:#89b4fa}.chroma .c,.chroma .c1,.chroma .ch,.chroma .cm{color:#6c7086;font-style:italic}.chroma .cp{color:#a6e3a1}.chroma .cpf{color:#89b4fa}.chroma .cs{color:#cba6f7}.chroma .dl{color:#89b4fa}.chroma .gd{color:#f38ba8;background-color:#3b2335}.chroma .ge{color:#cdd6f4;font-style:italic}.chroma .gh{color:#fab387;font-weight:bold}.chroma .gi{color:#a6e3a1;background-color:#1e3320}.chroma .go{color:#6c7086}.chroma .gp{color:#cdd6f4}.chroma .gr{color:#f38ba8}.chroma .gs{color:#cdd6f4;font-weight:bold}.chroma .gt{color:#fab387}.chroma .gu{color:#a6e3a1;font-weight:bold}.chroma .il{color:#fab387}.chroma .k{color:#cba6f7}.chroma .kc{color:#89b4fa}.chroma .kd{color:#cba6f7}.chroma .kn{color:#94e2d5}.chroma .kp{color:#a6e3a1}.chroma .kr{color:#cba6f7}.chroma .kt{color:#89dceb}.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .mo{color:#fab387}.chroma .n{color:#cdd6f4}.chroma .na,.chroma .nb{color:#89b4fa}.chroma .nc{color:#f9e2af}.chroma .nd{color:#a6e3a1}.chroma .ne{color:#fab387}.chroma .nf,.chroma .ni{color:#89b4fa}.chroma .nl{color:#cba6f7}.chroma .nn{color:#cdd6f4}.chroma .no{color:#fab387}.chroma .nt{color:#f38ba8}.chroma .nv{color:#cdd6f4}.chroma .nx{color:#cdd6f4}.chroma .o{color:#89dceb}.chroma .ow{color:#a6e3a1}.chroma .p{color:#bac2de}.chroma .s,.chroma .s1,.chroma .s2{color:#a6e3a1}.chroma .sa{color:#fab387}.chroma .sb{color:#a6e3a1}.chroma .sc{color:#a6e3a1}.chroma .sd{color:#6c7086;font-style:italic}.chroma .se{color:#f38ba8}.chroma .sh{color:#a6e3a1}.chroma .si{color:#94e2d5}.chroma .sr{color:#cba6f7}.chroma .ss{color:#f38ba8}.chroma .sx{color:#fab387}.chroma .vc,.chroma .vg,.chroma .vi{color:#89b4fa}.chroma .w{color:#585b70} + +/* ── dark-mode image visibility (same as gitea-dark) ─────────────────── */ +.markup [src$="#gh-light-mode-only"],.markup [src$="#light-mode-only"],.markup [href$="#gh-light-mode-only"],.markup [href$="#light-mode-only"]{display:none} +.markup [src$="#gh-dark-mode-only"],.markup [src$="#dark-mode-only"],.markup [href$="#gh-dark-mode-only"],.markup [href$="#dark-mode-only"]{display:unset} + +/* ── Catppuccin Mocha palette → Forgejo CSS vars ─────────────────────── */ +:root { + --is-dark-theme: true; + color-scheme: dark; + + /* Primary: Mauve #cba6f7 — matches hive-c0re dashboard --purple */ + --color-primary: #cba6f7; + --color-primary-contrast: #1e1e2e; + --color-primary-dark-1: #d0aff8; + --color-primary-dark-2: #d5b8f9; + --color-primary-dark-3: #dac2fa; + --color-primary-dark-4: #dfcbfb; + --color-primary-dark-5: #ead9fc; + --color-primary-dark-6: #f4effe; + --color-primary-dark-7: #faf7ff; + --color-primary-light-1: #b895e0; + --color-primary-light-2: #a580c7; + --color-primary-light-3: #9470b0; + --color-primary-light-4: #7d5b9a; + --color-primary-light-5: #4d3866; + --color-primary-light-6: #2a1e42; + --color-primary-light-7: #110d1e; + --color-primary-alpha-10: #cba6f719; + --color-primary-alpha-20: #cba6f733; + --color-primary-alpha-30: #cba6f74b; + --color-primary-alpha-40: #cba6f766; + --color-primary-alpha-50: #cba6f780; + --color-primary-alpha-60: #cba6f799; + --color-primary-alpha-70: #cba6f7b3; + --color-primary-alpha-80: #cba6f7cc; + --color-primary-alpha-90: #cba6f7e1; + --color-primary-hover: var(--color-primary-dark-1); + --color-primary-active: var(--color-primary-dark-2); + + /* Secondary: Surface1 #45475a */ + --color-secondary: #45475a; + --color-secondary-dark-1: #4e5069; + --color-secondary-dark-2: #585b70; + --color-secondary-dark-3: #6c7086; + --color-secondary-dark-4: #7f849c; + --color-secondary-dark-5: #9399b2; + --color-secondary-dark-6: #a6adc8; + --color-secondary-dark-7: #bac2de; + --color-secondary-dark-8: #cdd6f4; + --color-secondary-dark-9: #d3dcf6; + --color-secondary-dark-10: #d8e1f8; + --color-secondary-dark-11: #dde5f9; + --color-secondary-dark-12: #e2eafa; + --color-secondary-dark-13: #e7eefb; + --color-secondary-light-1: #313244; + --color-secondary-light-2: #292a3a; + --color-secondary-light-3: #1e1e2e; + --color-secondary-light-4: #181825; + --color-secondary-alpha-10: #45475a19; + --color-secondary-alpha-20: #45475a33; + --color-secondary-alpha-30: #45475a4b; + --color-secondary-alpha-40: #45475a66; + --color-secondary-alpha-50: #45475a80; + --color-secondary-alpha-60: #45475a99; + --color-secondary-alpha-70: #45475ab3; + --color-secondary-alpha-80: #45475acc; + --color-secondary-alpha-90: #45475ae1; + --color-secondary-hover: var(--color-secondary-dark-3); + --color-secondary-active: var(--color-secondary-dark-2); + + /* Terminal / console: Crust/Mantle tones */ + --color-console-fg: #cdd6f4; + --color-console-fg-subtle: #a6adc8; + --color-console-bg: #11111b; + --color-console-border: #313244; + --color-console-hover-bg: #1e1e2e; + --color-console-active-bg: #313244; + --color-console-menu-bg: #181825; + --color-console-menu-border: #45475a; + + /* Named accent colours → Catppuccin equivalents */ + --color-red: #f38ba8; + --color-orange: #fab387; + --color-yellow: #f9e2af; + --color-olive: #a6e3a1; + --color-green: #a6e3a1; + --color-teal: #94e2d5; + --color-blue: #89b4fa; + --color-violet: #b4befe; + --color-purple: #cba6f7; + --color-pink: #f5c2e7; + --color-brown: #fab387; + --color-black: #11111b; + --color-red-light: #eba0ac; + --color-orange-light: #fab387; + --color-yellow-light: #f9e2af; + --color-olive-light: #a6e3a1; + --color-green-light: #a6e3a1; + --color-teal-light: #94e2d5; + --color-blue-light: #89b4fa; + --color-violet-light: #b4befe; + --color-purple-light: #cba6f7; + --color-pink-light: #f5c2e7; + --color-brown-light: #fab387; + --color-black-light: #313244; + --color-red-dark-1: #f38ba8; + --color-orange-dark-1:#fab387; + --color-yellow-dark-1:#f9e2af; + --color-olive-dark-1: #a6e3a1; + --color-green-dark-1: #a6e3a1; + --color-teal-dark-1: #94e2d5; + --color-blue-dark-1: #74c7ec; + --color-violet-dark-1:#b4befe; + --color-purple-dark-1:#cba6f7; + --color-pink-dark-1: #f5c2e7; + --color-brown-dark-1: #fab387; + --color-black-dark-1: #1e1e2e; + --color-red-dark-2: #eb8da4; + --color-orange-dark-2:#f5aa80; + --color-yellow-dark-2:#f4daa8; + --color-olive-dark-2: #9fd99b; + --color-green-dark-2: #9fd99b; + --color-teal-dark-2: #8dd9cd; + --color-blue-dark-2: #6cbfe6; + --color-violet-dark-2:#aab4f8; + --color-purple-dark-2:#c29ef2; + --color-pink-dark-2: #f0b9e2; + --color-brown-dark-2: #f0a378; + --color-black-dark-2: #181825; + + /* ANSI terminal colours */ + --color-ansi-black: #11111b; + --color-ansi-red: #f38ba8; + --color-ansi-green: #a6e3a1; + --color-ansi-yellow: #f9e2af; + --color-ansi-blue: #89b4fa; + --color-ansi-magenta: #f5c2e7; + --color-ansi-cyan: #94e2d5; + --color-ansi-white: var(--color-console-fg-subtle); + --color-ansi-bright-black: #45475a; + --color-ansi-bright-red: #f38ba8; + --color-ansi-bright-green: #a6e3a1; + --color-ansi-bright-yellow: #f9e2af; + --color-ansi-bright-blue: #89b4fa; + --color-ansi-bright-magenta: #f5c2e7; + --color-ansi-bright-cyan: #94e2d5; + --color-ansi-bright-white: var(--color-console-fg); + + --color-grey: #45475a; + --color-grey-light: #7f849c; + --color-gold: #f9e2af; + --color-white: #cdd6f4; + + /* Diff colours */ + --color-diff-removed-word-bg: #4b1c2c; + --color-diff-added-word-bg: #1c3a2a; + --color-diff-removed-row-bg: #3b1525; + --color-diff-moved-row-bg: #3a3520; + --color-diff-added-row-bg: #1a2e24; + --color-diff-removed-row-border:#6b3044; + --color-diff-moved-row-border: #b0a850; + --color-diff-added-row-border: #2d5040; + --color-diff-inactive: #181825; + + /* Feedback colours */ + --color-error-border: #f38ba8; + --color-error-bg: #3b1525; + --color-error-bg-active: #4d1e30; + --color-error-bg-hover: #44192b; + --color-error-text: #f38ba8; + --color-success-border: #a6e3a1; + --color-success-bg: #1a2e24; + --color-success-text: #a6e3a1; + --color-warning-border: #f9e2af; + --color-warning-bg: #2e2a1a; + --color-warning-text: #f9e2af; + --color-info-border: #89b4fa; + --color-info-bg: #1a2040; + --color-info-text: #89b4fa; + + /* Badge colours */ + --color-red-badge: #f38ba8; + --color-red-badge-bg: #f38ba81a; + --color-red-badge-hover-bg: #f38ba84d; + --color-green-badge: #a6e3a1; + --color-green-badge-bg: #a6e3a11a; + --color-green-badge-hover-bg: #a6e3a14d; + --color-yellow-badge: #f9e2af; + --color-yellow-badge-bg: #f9e2af1a; + --color-yellow-badge-hover-bg:#f9e2af4d; + --color-orange-badge: #fab387; + --color-orange-badge-bg: #fab3871a; + --color-orange-badge-hover-bg:#fab3874d; + + /* Layout */ + --color-body: #1e1e2e; + --color-box-header: #181825; + --color-box-body: #11111b; + --color-box-body-highlight: #1e1e2e; + --color-text-dark: #cdd6f4; + --color-text: #cdd6f4; + --color-text-light: #bac2de; + --color-text-light-1: #a6adc8; + --color-text-light-2: #9399b2; + --color-text-light-3: #7f849c; + --color-footer: var(--color-nav-bg); + --color-timeline: #45475a; + --color-input-text: var(--color-text-dark); + --color-input-background: #11111b; + --color-input-toggle-background: #313244; + --color-input-border: var(--color-secondary); + --color-input-border-hover: var(--color-secondary-dark-1); + --color-light: #cba6f71a; + --color-light-mimic-enabled: rgba(0,0,0,calc(40/255*222/255/var(--opacity-disabled))); + --color-light-border: #cba6f726; + --color-hover: #cba6f714; + --color-active: #313244; + --color-menu: #181825; + --color-card: #181825; + --fancy-card-bg: #11111b; + --fancy-card-border: #45475a; + --color-markup-table-row: #cba6f70d; + --color-markup-code-block: #cba6f710; + --color-markup-code-inline:#cba6f724; + --color-button: #181825; + --color-code-bg: #11111b; + --color-shadow: #11111b80; + --color-secondary-bg: #313244; + --color-expand-button: #292a3a; + --color-placeholder-text: var(--color-text-light-3); + --color-editor-line-highlight: var(--color-primary-light-5); + --color-project-column-bg: var(--color-secondary-light-2); + --color-caret: var(--color-text); + --color-reaction-bg: #cba6f710; + --color-reaction-hover-bg: var(--color-primary-light-4); + --color-reaction-active-bg: var(--color-primary-light-5); + --color-tooltip-text: #cdd6f4; + --color-tooltip-bg: #11111bee; + + /* Navigation */ + --color-nav-bg: #181825; + --color-nav-hover-bg: var(--color-secondary-light-1); + --color-secondary-nav-bg: #1e1e2e; + + /* Labels */ + --color-label-text: var(--color-text); + --color-label-bg: #7f849c40; + --color-label-hover-bg: #7f849c99; + --color-label-active-bg: #7f849cff; + + /* Accent */ + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + + /* Highlight / selection */ + --color-highlight-fg: #cba6f7; + --color-highlight-bg: #4d38663a; + --color-overlay-backdrop: #11111bc0; + --color-selection-bg: var(--color-primary-light-1); + --color-selection-fg: #1e1e2e; + + /* Misc */ + --checkerboard-color-1: #313244; + --checkerboard-color-2: #1e1e2e; + --color-indicator-offline: #6c7086; + --color-indicator-offline-20: #6c70861a; + --color-indicator-idle: #a6e3a1; + --color-indicator-idle-20: #a6e3a11a; + --color-indicator-active: #89b4fa; + --color-indicator-active-20: #89b4fa33; + + accent-color: var(--color-accent); +} + +/* ── vibec0re: glow accents on interactive elements ──────────────────── */ +.ui.primary.button, +a.ui.primary.button, +.ui.primary.buttons .button { + text-shadow: 0 0 8px rgba(203, 166, 247, 0.6); + box-shadow: 0 0 12px -2px rgba(203, 166, 247, 0.35); +} +.ui.primary.button:hover, +.ui.primary.buttons .button:hover { + box-shadow: 0 0 18px -2px rgba(203, 166, 247, 0.55); +} +#navbar .item.active, +#navbar .item:hover { + text-shadow: 0 0 6px rgba(203, 166, 247, 0.45); +} +.repository .file-view .lines-num { + background: #181825; + border-color: #313244; +} +a:not(.ui.button):not(.item) { + text-shadow: 0 0 3px rgba(137, 180, 250, 0.25); +} diff --git a/nix/modules/hive-forge.nix b/nix/modules/hive-forge.nix index 2cd7eec..d88569e 100644 --- a/nix/modules/hive-forge.nix +++ b/nix/modules/hive-forge.nix @@ -145,6 +145,14 @@ in # so an in-hive mirror of the hyperhive repo works. migrations.ALLOW_LOCALNETWORKS = true; log.LEVEL = "Warn"; + ui = { + # Catppuccin Mocha theme shipped as a nix-managed CSS file. + # The tmpfiles rule below symlinks the file into the custom + # dir before forgejo starts, so a container rebuild always + # picks up CSS changes without touching persistent state. + DEFAULT_THEME = "catppuccin-vibec0re"; + THEMES = "catppuccin-vibec0re,gitea-auto,gitea-light,gitea-dark"; + }; # F3 (federation) computes its data dir relative to the # forgejo binary, which lands in the read-only nix # store and crashes anything that touches the F3 @@ -159,6 +167,13 @@ in }; }; environment.systemPackages = [ pkgs.forgejo ]; + # Deploy the Catppuccin Mocha theme CSS into forgejo's custom + # public assets directory. Using a symlink (L+) so container + # rebuilds automatically reflect CSS edits without extra copies. + systemd.tmpfiles.rules = [ + "d /var/lib/forgejo/custom/public/assets/css 0755 forgejo forgejo -" + "L+ /var/lib/forgejo/custom/public/assets/css/theme-catppuccin-vibec0re.css - - - - ${../forge-theme/theme-catppuccin-vibec0re.css}" + ]; }; };