/*
* Dark mode base layer.
*
* Activated by the `dark` class on , which is set before first paint by
* the inline script in (preference persisted in localStorage
* under "theme") and toggled by the top-nav sun/moon button
* (DarkModeToggleRenderer).
*
* Strategy: the app's views style themselves with light-palette Tailwind
* utilities (bg-white, text-gray-*, border-gray-*), so rather than dark:
* variants in every view, this sheet remaps those utilities — plus the shared
* chrome (nav, sidebar, cards, tables, inputs) — under html.dark. The
* html.dark prefix outranks the single-class utility, so no !important is
* needed except where views set inline styles.
*
* Palette (Tailwind slate-ish):
* page bg #0f172a
* surface #1e293b (cards, nav, tables — was white / gray-50)
* raised #334155 (hovers, wells — was gray-100/200)
* border #334155
* text #e2e8f0 (was gray-700..900)
* muted text #94a3b8 (was gray-400..600)
*/
html.dark {
color-scheme: dark;
/* Brand-derived text colours (defaults in styles.css :root). On dark
surfaces the brand colour is remixed toward white instead of grey so
headings/tabs stay on-brand but readable. html.dark outranks :root,
so these win wherever the vars are consumed. */
--brand-ink: color-mix(in srgb, var(--brand-primary-colour) 45%, #ffffff);
--brand-accent-ink: color-mix(in srgb, var(--brand-primary-colour) 55%, #ffffff);
/* Background IMAGES are dropped in dark mode — a light photo or texture
can't be remapped to a dark one. The colour counterparts are NOT here:
every colour brand setting now carries its own dark value, emitted into
html.dark:root by BrandCssResolver, so the admin can see and change what
dark mode paints instead of it being hard-coded here.
--header-colour, --page-bg-colour, --page-text-colour,
--content-bg-colour, --content-text-colour and --content-border-colour
used to be set here; they moved into the settings' dark defaults with
the same values (bar the header colour, which became a flat ink rather
than a mix of the brand colour). */
--page-bg-image: none;
--content-bg-image: none;
}
/* ---- Page chrome ---- */
html.dark body {
background-color: #0f172a;
background-image: none;
color: #e2e8f0;
}
html.dark .site-nav {
background-color: #1e293b;
border-bottom-color: #334155 !important; /* inline style on the nav */
}
/* Top-navigation layout strip: no rules of its own. The link text follows
--content-text-colour and the hover/selected colour --top-nav-icon-colour,
both of which already carry a dark half; the drop-down panel is bg-white,
remapped below. Only the panel's own text needs lifting. */
html.dark .top-nav-domain__menu .top-nav-domain__item {
color: #e2e8f0;
}
html.dark .top-nav-domain__menu .top-nav-domain__item:hover {
background-color: #334155;
}
html.dark .top-nav-domain__menu .top-nav-domain__group {
color: #94a3b8;
}
/* Top-nav icons have no hover state in either theme (DEV-48): the shared
icon partials carry no hover:bg-gray-100 any more, so there is nothing to
undo here. */
/* ---- Background utilities ---- */
html.dark .bg-white { background-color: #1e293b; }
/* Restricted tab's grey (shared navigation/tab-bar partial, .ui-tab* rules in
styles.css). The inactive and hover greys come from the tab-bar brand
settings, whose defaults carry their own dark halves; this one is a fixed
colour in styles.css, so it still needs lifting here. */
html.dark .ui-tab.is-restricted,
html.dark .ui-tab.is-restricted:hover { color: #64748b; }
html.dark .bg-gray-50 { background-color: #1e293b; }
html.dark .bg-gray-100 { background-color: #283548; }
html.dark .bg-gray-200 { background-color: #334155; }
html.dark .hover\:bg-gray-50:hover { background-color: #283548; }
html.dark .hover\:bg-gray-100:hover { background-color: #334155; }
html.dark .hover\:bg-gray-200:hover { background-color: #3e4c62; }
/* ---- Text utilities ---- */
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700 { color: #e2e8f0; }
html.dark .text-gray-600,
html.dark .text-gray-500 { color: #94a3b8; }
html.dark .text-gray-400 { color: #64748b; }
html.dark .text-black { color: #e2e8f0; }
html.dark .hover\:text-gray-600:hover,
html.dark .hover\:text-gray-700:hover,
html.dark .hover\:text-gray-900:hover { color: #e2e8f0; }
/* ---- Border utilities ---- */
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 { border-color: #334155; }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #334155; }
/* ---- Shared components (styles.css chrome) ---- */
html.dark .page-container,
html.dark .main-panel,
html.dark .page-content {
background-color: transparent;
}
html.dark .card {
background-color: #1e293b;
border-color: #334155;
}
/* The dashboard card. This rule outranks .layout-cell in dashboard.css, so it
has to re-read the widget border colour rather than pin the slate — an admin
who set a dark half would otherwise never see it. */
html.dark .layout-cell {
background-color: #1e293b;
border-color: var(--widget-border-colour, #334155);
}
/* Section cards (sections/base.blade.php) set their background as an INLINE
style from the content-bg-colour brand setting, so this needs !important —
it's the only way a stylesheet can outrank an inline declaration. */
html.dark .section-card {
background-color: #1e293b !important;
border-color: #334155 !important;
}
/* Tables render on a card surface; header band + zebra rows get the
raised tone. */
html.dark table thead th { background-color: #283548; color: #94a3b8; }
html.dark table tbody tr:hover { background-color: var(--table-row-hover-bg, #283548); }
/* Content links — cell cross-references (LinkColumn) and prose .brand-link.
styles.css drives both the ink and the hover colour off brand tokens picked
for a white card — a portal whose primary is near-black (or whose accent
text is) leaves the link unreadable here. Pin both ends to the dark
surface's own scale and keep the underline on currentColor.
The elements.links brand settings still win where an admin has set them:
only blank ones are left unemitted, so these values sit in the var()
fallback slot rather than overriding a deliberate choice. */
html.dark .table-link,
html.dark .brand-link {
color: var(--link-colour, #e2e8f0);
border-bottom-color: var(--link-underline-colour, rgba(226, 232, 240, 0.35));
}
html.dark .table-link:hover,
html.dark .brand-link:hover {
color: var(--link-hover-colour, #ffffff);
border-bottom-color: var(--link-hover-colour, currentColor);
}
/* Table-section toolbar band (search + quick filters): styles.css gives it a
light grey gradient; flatten to the raised surface tone. */
html.dark .table-section .table-search-container,
html.dark .table-section .table-quick-filters {
background: #283548;
border-bottom-color: #334155;
}
/* Search toolbar (widget grids / find pages): advanced form panel is
hardcoded white in styles.css. */
html.dark .widget-search form.advanced {
background-color: #1e293b;
}
/* Quick-filter pill group: styles.css tints the brand colour toward white;
re-tint toward the raised surface instead. */
/* Dark mode resolves the selected-pill pair from the filter-pill-dark-*
settings, so the inline style in the default variant's markup follows the
theme without knowing about it. See the :root block in styles.css. */
html.dark {
--pill-active-bg: var(--filter-pill-dark-active-bg, var(--button-primary-bg));
--pill-active-text: var(--filter-pill-dark-active-text-colour, var(--button-primary-fg, #fff));
}
/* Unselected pills: the fallbacks reproduce what they inherited from the
Tailwind remaps above (transparent on the capsule, .text-gray-600 → #94a3b8)
so an instance with nothing set is unchanged. */
html.dark .quick-filter-pills > a:not([style]) {
background-color: var(--filter-pill-dark-bg, transparent);
border-color: var(--filter-pill-dark-border-colour, transparent);
color: var(--filter-pill-dark-text-colour, #94a3b8);
}
html.dark .quick-filter-pills > a:not([style]):hover {
background-color: color-mix(in srgb, var(--pill-active-bg) 14%, var(--filter-pill-dark-bg, #1e293b));
color: var(--filter-pill-dark-text-colour, #e2e8f0);
}
/* The floating table variant's chips (.floating-chip), which the message
centre reuses class for class. Their dark rules used to live only in the
floating variant's own view, so a reuse elsewhere kept the light white
pill on the dark page (DEV-39). Same settings as the pills above. */
html.dark .floating-chip {
background: var(--filter-pill-dark-bg, #1e293b);
border-color: var(--filter-pill-dark-border-colour, #334155);
color: var(--filter-pill-dark-text-colour, #cbd5e1);
}
html.dark .floating-chip:hover {
background: color-mix(in srgb, var(--filter-pill-dark-active-bg, #f1f5f9) 12%, var(--filter-pill-dark-bg, #1e293b));
color: var(--filter-pill-dark-active-bg, #f1f5f9);
}
html.dark .floating-chip--active,
html.dark .floating-chip--active:hover {
background: var(--filter-pill-dark-active-bg, var(--button-primary-bg, #111827));
color: var(--filter-pill-dark-active-text-colour, var(--button-primary-fg, #ffffff));
}
html.dark .quick-filter-pills {
background-color: var(--brand-primary-soft);
border-color: var(--brand-primary-muted);
}
/* ---- Segmented toggle ---- */
/* The settings themselves are light/dark pairs, so --segmented-toggle-* already
carries the right half here — the served stylesheet redeclares it under
html.dark:root. What this block owns is the FALLBACK chain: the greys an
instance with nothing set lands on, which differ per theme. */
html.dark {
--segmented-selected-bg: var(--segmented-toggle-selected-bg, var(--brand-secondary-colour, #73e7e5));
--segmented-selected-text: var(--segmented-toggle-selected-text-colour, var(--text-secondary-colour, #0f172a));
}
html.dark .segmented-toggle {
background-color: var(--brand-primary-soft);
background-color: var(--segmented-toggle-track-bg, var(--brand-primary-soft));
border-color: var(--brand-primary-muted);
}
html.dark .segmented-toggle__option {
background-color: var(--segmented-toggle-bg, transparent);
border-color: var(--segmented-toggle-border-colour, transparent);
color: var(--segmented-toggle-text-colour, #94a3b8);
}
html.dark .segmented-toggle__option:hover {
background-color: color-mix(in srgb, var(--segmented-selected-bg) 14%, var(--segmented-toggle-bg, #1e293b));
color: var(--segmented-toggle-text-colour, #e2e8f0);
}
/* The selected option. Restated here because the option rule above is
html.dark-prefixed and so outranks styles.css's
`.segmented-toggle__option[aria-checked="true"]` — without this the
selected fill vanished in dark mode on every segmented toggle (DEV-39). */
html.dark .segmented-toggle__option[aria-checked="true"],
html.dark .segmented-toggle__option[aria-checked="true"]:hover {
background-color: var(--segmented-selected-bg);
color: var(--segmented-selected-text);
}
html.dark .segmented-toggle__option:focus-visible {
outline-color: color-mix(in srgb, var(--segmented-selected-bg) 70%, #ffffff);
}
/* ---- Form controls ---- */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="number"],
html.dark input[type="password"],
html.dark input[type="search"],
html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark textarea,
html.dark select {
background-color: #0f172a;
border-color: #334155;
color: #e2e8f0;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
color: #64748b;
}
/* The choices.js select control. styles.css pins white on .choices__inner and
.choices__input, so without these the dark theme showed a white box with a
pale placeholder. Same palette as the native inputs above. */
html.dark .choices__inner,
html.dark .choices__input {
background-color: #0f172a;
border-color: #334155;
color: #e2e8f0;
}
html.dark .choices__list--dropdown,
html.dark .choices__list[aria-expanded] {
background-color: #0f172a;
border-color: #334155;
color: #e2e8f0;
}
html.dark .choices__list--dropdown .choices__item--selectable.is-highlighted,
html.dark .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
background-color: #1e293b;
color: #e2e8f0;
}
html.dark .choices__placeholder,
html.dark .choices__input::placeholder {
color: #64748b;
opacity: 1;
}
html.dark .choices[data-type*="select-one"]::after {
border-color: #94a3b8 transparent transparent;
}
html.dark .choices[data-type*="select-one"].is-open::after {
border-color: transparent transparent #94a3b8;
}
/* ---- Pagination ----
styles.css hardcodes the paginator's light palette (link text #374151,
hover #f9fafb, chevrons #9ca3af) per breakpoint, so the utility remaps
above don't reach it. Mirror its two media queries. */
@media screen and (min-width: 601px) {
html.dark .paginator > nav > a {
border-color: #334155;
color: #e2e8f0;
}
html.dark .paginator > nav > a:hover {
background-color: #283548;
}
html.dark .paginator > nav > a.active-page {
background-color: var(--button-primary-bg);
border-color: var(--button-primary-bg);
color: var(--button-primary-fg, #fff);
}
html.dark .paginator > nav > a:first-child,
html.dark .paginator > nav > a:last-child {
border-color: transparent;
color: #64748b;
}
html.dark .paginator > nav > a:first-child:hover,
html.dark .paginator > nav > a:last-child:hover {
background-color: transparent;
color: #94a3b8;
}
/* Ellipsis glyph between page-number gaps */
html.dark .paginator > nav > svg {
color: #64748b;
}
}
@media screen and (max-width: 600px) {
html.dark .paginator > nav > a,
html.dark .paginator > nav > svg {
color: #e2e8f0;
}
html.dark .paginator > nav > a:hover {
background: #283548;
}
html.dark .paginator > nav > a.active-page {
background: var(--button-primary-bg);
color: var(--button-primary-fg, #fff) !important;
}
html.dark .paginator > nav > svg {
color: #64748b;
}
}
/* ---- Misc ---- */
/* hints (command palette trigger) */
html.dark kbd {
background-color: #0f172a;
border-color: #334155;
color: #94a3b8;
}
/* Dropdown panels (Jetstream x-dropdown renders bg-white via utility, already
remapped above); ring utilities used for their border */
html.dark .ring-black { --tw-ring-color: rgb(51 65 85 / 0.6); }
/* Scrollbars follow the dark scheme via color-scheme above. */
/* ---- Section navigation rail ---- */
/* The rail's own tones (styles.css) are light-mode greys; the card surface
itself is already handled by the .section-card rule above. */
html.dark .section-nav-item {
color: #cbd5e1;
border-left-color: #334155;
}
html.dark .section-nav-item:hover {
background-color: #283548;
color: #f1f5f9;
}
html.dark .section-nav-item.is-active {
background-color: rgba(148, 163, 184, 0.12);
}
html.dark .section-nav-heading { color: #64748b; }
html.dark .section-nav-heading:hover { color: #cbd5e1; }
html.dark .section-nav-count {
background-color: #0f172a;
color: #94a3b8;
}
/* Avatars. Only the neutrals move: the shape and the branded default pair are
the admin's choice and are theme-independent by design (see the
avatar-default-* brand settings, which carry their own light/dark halves). */
html.dark {
--avatar-ring-colour: rgba(255, 255, 255, .16);
/* A logo shown whole sits on black in the dark theme (white in light). */
--avatar-logo-bg-colour: #000000;
--avatar-overflow-bg: #334155;
--avatar-overflow-text: #cbd5e1;
}
html.dark .avatar-stack__empty { color: #64748b; }
/* Activity heat-map: only the empty cell and the labels move; the tinted
steps already mix over --content-bg-colour, which the dark theme sets. */
html.dark .activity-heatmap {
--heatmap-empty: #1f2937;
--heatmap-label: #94a3b8;
}
/* The surface a colour-palette chip's tint is mixed toward on the dark ground.
Same value the brand tints mix against, so a palette chip and a brand chip
sit on the same footing. */
html.dark {
--chip-tint-base: #1e293b;
}
/* A chip painted with a literal colour carries a derived dark half beside it
(ChipColour::style() → DarkVariant): the same hue lifted onto the dark
ground, with the ink that reads on that. Point the fill at it here; a chip
without one (a brand or palette reference, which already switches) keeps
its light declarations through the fallback. */
html.dark .chip-palette,
html.dark .chip-palette-solid {
--chip-fill: var(--chip-colour-dark, var(--chip-colour));
--chip-fill-ink: var(--chip-ink-dark, var(--chip-ink, var(--chip-tint-base)));
}
/* The light-theme logo gives way to the dark one — see .brand-logo--dark in
styles.css for the other half. */
html.dark .brand-logo--light {
display: none;
}