/* ============================================================= Zynados — Forgejo theme (DARK) ------------------------------------------------------------- Dark-primary, thin-line, violet-accented. Maps Forgejo's --color-* variables onto Zynados design tokens. Brand rule honoured here: violet is an ACCENT (links, focus rings, the primary action), never a large neutral fill. Surfaces use the cool, slightly violet-tinted Zynados ink ramp. Status colours (green / red / amber / blue) are kept so the primary action stays restrained and semantics read correctly. Install: drop in $FORGEJO_CUSTOM/public/assets/css/ and add "zynados-dark" to THEMES in app.ini. See INSTALL.md. ============================================================= */ :root, ::backdrop { --is-dark-theme: true; /* ---------- Brand violet → primary ramp ---------- On a dark surface the legible accent sits at violet-400. dark-N steps descend toward violet-950; light-N ascend toward violet-50, matching Forgejo's primary scale shape. */ --color-primary: #c07eff; /* z-violet-400 */ --color-primary-contrast: #160a22; /* ink for text on a violet fill */ --color-primary-hover: #cf9bff; --color-primary-active: #d2a1ff; /* z-violet-300 */ --color-primary-dark-1: #b06bf5; --color-primary-dark-2: #a544d9; /* z-violet-600 */ --color-primary-dark-3: #9038c9; --color-primary-dark-4: #8731b8; /* z-violet-700 */ --color-primary-dark-5: #6a2594; /* z-violet-800 */ --color-primary-dark-6: #471963; /* z-violet-900 */ --color-primary-dark-7: #2a0e3d; /* z-violet-950 */ --color-primary-light-1: #c88fff; --color-primary-light-2: #d2a1ff; /* z-violet-300 */ --color-primary-light-3: #dbb4ff; --color-primary-light-4: #e3c4ff; /* z-violet-200 */ --color-primary-light-5: #ecd7ff; --color-primary-light-6: #f1e2ff; /* z-violet-100 */ --color-primary-light-7: #faf4ff; /* z-violet-50 */ --color-primary-alpha-20: rgba(192, 126, 255, 0.12); --color-primary-alpha-30: rgba(192, 126, 255, 0.18); --color-primary-alpha-40: rgba(192, 126, 255, 0.24); --color-primary-alpha-50: rgba(192, 126, 255, 0.32); --color-primary-alpha-60: rgba(192, 126, 255, 0.40); --color-primary-alpha-70: rgba(192, 126, 255, 0.50); --color-primary-alpha-80: rgba(192, 126, 255, 0.62); --color-primary-alpha-90: rgba(192, 126, 255, 0.78); /* Newer Forgejo accent hooks */ --color-accent: var(--color-primary); --color-small-accent: var(--color-primary-alpha-30); /* ---------- Secondary (cool violet-tinted neutral) ---------- Used for borders, secondary buttons and subtle chrome. */ --color-secondary: #2a2c3d; /* z-ink-700 */ --color-secondary-dark-1: #34374a; --color-secondary-dark-2: #3f4256; /* z-ink-600 */ --color-secondary-dark-3: #4b4e64; --color-secondary-dark-4: #5d6076; /* z-ink-500 */ --color-secondary-dark-5: #6b6e85; --color-secondary-dark-6: #787b92; --color-secondary-dark-7: #878a9f; /* z-ink-400 */ --color-secondary-dark-8: #989bae; --color-secondary-dark-9: #b5b7c7; /* z-ink-300 */ --color-secondary-dark-10: #c9cbd7; --color-secondary-dark-11: #d9dae4; /* z-ink-200 */ --color-secondary-dark-12: #e6e7ee; --color-secondary-dark-13: #eeeef4; /* z-ink-100 */ --color-secondary-light-1: #232536; --color-secondary-light-2: #1c1e2d; /* z-ink-800 */ --color-secondary-light-3: #181a27; --color-secondary-light-4: #151622; /* z-ink-850 */ --color-secondary-alpha-30: rgba(255, 255, 255, 0.10); --color-secondary-alpha-40: rgba(255, 255, 255, 0.14); --color-secondary-alpha-50: rgba(255, 255, 255, 0.18); --color-secondary-alpha-60: rgba(255, 255, 255, 0.24); --color-secondary-alpha-70: rgba(255, 255, 255, 0.30); --color-secondary-alpha-80: rgba(255, 255, 255, 0.38); --color-secondary-alpha-90: rgba(255, 255, 255, 0.50); --color-secondary-button: var(--color-primary); --color-secondary-hover: #34374a; /* ---------- Named palette (Zynados semantics) ---------- */ --color-red: #ff5d6c; /* danger */ --color-orange: #f2934a; --color-yellow: #f2b544; /* warning */ --color-olive: #b6c44a; --color-green: #3dd68c; /* success */ --color-teal: #3ec9c0; --color-blue: #61a6ff; /* info */ --color-violet: #c07eff; --color-purple: #a544d9; --color-pink: #ff7ab8; --color-brown: #b08157; --color-black: #08080f; --color-grey: #5d6076; --color-grey-light: #878a9f; --color-gold: #f2b544; /* ---------- Semantic (text / surfaces) ---------- */ --color-error-text: #ff8a95; --color-error-bg: #2a1116; --color-error-border: #5a232c; --color-success-text: #6fe3b0; --color-success-bg: #0d2620; --color-success-border:#1d4d3c; --color-warning-text: #f5c977; --color-warning-bg: #2a2110; --color-warning-border:#564321; --color-info-text: #93c2ff; --color-info-bg: #101d2e; --color-info-border: #234057; /* ---------- Surfaces / backgrounds ---------- */ --color-body: #08080f; /* z-bg (page) */ --color-box-header: #151622; /* z-surface (box top bars) */ --color-box-body: #0f1019; /* z-bg-raised (box content) */ --color-box-body-highlight: #1c1e2d; --color-box-body-shadow: rgba(0, 0, 0, 0.4); --color-text: #f8f8fb; /* z-text */ --color-text-light: #d9dae4; --color-text-light-1: #b5b7c7; /* z-text-muted */ --color-text-light-2: #878a9f; /* z-text-dim */ --color-text-light-3: #5d6076; --color-text-dark: #ffffff; --color-footer-bg: #0b0b14; --color-footer: #0b0b14; /* Top navigation bar (Forgejo) */ --color-nav-bg: #0f1019; --color-nav-hover-bg: #1c1e2d; --color-nav-text: #f8f8fb; /* Generic chrome surfaces */ --color-light: rgba(255, 255, 255, 0.02); --color-light-mimic-enabled: rgba(255, 255, 255, 0.02); --color-light-border: rgba(255, 255, 255, 0.08); --color-hover: rgba(255, 255, 255, 0.04); --color-active: rgba(255, 255, 255, 0.08); --color-menu: #151622; --color-card: #151622; --color-card-shadow: rgba(0, 0, 0, 0.5); --color-shadow: rgba(0, 0, 0, 0.6); /* Borders (hairline, violet-quiet) */ --color-border: rgba(255, 255, 255, 0.08); --color-secondary-bg: #151622; /* Inputs */ --color-input-text: #f8f8fb; --color-input-background: #0f1019; --color-input-border: rgba(255, 255, 255, 0.14); --color-input-border-hover: var(--color-primary); /* Buttons (neutral base) */ --color-button: #151622; --color-light-gray: #1c1e2d; /* Code / markup */ --color-markup-table-row: rgba(255, 255, 255, 0.02); --color-markup-code-block: #1c1e2d; --color-markup-code-inline:#232536; --color-code-bg: #0f1019; --color-code-sidebar-bg: #151622; --color-highlight-bg: rgba(192, 126, 255, 0.10); --color-highlight-hover-bg:rgba(192, 126, 255, 0.16); /* Links */ --color-link: #c88fff; --color-link-hover: #d2a1ff; /* Misc surfaces Forgejo references */ --color-header-wrapper: #0f1019; --color-label-text: #f8f8fb; --color-expand-button: #1c1e2d; --color-placeholder-text:#5d6076; --color-editor-line-highlight: rgba(192, 126, 255, 0.06); --color-project-board-bg: #0f1019; --color-caret: #c07eff; /* Reaction / timeline */ --color-reaction-bg: rgba(255, 255, 255, 0.04); --color-reaction-active-bg: var(--color-primary-alpha-30); --color-timeline: #2a2c3d; /* Focus ring — the brand's signature touch */ --color-focus-border: var(--color-primary); }