/* =========================================================================== Osaka Jade — Vikunja --------------------------------------------------------------------------- Injected by the theme-proxy (see ../nginx/default.conf). Vikunja compiles its frontend into the Go binary, so there is no stylesheet on disk to edit and no custom-CSS setting — injection is the only way in. HOW VIKUNJA'S THEME ACTUALLY WORKS (this is why the file looks like this) Almost nothing in Vikunja names a colour directly. Its whole dark theme is one rule, `.dark { ... }`, that redefines a ten-step grey ramp plus three numbers for the accent. Everything else derives: --site-background: var(--grey-100) --scheme-main: var(--white) -> var(--grey-50) --text: var(--grey-800) --border: var(--grey-200) --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a)) So the correct way to retheme Vikunja is to move the ramp, NOT to chase components with selectors. That is what this file does, and it is why it is almost entirely variables. An earlier version set `--primary: #2dd5b7` directly; that tinted the accent but left --primary-dark, --primary-light and --link-hover on the stock blue, because those are built from --primary-h/s/l and never look at --primary at all. The ramp is deliberately NOT monotonic. Vikunja's dark theme makes cards (grey-50) DARKER than the page (grey-100). Osaka Jade goes the other way — cards lift off the background — so grey-50 is lighter than grey-100 here. `!important` throughout: Vikunja loads its stylesheet from a module script, which lands in after this link, so on document order alone the app's own values would win. FORCING DARK: these are set on :root, not only on .dark, so the jade palette applies whether or not Vikunja's own dark mode is switched on. Nothing has to be remembered in the UI. =========================================================================== */ :root, .dark { /* --- the grey ramp ------------------------------------------------------- 50 is the raised surface (cards), 100 is the page behind them, 200-400 are borders and hover states, 600-900 are text from dim to strongest. */ --grey-50: #16251f !important; /* cards / scheme-main */ --grey-50-hsl: 156, 25%, 11.6% !important; --grey-100: #111c18 !important; /* page background */ --grey-100-hsl: 158, 24%, 8.8% !important; --grey-200: #1e332a !important; /* --border, code/pre background */ --grey-300: #2d4d40 !important; /* stronger borders */ --grey-400: #4a6d5e !important; --grey-500: #7d9b8c !important; /* --text-muted */ --grey-500-hsl: 150, 13%, 55% !important; --grey-600: #a8bdb0 !important; --grey-700: #c1c497 !important; /* dim text, logo */ --grey-800: #f6f5dd !important; /* --text */ --grey-900: #fbfae8 !important; /* --text-strong */ --grey-900-hsl: 57, 70%, 94.7% !important; /* --- what the ramp feeds ------------------------------------------------ Restated explicitly rather than left to Vikunja's own dark rule, because in light mode those mappings do not exist at all — --white would still be white, which would put cream text on a white card. */ --white: var(--grey-50) !important; --black-l: 100% !important; --site-background: var(--grey-100) !important; --background: var(--grey-100) !important; --scheme-main: var(--grey-50) !important; --scheme-main-bis: var(--grey-100) !important; --scheme-main-ter: var(--grey-100) !important; --scheme-invert: var(--grey-900) !important; --scheme-invert-bis: var(--grey-900) !important; --scheme-invert-ter: var(--grey-800) !important; --text: var(--grey-800) !important; --text-invert: #07120f !important; --text-light: var(--grey-600) !important; --text-strong: var(--grey-900) !important; --text-muted: var(--grey-500) !important; --border: var(--grey-300) !important; --border-hover: var(--grey-400) !important; --border-light: var(--grey-200) !important; --border-light-hover: var(--grey-300) !important; --card-border-color: var(--grey-300) !important; --input-placeholder-color: hsla(var(--grey-900-hsl), .45) !important; --table-row-hover-background-color: var(--grey-200) !important; --dropdown-item-hover-background-color: var(--grey-200) !important; --dropdown-item-hover-color: var(--text) !important; --pre-background: var(--grey-200) !important; --code-background: var(--grey-200) !important; --button-text-hover-background-color: var(--grey-200) !important; --button-hover-color: var(--grey-400) !important; --button-active-color: var(--grey-400) !important; --button-focus-color: var(--grey-400) !important; --logo-text-color: var(--grey-700) !important; --tag-color: var(--grey-700) !important; /* --- the jade accent ---------------------------------------------------- #2dd5b7 expressed as HSL parts, because that is the only form Vikunja consumes. --primary-invert is the text drawn ON the accent: jade is a bright mid-tone, so white is unreadable there and it has to go dark. */ --primary-h: 169deg !important; --primary-s: 67% !important; --primary-l: 51% !important; --primary-a: 1 !important; --primary-dark-l: 38% !important; --primary-light-l: 18% !important; /* "light primary" on a dark theme is a dark jade tint, not a pale one */ --primary-invert: #07120f !important; --primary-invert-l: 6% !important; --switch-view-active-background: hsl(169deg, 67%, 40%) !important; /* Links share the accent rather than staying Bulma blue. */ --link-h: 169deg !important; --link-s: 67% !important; --link-l: 51% !important; --link-invert: #07120f !important; --link-visited: #8cd3cb !important; --link-hover-border: var(--grey-400) !important; --link-focus-border: hsl(169deg, 67%, 51%) !important; /* Status colours, matched to the rest of the estate. */ --success-h: 141deg !important; --success-s: 30% !important; --success-l: 54% !important; --danger-h: 3deg !important; --danger-s: 58% !important; --danger-l: 67% !important; --warning-h: 38deg !important; --warning-s: 65% !important; --warning-l: 64% !important; --info-h: 172deg !important; --info-s: 45% !important; --info-l: 69% !important; } /* The llama watermark on the sign-in screen (.no-auth-wrapper) is left alone deliberately — it is Vikunja's own branding, it already reads fine on jade, and it appears on that one page only. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #0b120f; } ::-webkit-scrollbar-thumb { background: #2d4d40; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #2dd5b7; }