/* ========================================================================== * Forgejo custom theme: "proxyauth" * Matches the color palette of the ProxyAuth landing page * (dark background, lime/chartreuse accent, JetBrains Mono for code). * * HOW IT WORKS * This file imports Forgejo's own built-in "forgejo-dark" stylesheet * straight from your instance, then overrides only the CSS custom * properties (colors + fonts). That way every component (diffs, labels, * markdown, code blocks, etc.) keeps working correctly, whatever your * exact Forgejo version — you don't need to keep this file in sync with * Forgejo's internals. * * ========================================================================== */ @import url("/assets/css/theme-forgejo-dark.css"); :root { color-scheme: dark; /* --------------------------------------------------------------------- * Brand / accent (--accent: #d7ff45) * --------------------------------------------------------------------- */ --color-primary: #d7ff45 !important; --color-primary-dark-1: #c2e83a !important; --color-primary-dark-2: #a9cc2e !important; --color-primary-dark-3: #8fb023 !important; --color-primary-light-1: #234b73 !important; --color-primary-light-2: #2d6099 !important; --color-primary-light-3: #3f7dc0 !important; --color-primary-light-4: #6fa8ff !important; --color-primary-alpha-10: rgba(215, 255, 69, .10) !important; --color-primary-alpha-20: rgba(215, 255, 69, .20) !important; --color-primary-alpha-30: rgba(215, 255, 69, .30) !important; --color-primary-alpha-40: rgba(215, 255, 69, .40) !important; --color-primary-alpha-50: rgba(215, 255, 69, .50) !important; --color-primary-alpha-60: rgba(215, 255, 69, .60) !important; --color-primary-alpha-70: rgba(215, 255, 69, .70) !important; --color-primary-alpha-80: rgba(215, 255, 69, .80) !important; --color-primary-alpha-90: rgba(215, 255, 69, .90) !important; --color-primary-contrast: #12140a !important; --color-primary-hover: #e1ff6c !important; --color-primary-active: #c2e83a !important; --color-accent: var(--color-primary) !important; --color-secondary: #2c3243 !important; --color-secondary-dark-1: #212633 !important; --color-secondary-dark-2: #171b25 !important; --color-secondary-light-1: #3a4256 !important; --color-secondary-light-2: #4a5368 !important; --color-secondary-alpha-10: rgba(255, 255, 255, .02) !important; --color-secondary-alpha-20: rgba(255, 255, 255, .03) !important; --color-secondary-alpha-30: rgba(255, 255, 255, .04) !important; --color-secondary-alpha-40: rgba(255, 255, 255, .05) !important; --color-secondary-alpha-50: rgba(255, 255, 255, .06) !important; --color-secondary-alpha-60: rgba(255, 255, 255, .08) !important; --color-secondary-alpha-70: rgba(255, 255, 255, .10) !important; --color-secondary-alpha-80: rgba(255, 255, 255, .14) !important; --color-secondary-alpha-90: rgba(255, 255, 255, .18) !important; /* Contribution heatmap "no activity" cells specifically — darker so * they sit close to the page background instead of standing out. */ --color-secondary-alpha-6: rgba(255, 255, 255, .02) !important; /* --------------------------------------------------------------------- * Backgrounds * --------------------------------------------------------------------- */ --color-body: #191c25 !important; --color-box-body: #20242f !important; --color-box-header: #282d3b !important; --color-box-footer: #282d3b !important; --color-card: #20242f !important; --color-markup-table-row: #20242f !important; --color-markup-code-block: #20242f !important; --color-code-bg: #20242f !important; --color-console-bg: #191c25 !important; --color-console-fg: #edeff5 !important; --color-console-fg-subtle: #99a0b3 !important; --color-navbar: #20242f !important; --color-menu: #20242f !important; --color-header: #20242f !important; --color-footer: #20242f !important; --color-nav-bg: #20242f !important; --color-nav-hover-bg: #282d3b !important; --color-expand-button: #282d3b !important; --color-overlay-backdrop: rgba(25, 28, 37, .7) !important; /* --------------------------------------------------------------------- * Text * --------------------------------------------------------------------- */ --color-text: #edeff5 !important; --color-text-dark: #ffffff !important; --color-text-light-1: #c8cbd6 !important; --color-text-light-2: #99a0b3 !important; --color-text-light-3: #767d90 !important; --color-text-light-4: #565d70 !important; /* --------------------------------------------------------------------- * Borders / inputs * --------------------------------------------------------------------- */ --color-border: #212633 !important; --color-secondary-bg: #151824 !important; --color-hr: #212633 !important; --color-input-background: #0e1016 !important; --color-input-text: #edeff5 !important; --color-input-border: #2c3243 !important; --color-input-border-hover: #d7ff45 !important; --color-input-toggle-background: #151824 !important; /* --------------------------------------------------------------------- * Links * --------------------------------------------------------------------- */ --color-link: #d7ff45 !important; --color-link-hover: #e1ff6c !important; --color-active-line: rgba(215, 255, 69, .08) !important; /* --------------------------------------------------------------------- * Status colors (matches the ProxyAuth crypto/legend palette) * --------------------------------------------------------------------- */ --color-red: #ff6b6b !important; --color-red-dark-1: #ff4d4d !important; --color-red-dark-2: #e64545 !important; --color-orange: #ffb454 !important; --color-orange-dark-1: #ff9f2e !important; --color-yellow: #ffb454 !important; --color-yellow-dark-1: #e69f3d !important; --color-green: #3ee3a0 !important; --color-green-dark-1: #2ecb8c !important; --color-green-dark-2: #22a973 !important; --color-blue: #6fa8ff !important; --color-blue-dark-1: #4f8eff !important; --color-purple: #9d7bff !important; --color-purple-dark-1: #8560ff !important; /* --------------------------------------------------------------------- * Shadows * --------------------------------------------------------------------- */ --color-shadow: rgba(0, 0, 0, .6) !important; /* --------------------------------------------------------------------- * Fonts (matches the site: DM Sans body, JetBrains Mono code) * Comment these two out if you'd rather keep Forgejo's default fonts. * --------------------------------------------------------------------- */ --fonts: "DM Sans", "Segoe UI", Helvetica, Arial, sans-serif !important; --fonts-monospace: "JetBrains Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace !important; } /* Contribution heatmap: scope --color-primary to blue just for * this widget, so the "most active" cells don't reuse the site's lime * accent (used for buttons/links) but a color that reads clearly on * a dark background instead. */ #activity-chart, .contribution-calendar, .user-heatmap { --color-primary: #6fa8ff !important; } #activity-chart .day[data-level="1"], .contribution-calendar .day[data-level="1"] { background-color: #234b73 !important; fill: #234b73 !important; } #activity-chart .day[data-level="2"], .contribution-calendar .day[data-level="2"] { background-color: #2d6099 !important; fill: #2d6099 !important; } #activity-chart .day[data-level="3"], .contribution-calendar .day[data-level="3"] { background-color: #3f7dc0 !important; fill: #3f7dc0 !important; } #activity-chart .day[data-level="4"], .contribution-calendar .day[data-level="4"] { background-color: #6fa8ff !important; fill: #6fa8ff !important; } /* Fallback for the contribution heatmap "no activity" cells, in case * your Forgejo version doesn't key off --color-secondary-alpha-6. * Targets the calendar/heatmap cells directly and darkens them. */ #activity-chart .day[data-level="0"], .contribution-calendar .day[data-level="0"], .user-heatmap svg rect[fill="var(--color-secondary-alpha-6)"] { background-color: rgba(255, 255, 255, .02) !important; fill: rgba(255, 255, 255, .02) !important; } /* Optional: give the top nav / repo header a touch of the site's radial * glow accent. Safe to delete if you'd rather keep it flat. */ .ui.menu.navbar, .repo-header { background-image: radial-gradient(circle at 100% 0%, rgba(215, 255, 69, .06), transparent 60%) !important; } /* Optional: brand-colored focus ring, matching --accent on the site */ a:focus-visible, button:focus-visible, .ui.button:focus-visible { outline: 2px solid var(--color-primary) !important; outline-offset: 2px; } .markup img, .markup video { max-width: 150%; box-sizing: initial; }