/* * CLADA theme — dark. * * Loaded from index.html after clada-theme.css, and scoped entirely to * `[data-theme="dark"]`, which components/ColorSchemeProvider.tsx puts on * for the signed-in app only. Nothing in this file can reach the light * palette, so the default look is untouched by it. * * ── How it works ───────────────────────────────────────────────────────────── * Two thirds of the app is already painted through the `--clada-*` tokens, so * the first block below — which redefines every one of them — carries most of * the work on its own. What follows it is the remainder: the places NiceAdmin * hardcodes a hex, and the handful of Bootstrap variables whose stock dark * values are a neutral grey that clashes with this navy-tinted one. * * ── Where the colours come from ────────────────────────────────────────────── * The surfaces are the mark's dark blue (#10436c) taken down to near-black and * held at that hue, so the dark app reads as the same product rather than as a * grey one: the page is the deepest, panels sit a step above it, and anything * that floats sits a step above those. * * The accents are the light palette's bases lifted three or four steps up the * same ramps in src/theme.ts — the light values are tuned for 4.5:1 on white * and are far too dark to survive here. Each of these clears 4.5:1 against * `--clada-panel`. * * The Mantine side of this palette is the `dark` ramp in src/theme.ts — keep * the two in sync, as with the light halves. */ [data-theme="dark"] { /* Native widgets: scrollbars, date pickers, form control chrome. */ color-scheme: dark; /* ---------------------------------------------------------------- brand -- */ --clada-primary: #58a6e0; --clada-primary-hover: #7cbbe9; --clada-primary-active: #a5cff1; --clada-primary-wash: #1c3348; --clada-primary-wash-strong: #23405b; --clada-primary-rgb: 88, 166, 224; /* Headings. In dark this token stops being a blue and becomes the brightest ink — a navy heading on a navy panel would be unreadable. */ --clada-navy: #e8eff7; /* ------------------------------------------------------------- accents -- */ --clada-green: #4fc394; --clada-orange: #d99a63; --clada-yellow: #d9b155; --clada-red: #e08c84; --clada-grape: #a894c6; --clada-teal: #5cb4c7; /* Tinted surfaces + their edges. Same idea as in light — a wash of the accent over the page — but built up from black instead of down from white, and kept below the panels so cards still lift off the band. */ --clada-primary-tint: #16283a; --clada-primary-tint-border: #27455f; --clada-green-tint: #132a23; --clada-green-tint-border: #20503d; --clada-orange-tint: #2b2118; --clada-orange-tint-border: #54402c; --clada-yellow-tint: #2a2517; --clada-yellow-tint-border: #514729; --clada-red-tint: #2c1d1c; --clada-red-tint-border: #553a36; --clada-grape-tint: #231f2e; --clada-grape-tint-border: #443b57; --clada-teal-tint: #152a2f; --clada-teal-tint-border: #265059; --clada-navy-tint: #16232f; --clada-navy-tint-border: #2c4459; /* ------------------------------------------------------------ neutrals -- */ --clada-bg: #111a24; --clada-panel: #18232f; --clada-panel-raised: #1f2c3b; /* Lighter than `--clada-surface` here, where in light it is lighter still — the skeleton highlight moves away from the surface either way. */ --clada-shimmer: #2f4055; --clada-ink: #ccd6e2; --clada-muted: #93a3b8; --clada-surface: #22303f; --clada-border: #2c3b4d; --clada-border-strong: #3f5268; } /*-------------------------------------------------------------- # Bootstrap # 5.3's own dark mode rides on [data-bs-theme=dark], which goes # on alongside [data-theme=dark]. That covers the parts # no stylesheet here reaches — close buttons, switches, the # accordion chevron. Its neutrals are a plain grey, though, so # the ones that show are pointed back at the tokens above. --------------------------------------------------------------*/ [data-theme="dark"] { --bs-body-bg: var(--clada-bg); --bs-body-bg-rgb: 17, 26, 36; --bs-body-color: var(--clada-ink); --bs-emphasis-color: var(--clada-navy); --bs-emphasis-color-rgb: 232, 239, 247; --bs-secondary-color: var(--clada-muted); --bs-secondary-bg: var(--clada-surface); --bs-tertiary-bg: var(--clada-surface); } /* Surfaces that must read as raised, not as more page. */ [data-theme="dark"] .card { --bs-card-bg: var(--clada-panel); } [data-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--clada-panel-raised); --bs-dropdown-color: var(--clada-ink); --bs-dropdown-link-color: var(--clada-ink); --bs-dropdown-link-hover-bg: var(--clada-surface); --bs-dropdown-link-hover-color: var(--clada-navy); --bs-dropdown-border-color: var(--clada-border); } [data-theme="dark"] .modal { --bs-modal-bg: var(--clada-panel-raised); --bs-modal-color: var(--clada-ink); --bs-modal-border-color: var(--clada-border); --bs-modal-header-border-color: var(--clada-border); --bs-modal-footer-border-color: var(--clada-border); } [data-theme="dark"] .list-group { --bs-list-group-bg: var(--clada-panel); --bs-list-group-color: var(--clada-ink); --bs-list-group-border-color: var(--clada-border); --bs-list-group-action-hover-bg: var(--clada-surface); --bs-list-group-action-hover-color: var(--clada-navy); } /* Inputs sit on panels, so they take the raised surface rather than the page colour Bootstrap would otherwise give them. */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--clada-panel-raised); color: var(--clada-ink); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--clada-panel-raised); color: var(--clada-ink); } [data-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--clada-ink); --bs-btn-border-color: var(--clada-border-strong); --bs-btn-hover-bg: var(--clada-surface); --bs-btn-hover-border-color: var(--clada-border-strong); --bs-btn-hover-color: var(--clada-navy); } /* The filled accents are light enough here that white-on-accent would fail; these buttons take the dark page colour as their ink instead. */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-danger, [data-theme="dark"] .btn-success { --bs-btn-color: var(--clada-bg); --bs-btn-hover-color: var(--clada-bg); --bs-btn-active-color: var(--clada-bg); --bs-btn-disabled-color: var(--clada-bg); } [data-theme="dark"] .btn-primary { --bs-btn-hover-bg: var(--clada-primary-hover); --bs-btn-hover-border-color: var(--clada-primary-hover); --bs-btn-active-bg: var(--clada-primary-active); --bs-btn-active-border-color: var(--clada-primary-active); } [data-theme="dark"] .btn-danger { --bs-btn-hover-bg: #e9a49d; --bs-btn-hover-border-color: #e9a49d; --bs-btn-active-bg: #f0bab5; --bs-btn-active-border-color: #f0bab5; } [data-theme="dark"] .btn-success { --bs-btn-hover-bg: #6ed0a7; --bs-btn-hover-border-color: #6ed0a7; --bs-btn-active-bg: #8edcbb; --bs-btn-active-border-color: #8edcbb; } /*-------------------------------------------------------------- # NiceAdmin template # Everything below is a place the template writes a literal # colour, which no token could reach. --------------------------------------------------------------*/ [data-theme="dark"] body { background: var(--clada-bg); color: var(--clada-ink); } /* The two panels that frame every page. Their shadows were tuned against a near-white page and are invisible here, so they go darker and heavier. */ [data-theme="dark"] .header { background-color: var(--clada-panel); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.45); } [data-theme="dark"] .sidebar { background-color: var(--clada-panel); box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .sidebar::-webkit-scrollbar { background-color: var(--clada-panel); } /* * A resting sidebar entry is white in the template — the sidebar's own colour, * hardcoded. Transparent rather than `--clada-panel` so the one entry that does * not sit on the panel still works: the head of the expanded Databases block * sits on that block's recessed shading (see components/Sidebar.css), which it * has to let through. */ [data-theme="dark"] .sidebar-nav .nav-link.collapsed { background: transparent; } [data-theme="dark"] .card { box-shadow: 0 0 12px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer { background-color: var(--clada-panel); } [data-theme="dark"] .dropdown-menu .dropdown-footer a { color: var(--clada-ink); } [data-theme="dark"] .dropdown-menu .dropdown-item:hover { background-color: var(--clada-surface); } [data-theme="dark"] .nav-tabs-bordered .nav-link { color: var(--clada-ink); } /* The template lifts the active tab onto white; on a panel the underline is already doing that job. */ [data-theme="dark"] .nav-tabs-bordered .nav-link.active { background-color: transparent; } [data-theme="dark"] .accordion-flush .accordion-body { color: var(--clada-ink); } /* Header search: the overlay it moves into below 1200px, and the field. */ [data-theme="dark"] .header .search-bar { background: var(--clada-panel); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4); } [data-theme="dark"] .header .search-form input { background-color: var(--clada-panel-raised); color: var(--clada-navy); border-color: var(--clada-border-strong); } [data-theme="dark"] .header .search-form input:focus, [data-theme="dark"] .header .search-form input:hover { border-color: var(--clada-primary); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35); } /* Header dropdowns (notifications, messages, profile). */ [data-theme="dark"] .header-nav .notifications .notification-item:hover, [data-theme="dark"] .header-nav .messages .message-item:hover, [data-theme="dark"] .header-nav .profile .dropdown-item:hover { background-color: var(--clada-surface); } [data-theme="dark"] .header-nav .messages .message-item h4, [data-theme="dark"] .header-nav .profile .dropdown-header h6 { color: var(--clada-navy); } [data-theme="dark"] .header-nav .notifications .notification-item p, [data-theme="dark"] .header-nav .messages .message-item p { color: var(--clada-muted); } /* Dashboard: the template's own activity feed and news list. */ [data-theme="dark"] .dashboard .activity .activity-item .activite-label, [data-theme="dark"] .dashboard .news p { color: var(--clada-muted); } [data-theme="dark"] .dashboard .activity .activity-item .activite-label::before { background-color: var(--clada-border); } [data-theme="dark"] .iconslist .icon { background-color: var(--clada-panel); } /* Profile page. The template draws these from rgba(1, 41, 112, …) — the mark's old blue at low alpha, which on a dark panel is all but invisible. */ [data-theme="dark"] .profile .profile-card h2, [data-theme="dark"] .profile .profile-card .social-links a:hover { color: var(--clada-navy); } [data-theme="dark"] .profile .profile-card .social-links a, [data-theme="dark"] .profile .profile-overview .label, [data-theme="dark"] .profile .profile-edit label { color: var(--clada-muted); } [data-theme="dark"] .error-404 .btn { color: var(--clada-bg); } /*-------------------------------------------------------------- # Mantine # The dark ramp lives in src/theme.ts. These are the surfaces # Mantine paints from something other than that ramp. --------------------------------------------------------------*/ [data-theme="dark"] { --mantine-color-anchor: var(--clada-primary); } /*-------------------------------------------------------------- # react-toastify # Toasts render at the document root, outside every panel, and # default to a white card. --------------------------------------------------------------*/ [data-theme="dark"] { --toastify-color-light: var(--clada-panel-raised); --toastify-text-color-light: var(--clada-ink); --toastify-color-progress-light: linear-gradient( to right, var(--clada-primary), var(--clada-teal), var(--clada-green) ); }