/* ========================================================================== theme-fish — a Forgejo theme ported from clover's theme, recolored with the "fish" palette (color tokens from the fish site's global.css). Install: 1. Drop this file at: /public/assets/css/theme-fish.css (usually /var/lib/gitea/custom/... or the mounted custom volume) 2. In app.ini add "fish" to the theme list, e.g.: [ui] THEMES = forgejo-auto,forgejo-light,forgejo-dark,fish DEFAULT_THEME = fish ; optional 3. Restart Forgejo, then pick "fish" under Settings → Appearance. It auto-switches light/dark with the OS via prefers-color-scheme, matching the fish site's light-dark() tokens. ========================================================================== */ @import "theme-forgejo-light.css"; @import "theme-forgejo-dark.css" (prefers-color-scheme: dark); @import url("https://fonts.googleapis.com/css2?family=Recursive:CASL,CRSV,MONO,wght@0..1,0..1,0..1,300..1000&display=swap"); /* -------------------------------------------------------------------------- fish color tokens (from fish/src/styles/global.css @theme) given as light / dark pairs for reference: paper #fdedf9 / #1e0a12 (page background) ink #200417 / #fbeee9 (body text) muted #921c68 / #b7998f (secondary text) card #fffafd / #2a1613 (raised surfaces) border #ff6bd0 / #d75023 (hairlines) accent #99056d / #e85a24 (primary / links) accent-ink #fff7f5 / #1e0a12 (text on accent) error #da6b7d / #ff9aab -------------------------------------------------------------------------- */ /* ============================ LIGHT (default) ============================ */ :root { --fonts-proportional: Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif !important; --fonts-monospace: Recursive, "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace !important; --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji" !important; /* --- fish palette as raw tokens (light) --- */ --fish-paper: #fdedf9; --fish-ink: #200417; --fish-muted: #921c68; --fish-card: #fffafd; --fish-border: #ff6bd0; --fish-accent: #99056d; --fish-accent-ink: #fff7f5; --fish-error: #da6b7d; /* --- map onto Forgejo surfaces --- */ --color-body: var(--fish-paper); --color-nav-bg: color-mix(in srgb, var(--fish-card) 92%, var(--fish-accent)); --color-footer: var(--fish-card); --color-box-body: var(--fish-card); --color-box-body-highlight: color-mix(in srgb, var(--fish-card) 92%, var(--fish-accent)); --color-box-header: color-mix(in srgb, var(--fish-card) 88%, var(--fish-accent)); --color-card: var(--fish-card); --color-menu: var(--fish-card); --color-input-background: var(--fish-card); --color-input-border: color-mix(in srgb, var(--fish-border) 70%, var(--fish-paper)); --color-input-border-hover: var(--fish-border); --color-light: color-mix(in srgb, var(--fish-accent) 6%, transparent); --color-light-mimic-enabled: var(--color-light); --color-hover: color-mix(in srgb, var(--fish-accent) 10%, transparent); --color-active: color-mix(in srgb, var(--fish-accent) 16%, transparent); --color-focus-border: var(--fish-accent); --color-text: var(--fish-ink); --color-text-dark: color-mix(in srgb, var(--fish-ink) 100%, black 6%); --color-text-light: color-mix(in srgb, var(--fish-ink) 80%, var(--fish-paper)); --color-text-light-1: color-mix(in srgb, var(--fish-ink) 68%, var(--fish-paper)); --color-text-light-2: color-mix(in srgb, var(--fish-ink) 56%, var(--fish-paper)); --color-text-light-3: color-mix(in srgb, var(--fish-ink) 44%, var(--fish-paper)); --color-secondary: color-mix(in srgb, var(--fish-border) 45%, var(--fish-paper)); --color-secondary-dark-1: color-mix(in srgb, var(--fish-border) 55%, var(--fish-paper)); --color-secondary-dark-2: color-mix(in srgb, var(--fish-border) 65%, var(--fish-paper)); --color-error-text: var(--fish-error); --color-error-bg: color-mix(in srgb, var(--fish-error) 16%, var(--fish-paper)); --color-error-border: color-mix(in srgb, var(--fish-error) 55%, var(--fish-paper)); /* --- primary (accent) + Forgejo's full derived ramp --- */ --color-primary: var(--fish-accent); --color-primary-contrast: var(--fish-accent-ink); --color-primary-dark-1: color-mix(in srgb, var(--color-primary) 90%, white); --color-primary-dark-2: color-mix(in srgb, var(--color-primary) 80%, white); --color-primary-dark-3: color-mix(in srgb, var(--color-primary) 70%, white); --color-primary-dark-4: color-mix(in srgb, var(--color-primary) 60%, white); --color-primary-dark-5: color-mix(in srgb, var(--color-primary) 50%, white); --color-primary-dark-6: color-mix(in srgb, var(--color-primary) 40%, white); --color-primary-dark-7: color-mix(in srgb, var(--color-primary) 30%, white); --color-primary-light-1: color-mix(in srgb, var(--color-primary) 90%, black); --color-primary-light-2: color-mix(in srgb, var(--color-primary) 80%, black); --color-primary-light-3: color-mix(in srgb, var(--color-primary) 70%, black); --color-primary-light-4: color-mix(in srgb, var(--color-primary) 60%, black); --color-primary-light-5: color-mix(in srgb, var(--color-primary) 50%, black); --color-primary-light-6: color-mix(in srgb, var(--color-primary) 40%, black); --color-primary-light-7: color-mix(in srgb, var(--color-primary) 30%, black); --color-primary-alpha-10: color-mix(in srgb, var(--color-primary) 10%, transparent); --color-primary-alpha-20: color-mix(in srgb, var(--color-primary) 20%, transparent); --color-primary-alpha-30: color-mix(in srgb, var(--color-primary) 30%, transparent); --color-primary-alpha-40: color-mix(in srgb, var(--color-primary) 40%, transparent); --color-primary-alpha-50: color-mix(in srgb, var(--color-primary) 50%, transparent); --color-primary-alpha-60: color-mix(in srgb, var(--color-primary) 60%, transparent); --color-primary-alpha-70: color-mix(in srgb, var(--color-primary) 70%, transparent); --color-primary-alpha-80: color-mix(in srgb, var(--color-primary) 80%, transparent); --color-primary-alpha-90: color-mix(in srgb, var(--color-primary) 90%, transparent); } /* ================================ DARK ================================== */ @media (prefers-color-scheme: dark) { :root { --is-dark-theme: true; /* --- fish palette as raw tokens (dark) --- */ --fish-paper: #1e0a12; --fish-ink: #fbeee9; --fish-muted: #b7998f; --fish-card: #2a1613; --fish-border: #d75023; --fish-accent: #e85a24; --fish-accent-ink: #1e0a12; --fish-error: #ff9aab; --color-body: var(--fish-paper); --color-nav-bg: color-mix(in srgb, var(--fish-card) 88%, black); --color-footer: var(--fish-card); --color-box-body: var(--fish-card); --color-box-body-highlight: color-mix(in srgb, var(--fish-card) 88%, var(--fish-accent)); --color-box-header: color-mix(in srgb, var(--fish-card) 82%, var(--fish-accent)); --color-card: var(--fish-card); --color-menu: var(--fish-card); --color-input-background: color-mix(in srgb, var(--fish-card) 85%, black); --color-input-border: color-mix(in srgb, var(--fish-border) 55%, var(--fish-paper)); --color-input-border-hover: var(--fish-border); --color-light: color-mix(in srgb, var(--fish-accent) 8%, transparent); --color-light-mimic-enabled: var(--color-light); --color-hover: color-mix(in srgb, var(--fish-accent) 12%, transparent); --color-active: color-mix(in srgb, var(--fish-accent) 20%, transparent); --color-focus-border: var(--fish-accent); --color-text: var(--fish-ink); --color-text-dark: color-mix(in srgb, var(--fish-ink) 100%, white 4%); --color-text-light: color-mix(in srgb, var(--fish-ink) 82%, var(--fish-paper)); --color-text-light-1: color-mix(in srgb, var(--fish-ink) 70%, var(--fish-paper)); --color-text-light-2: color-mix(in srgb, var(--fish-ink) 58%, var(--fish-paper)); --color-text-light-3: color-mix(in srgb, var(--fish-ink) 46%, var(--fish-paper)); --color-secondary: color-mix(in srgb, var(--fish-card) 70%, var(--fish-border)); --color-secondary-dark-1: color-mix(in srgb, var(--fish-card) 60%, var(--fish-border)); --color-secondary-dark-2: color-mix(in srgb, var(--fish-card) 50%, var(--fish-border)); --color-error-text: var(--fish-error); --color-error-bg: color-mix(in srgb, var(--fish-error) 18%, var(--fish-paper)); --color-error-border: color-mix(in srgb, var(--fish-error) 50%, var(--fish-paper)); --color-primary: var(--fish-accent); --color-primary-contrast: var(--fish-accent-ink); } } /* Recursive looks best a touch casual + proportional for UI text. */ body { font-variation-settings: "MONO" 0, "CASL" 0.35, "CRSV" 0.5, "wght" 420; } code, pre, tt, .mono, .ui.label.mono { font-variation-settings: "MONO" 1, "CASL" 0, "CRSV" 0, "wght" 450; }