/* =============================================================================
JA Essence — DARK MODE
-----------------------------------------------------------------------------
Light mode is the original, approved design and is NOT modified anywhere.
Every rule below is scoped under `html[data-theme="dark"]` (the dark hook). Dark MIRRORS
light — same relationships, never adds contrast light doesn't have.
The ONLY rules that apply in both modes are the theme-switch control styles.
This is the dedicated dark-mode file (NOT custom.css — that's the site owner's
file). It is injected by index.php via addCustomTag('') so it loads LAST
in , AFTER the template.css optimize bundle (equal-specificity ties then
resolve in dark's favour). Edit THIS file only. After editing, clear the cache:
ddev exec 'bash /var/www/html/.darkmode-work/clear-cache.sh'
============================================================================= */
/* ---------------------------------------------------------------------------
1) DARK PALETTE + TOKEN REMAP (one source of truth)
The brand accent --color-primary (#4d6bff) is KEPT. Only a lighter hover/link
shade is defined for dark (light's own hover #1a3eed goes darker → vanishes).
--------------------------------------------------------------------------- */
html[data-theme="dark"] {
/* dark palette */
--dm-bg: #11151f; /* page background */
--dm-band: #161b27; /* subtle band vs page (.bg-light, intros) */
--dm-surface: #1a2130; /* cards / modules / article body */
--dm-surface-2: #222a3b; /* elevated (inputs, hovers, sticky) */
--dm-border: #2b3548; /* one divider token */
--dm-field-border:#3a4459; /* form fields / outline buttons (+1 step) */
--dm-text: #c2c9d6; /* body copy */
--dm-text-muted:#8c97a8; /* meta / secondary */
--dm-heading: #eef1f6; /* headings / strong text */
/* brand accent — KEEP primary, lift hover/link for the dark page */
--dm-accent: #4d6bff;
--dm-accent-hover: #7d93ff;
/* --- remap the template's own color TOKENS (the big lever) --- */
--heading-color: var(--dm-heading);
--body-text-color: var(--dm-text);
--body-bg-color: var(--dm-bg);
--body-link-color: var(--dm-accent);
--body-link-hover-color:var(--dm-accent-hover);
--color-light: var(--dm-band);
--color-secondary: var(--dm-surface);
--mainnav-text-color: var(--dm-text);
--mainnav-link-color: var(--dm-text);
--mainnav-link-hover-color: var(--dm-accent-hover);
--mainnav-link-active-color: var(--dm-accent-hover);
--footer-bg-color: var(--dm-band);
--footer-text-color: var(--dm-text);
--footer-link-color: var(--dm-text);
--footer-link-hover-color: var(--dm-accent-hover);
/* card-surface token (scss/tpl/theme.tpl.scss) */
--bg-content: var(--dm-surface);
/* Bootstrap-as-T4 companions */
--t4-body-bg: var(--dm-bg);
--t4-body-bg-rgb: 17,21,31;
--t4-body-color: var(--dm-text);
--t4-border-color: var(--dm-border);
--bs-body-bg: var(--dm-bg);
--bs-body-color: var(--dm-text);
--bs-border-color: var(--dm-border);
--bs-emphasis-color: var(--dm-heading);
--bs-secondary-bg: var(--dm-surface);
--bs-tertiary-bg: var(--dm-band);
color-scheme: dark;
}
/* ---------------------------------------------------------------------------
2) BASE surfaces
--------------------------------------------------------------------------- */
html[data-theme="dark"] body { background-color: var(--dm-bg); color: var(--dm-text); }
html[data-theme="dark"] .t4-wrapper,
html[data-theme="dark"] #t4-main-body,
html[data-theme="dark"] .t4-section { background-color: transparent; }
html[data-theme="dark"] .body-wrap { background-color: var(--dm-bg); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .h1, html[data-theme="dark"] .h2, html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4, html[data-theme="dark"] .h5, html[data-theme="dark"] .h6 { color: var(--dm-heading); }
/* ---------------------------------------------------------------------------
3) LOGO — quickstart logo is a dark wordmark PNG on transparent.
Recolor to light in dark mode (header + off-canvas + footer share the asset).
--------------------------------------------------------------------------- */
html[data-theme="dark"] .logo-image img,
html[data-theme="dark"] .t4-logo img,
html[data-theme="dark"] .logo img,
html[data-theme="dark"] .t4-off-canvas-header img,
html[data-theme="dark"] .site-logo img,
/* footer logo is the same dark wordmark (item-1.png) in a custom HTML module —
recolor it to light too, like the header. */
html[data-theme="dark"] .t4-footer-info .custom img { filter: brightness(0) invert(1); }
/* Home-4 uses a logo with a baked-in circular PHOTO + dark wordmark (item-2.png).
brightness/invert would flatten the photo to a white blob — instead swap to a
variant that keeps the photo and whitens only the wordmark. Scoped to home-4
(header + its off-canvas) so the flat-wordmark logo on other pages is untouched. */
html[data-theme="dark"] body.layout-home-4 .navbar-brand.logo-image img,
html[data-theme="dark"] body.layout-home-4 .logo-image img,
html[data-theme="dark"] body.layout-home-4 .t4-off-canvas-header img {
filter: none;
content: url("../images/item-2-dark.png");
}
/* =============================================================================
THEME TOGGLE CONTROL (applies in BOTH modes — it is the toggle itself)
A SINGLE round icon button holding both glyphs; only one shows per theme and
they swap on toggle: MOON in light (click → dark), SUN in dark (click → light).
Which icon shows is driven by the html[data-theme] HOOK (pure CSS) so the
correct glyph is painted before darkmode.js runs — no FOUC, no JS swapping.
Transparent button so it sits flush on the header (not a grey chip — §53).
============================================================================= */
.ja-theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
padding: 0; margin: 0;
border: 0; border-radius: 999px;
background: transparent;
color: #212529; /* match the sibling header icons (hamburger/search) in light */
cursor: pointer;
line-height: 0;
vertical-align: middle;
transition: background-color .15s ease, color .15s ease;
}
.ja-theme-toggle:hover { background: rgba(0,0,0,.05); color: #000; }
.ja-theme-toggle svg { display: block; }
/* icon swap via the hook — light shows MOON, dark shows SUN */
.ja-theme-toggle .ja-tt-sun { display: none; }
.ja-theme-toggle .ja-tt-moon { display: block; }
/* dark: match the sibling header icons (hamburger/search = var(--dm-text) #c2c9d6) */
html[data-theme="dark"] .ja-theme-toggle { color: var(--dm-text); }
html[data-theme="dark"] .ja-theme-toggle:hover { background: rgba(255,255,255,.08); color: var(--dm-heading); }
html[data-theme="dark"] .ja-theme-toggle .ja-tt-sun { display: block; }
html[data-theme="dark"] .ja-theme-toggle .ja-tt-moon { display: none; }
/* off-canvas instance is on a dark-ish panel in both modes (the toggle element is
shared, so spacing is keyed off the off-canvas context, not a modifier class) */
.t4-off-canvas-header .ja-theme-toggle { margin-right: .5rem; }
/* spacing inside the header-left (homes 2–5 place it next to the hamburger) */
.t4-header-l .ja-theme-toggle { margin-left: .5rem; }
/* The theme toggle adds a 3rd control to the header-right (toggle + search +
Subscribe). On tight widths (col-xxl-3, or when a page scrollbar narrows the
column) the Subscribe button wrapped to a 2nd row. Keep them on ONE row and
tighten the toggle's gap so all three fit. (Applies in both themes — the toggle
ships in light too.) */
.t4-header-r { flex-wrap: nowrap; }
.t4-header-r > .ja-theme-toggle { margin-left: .25rem; flex: 0 0 auto; }
/* MOBILE: keep the toggle visually grouped with the search + hamburger (it was
sitting too far from them). Tighten the toggle box (its 38px hit-area left a wide
visual gap next to the smaller icons) and the inter-control spacing. */
@media (max-width: 991.98px) {
/* compact, evenly-spaced header controls on mobile (toggle + search + hamburger).
header-1 layout groups them on the right; header-2/3/4 group toggle next to the
hamburger on the left — handle both with tight, balanced gaps. */
.ja-theme-toggle { width: 24px; height: 24px; }
.t4-header-r > * { margin-left: .7rem; }
.t4-header-r .ja-theme-toggle { margin-left: .7rem; }
.t4-header-l > * { margin-right: .5rem; }
.t4-header-l .ja-theme-toggle { margin-left: 0; }
/* the search is a fixed 48px box with the magnifier absolutely pinned to its right,
leaving dead space on its left → a big gap after the toggle. Shrink the reserved
box to the icon so the magnifier sits snug (focus-expand is absolute, unaffected). */
#t4-header .form-search { width: 22px; }
}
/* =============================================================================
PHASE 5 — per-component dark surfaces (all scoped under html[data-theme="dark"])
============================================================================= */
/* --- 4) HEADER bar -----------------------------------------------------------
In LIGHT the at-top header is transparent (.header-block) / #fff (.header-default),
i.e. it reads seamless against the near-white body. Mirror that: keep the at-top
header transparent so the dark body (--dm-bg) shows through with NO seam. The
sticky state below still lifts off the page (mirrors light's #fff + shadow). */
html[data-theme="dark"] .header-block,
html[data-theme="dark"] .header-default,
html[data-theme="dark"] #t4-header { background-color: transparent; }
/* header-4 white pill nav bar */
html[data-theme="dark"] .header-4 .header-bottom { background-color: var(--dm-surface); }
/* sticky header */
html[data-theme="dark"] .not-at-top #t4-header.t4-sticky,
html[data-theme="dark"] #t4-header.t4-sticky {
background-color: var(--dm-band);
box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
/* header-3 thick bottom rule (2px solid $gray-900 in light) */
html[data-theme="dark"] .header-3 .header-bottom { border-bottom-color: var(--dm-border); }
/* collapsed mobile megamenu drops to white in light */
html[data-theme="dark"] #t4-navbar-collapse,
html[data-theme="dark"] .t4-megamenu .navbar-collapse {
background-color: var(--dm-band);
border-color: var(--dm-border);
}
/* --- 5) CONTENT surfaces (white cards → dark surface) ------------------------ */
html[data-theme="dark"] .item-page,
html[data-theme="dark"] .box-inner,
html[data-theme="dark"] .item-content-wrap,
html[data-theme="dark"] .com-content-categories__item .item-inner,
html[data-theme="dark"] .t4-module:not(.no-background) .module-inner {
background-color: var(--dm-surface);
}
/* main-top / main-bottom modules are transparent in light (the template resets
them at div[class*=t4-main-top] .module-inner). The blanket surface rule above
outranks that reset and paints a lighter box behind the home carousels — a
visible seam. Mirror light: keep these positions transparent in dark too. */
html[data-theme="dark"] div[class*=t4-main-top] .t4-module .module-inner,
html[data-theme="dark"] div[class*=t4-main-bottom] .t4-module .module-inner {
background-color: transparent;
}
/* --- 6) OVERLAP cards (image bleeds to edge → opaque surface + square top) ---- */
html[data-theme="dark"] .relateditems.type-1 .item-inner,
html[data-theme="dark"] .author-posts .item,
html[data-theme="dark"] .author-page .author {
background-color: var(--dm-surface);
}
/* IMAGE-container figures (the photo fills them) are TRANSPARENT in light — the card
colour lives on the parent (.item / .item-inner / .author-block). Keep them
transparent in dark too, else a lighter frame peeks around the image. */
html[data-theme="dark"] .relateditems.type-1 .item-inner .thumbnail-article,
html[data-theme="dark"] .author-posts .item .item-image,
html[data-theme="dark"] .author-page .author .author-avatar {
background-color: transparent;
}
/* --- 7) BANDS / intros (gray-100 in light) ----------------------------------- */
html[data-theme="dark"] .t4-introduction,
html[data-theme="dark"] .t4-banner { background-color: var(--dm-band); }
/* --- 8) FORMS (inputs had dark text on dark field) --------------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"] {
background-color: var(--dm-surface-2);
color: var(--dm-text);
border-color: var(--dm-field-border);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] textarea:focus {
background-color: var(--dm-surface-2);
color: var(--dm-heading);
border-color: var(--dm-accent);
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--dm-text-muted); opacity: 1; }
html[data-theme="dark"] .form-label,
html[data-theme="dark"] label { color: var(--dm-text); }
/* native select caret (dark stroke → light) */
html[data-theme="dark"] .form-select {
--t4-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
/* header search field + its magnifier icon */
/* width/height on the SVG give it an intrinsic 20px size so background-size:auto
matches light's 20px base64 icon — without them the viewBox-only SVG scales up
to fill the 48px field (huge magnifier, gotcha: SVG bg with no intrinsic size). */
/* Mirror light EXACTLY:
- REST: light = transparent bg + transparent border (icon only, no box) → same here.
- icon = 20px (width/height + background-size so the viewBox SVG doesn't balloon),
recolored to a light stroke for dark contrast (light uses a dark #212529 icon).
- FOCUS: light = solid pill (#fff) + faint border + readable placeholder → mirror with
a dark surface pill + faint LIGHT border + a LIGHT translucent placeholder. */
html[data-theme="dark"] #t4-header .form-search .search-query,
html[data-theme="dark"] #t4-header .form-search .js-finder-search-query {
background-color: transparent;
border-color: transparent;
color: var(--dm-text);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M8.875 16.75C13.2242 16.75 16.75 13.2242 16.75 8.87495C16.75 4.52571 13.2242 0.999954 8.875 0.999954C4.52576 0.999954 1 4.52571 1 8.87495C1 13.2242 4.52576 16.75 8.875 16.75Z' stroke='%23c2c9d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M14.4431 14.4437L18.9994 19' stroke='%23c2c9d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
background-size: 20px 20px;
}
html[data-theme="dark"] #t4-header .form-search .search-query:focus,
html[data-theme="dark"] #t4-header .form-search .js-finder-search-query:focus {
background-color: var(--dm-surface-2);
border-color: rgba(255,255,255,.12);
color: var(--dm-heading);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M8.875 16.75C13.2242 16.75 16.75 13.2242 16.75 8.87495C16.75 4.52571 13.2242 0.999954 8.875 0.999954C4.52576 0.999954 1 4.52571 1 8.87495C1 13.2242 4.52576 16.75 8.875 16.75Z' stroke='%23c2c9d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M14.4431 14.4437L18.9994 19' stroke='%23c2c9d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
background-size: 20px 20px;
}
/* focus placeholder: light uses rgba(0,0,0,.3) on its white pill → mirror with a light
translucent on the dark pill (light's value would be near-invisible here). */
html[data-theme="dark"] #t4-header .form-search .search-query:focus::placeholder,
html[data-theme="dark"] #t4-header .form-search .js-finder-search-query:focus::placeholder {
color: rgba(255,255,255,.45);
}
/* --- 9) TAG pills (light bg + light text = invisible) ------------------------ */
html[data-theme="dark"] ul.tags li a,
html[data-theme="dark"] div.tagspopular li a,
html[data-theme="dark"] .tags li a {
background-color: var(--dm-surface-2);
color: var(--dm-text);
}
html[data-theme="dark"] ul.tags li a:hover,
html[data-theme="dark"] div.tagspopular li a:hover,
html[data-theme="dark"] .tags li a:hover {
background-color: var(--dm-border);
color: var(--dm-heading);
}
/* --- 10) DROPDOWN / megamenu panel (white → surface) ------------------------- */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .t4-megamenu .dropdown-menu,
html[data-theme="dark"] .megamenu > .mega-dropdown-menu {
--t4-dropdown-bg: var(--dm-surface);
--t4-dropdown-color: var(--dm-text);
--t4-dropdown-border-color: var(--dm-border);
--t4-dropdown-link-color: var(--dm-text);
--t4-dropdown-link-hover-color: var(--dm-heading);
--t4-dropdown-link-hover-bg: var(--dm-surface-2);
background-color: var(--dm-surface);
border-color: var(--dm-border);
}
/* MEGAMENU dropdown items: in LIGHT the hover has NO background box
(.t4-megamenu .dropdown-menu a:hover = transparent) — only the text turns accent.
Mirror that: dark must NOT paint a surface box on hover; just the accent text.
(Higher specificity than the plain .dropdown-item rule below, so it wins here.) */
html[data-theme="dark"] .t4-megamenu .dropdown-menu a:hover,
html[data-theme="dark"] .t4-megamenu .dropdown-menu a:focus,
html[data-theme="dark"] .t4-megamenu .dropdown-menu .dropdown-item:hover,
html[data-theme="dark"] .t4-megamenu .dropdown-menu .dropdown-item:focus {
background-color: transparent;
color: var(--mainnav-link-hover-color);
}
/* plain (non-megamenu) dropdowns DO have a subtle gray hover box in light → mirror it. */
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
background-color: var(--dm-surface-2);
color: var(--dm-heading);
}
/* megamenu group headings + caret */
html[data-theme="dark"] .t4-megamenu .mega-group-title { color: var(--dm-heading); }
/* nav dropdown caret: the REST triangle hardcodes `border-top: 4px solid #212529`
on .item-caret::before (template.css), so it stays dark+invisible on the dark bar
(the var-driven hover/show/active ::before rules already recolor those states).
Re-point the rest triangle to the nav-link color (= --dm-text) so it's visible. */
html[data-theme="dark"] .t4-megamenu .dropdown-toggle .item-caret::before {
border-top-color: var(--mainnav-link-color);
}
/* --- 11) OFF-CANVAS panel ----------------------------------------------------- */
html[data-theme="dark"] .t4-offcanvas,
html[data-theme="dark"] #off-canvas-right-push,
html[data-theme="dark"] .t4-off-canvas-body { background-color: var(--dm-bg); }
/* FULL uniform drawer: the off-canvas panel is one flat --dm-bg. Don't band the
header strip or surface-card the menu module — let the panel bg show through so
the whole drawer is a single colour (no 2-3 tone split). */
html[data-theme="dark"] .t4-off-canvas-header { background-color: transparent; }
html[data-theme="dark"] .t4-off-canvas-body .t4-module .module-inner,
html[data-theme="dark"] .t4-off-canvas-body .module-inner { background-color: transparent; }
html[data-theme="dark"] .t4-offcanvas .nav-link,
html[data-theme="dark"] .t4-offcanvas .btn-toggle { color: var(--dm-text); }
/* drill-down arrow buttons — source uses a doubled-class hack
`.navbar.drilldown-effect .btn-toggle.btn-toggle` (0,6,0); match it to win. */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .btn-toggle.btn-toggle,
html[data-theme="dark"] .t4-offcanvas .btn-toggle { background-color: var(--dm-surface-2); color: var(--dm-text); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .btn-toggle.btn-toggle:hover,
html[data-theme="dark"] .t4-offcanvas .btn-toggle:hover { background-color: var(--dm-border); color: var(--dm-heading); }
html[data-theme="dark"] .t4-offcanvas .menu-child,
html[data-theme="dark"] .t4-offcanvas .sub-menu,
html[data-theme="dark"] .t4-offcanvas li { border-color: var(--dm-border); }
/* --- 12) PAGINATION ----------------------------------------------------------- */
html[data-theme="dark"] .pagination {
--t4-pagination-bg: var(--dm-surface);
--t4-pagination-color: var(--dm-text);
--t4-pagination-border-color: var(--dm-border);
--t4-pagination-hover-bg: var(--dm-surface-2);
--t4-pagination-hover-color: var(--dm-heading);
--t4-pagination-hover-border-color: var(--dm-border);
--t4-pagination-disabled-bg: var(--dm-band);
--t4-pagination-disabled-border-color: var(--dm-border);
}
/* --- 13) BORDERS / dividers (rgba(0,0,0,.1) literals → dm-border) ------------- */
html[data-theme="dark"] figure.area-blockquote { border-top-color: var(--dm-border); border-bottom-color: var(--dm-border); }
html[data-theme="dark"] .categories-module > li,
html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] hr,
html[data-theme="dark"] .t4-module .module-title,
html[data-theme="dark"] table,
html[data-theme="dark"] th, html[data-theme="dark"] td { border-color: var(--dm-border); }
html[data-theme="dark"] .theme-home-2 .module-inner { border-color: var(--dm-border); }
/* --- 14) TABLES --------------------------------------------------------------- */
html[data-theme="dark"] .table {
--t4-table-color: var(--dm-text);
--t4-table-bg: transparent;
--t4-table-border-color: var(--dm-border);
--t4-table-striped-color: var(--dm-text);
--t4-table-hover-color: var(--dm-heading);
color: var(--dm-text);
}
/* --- 15) PSEUDO dividers (gray-400 bars) -------------------------------------- */
html[data-theme="dark"] .magz-layout .item-meta span::after,
html[data-theme="dark"] .blog-list .item-meta span::after,
html[data-theme="dark"] .testimonial-block::after { background-color: var(--dm-border); }
/* --- 16) Misc text on surfaces ------------------------------------------------ */
html[data-theme="dark"] .item-meta,
html[data-theme="dark"] .article-info,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .item-date,
html[data-theme="dark"] small { color: var(--dm-text-muted); }
html[data-theme="dark"] .breadcrumb { color: var(--dm-text-muted); }
html[data-theme="dark"] .breadcrumb a { color: var(--dm-text); }
/* WHITE-ON-ACCENT restore: the .mod-primary block keeps the brand blue fill in
BOTH modes (accent preserved), so its content must stay white like light —
the global muted-meta rule above must not leak onto it. */
html[data-theme="dark"] .mod-primary,
html[data-theme="dark"] .mod-primary .item-title,
html[data-theme="dark"] .mod-primary .item-title a,
html[data-theme="dark"] .mod-primary .article-info,
html[data-theme="dark"] .mod-primary a { color: #fff; }
html[data-theme="dark"] .mod-primary .item-date,
html[data-theme="dark"] .mod-primary .item-meta,
html[data-theme="dark"] .mod-primary .item-meta a { color: rgba(255,255,255,.85); }
/* OVER-IMAGE meta restore: the slide hero (.mod-view-article-slide) and the
highlighted featured item (.item-highlight) overlay the article IMAGE and set
white text vars in light (--body-text-color: rgba(255,255,255,.7)). The meta
inherits that white; the global muted-meta rule above wrongly repaints it dark
on those (the "By …" + date go invisible over the photo). Keep them light here
— same as light mode. The author NAME link already stays white in both. */
html[data-theme="dark"] .mod-view-article-slide .item-content .article-info,
html[data-theme="dark"] .mod-view-article-slide .item-content .item-author,
html[data-theme="dark"] .mod-view-article-slide .item-content .item-date,
html[data-theme="dark"] .mod-view-article-slide .item-content .item-meta,
html[data-theme="dark"] .t4-main-body .item-content-wrap.item-highlight .article-info,
html[data-theme="dark"] .t4-main-body .item-content-wrap.item-highlight .item-author,
html[data-theme="dark"] .t4-main-body .item-content-wrap.item-highlight .item-date,
html[data-theme="dark"] .t4-main-body .item-content-wrap.item-highlight .item-meta {
color: rgba(255,255,255,.7);
}
/* =============================================================================
PHASE 5b — surfaces & leaks caught by the white/dark-text scanner
============================================================================= */
/* Contact card (.contact .plain-style .box-inner = 0,3,0 → needs higher spec) */
html[data-theme="dark"] .contact .plain-style .box-inner { background-color: var(--dm-surface); }
/* User pages: login / register / profile white cards */
html[data-theme="dark"] .login-wrap,
html[data-theme="dark"] .registration,
html[data-theme="dark"] .profile,
html[data-theme="dark"] .profile-edit,
html[data-theme="dark"] .reset,
html[data-theme="dark"] .remind { background-color: var(--dm-surface); }
/* Author block card (white in light → dark surface) */
html[data-theme="dark"] .author-block,
html[data-theme="dark"] .author-block-post-detail,
html[data-theme="dark"] .section-author .author-block { background-color: var(--dm-surface); }
/* …BUT the author-LISTING header (.author-block-posts) is transparent in light
(no card) — keep it transparent in dark (later rule, same specificity, wins). */
html[data-theme="dark"] .author-block-posts { background-color: transparent; }
html[data-theme="dark"] .section-author.type-1 .author-block { border-right-color: var(--dm-border); }
/* Article counter / blog counter (black text) */
html[data-theme="dark"] .counter,
html[data-theme="dark"] .com-content-category-blog__counter,
html[data-theme="dark"] .pagination .counter,
html[data-theme="dark"] .pagenav { color: var(--dm-text-muted); }
/* Blockquote footer (dark text) */
html[data-theme="dark"] .blockquote-footer { color: var(--dm-text-muted); }
/* Secondary/pager buttons (light gray bg in light) */
html[data-theme="dark"] .btn-secondary {
--t4-btn-bg: var(--dm-surface-2);
--t4-btn-color: var(--dm-text);
--t4-btn-border-color: var(--dm-field-border);
--t4-btn-hover-bg: var(--dm-border);
--t4-btn-hover-color: var(--dm-heading);
--t4-btn-hover-border-color: var(--dm-field-border);
background-color: var(--dm-surface-2);
color: var(--dm-text);
border-color: var(--dm-field-border);
}
html[data-theme="dark"] .btn-secondary:hover { background-color: var(--dm-border); color: var(--dm-heading); }
/* Popular-tags module pills + remaining tag lists */
html[data-theme="dark"] .tagspopular ul > li {
background-color: var(--dm-surface-2);
color: var(--dm-text);
}
html[data-theme="dark"] .tagspopular ul > li > a { color: var(--dm-text); }
html[data-theme="dark"] .tagspopular ul > li > a:hover { color: var(--dm-accent-hover); }
/* Pagination page links (direct, in case the var path doesn't win) */
html[data-theme="dark"] .pagination .page-link,
html[data-theme="dark"] .page-link {
background-color: var(--dm-surface);
color: var(--dm-text);
border-color: var(--dm-border);
}
html[data-theme="dark"] .pagination .page-link:hover,
html[data-theme="dark"] .page-link:hover {
background-color: var(--dm-surface-2);
color: var(--dm-heading);
}
html[data-theme="dark"] .pagination .active > .page-link,
html[data-theme="dark"] .page-item.active .page-link {
background-color: var(--dm-accent);
border-color: var(--dm-accent);
color: #fff;
}
/* Bootstrap cards (default, non-colored) → surface */
html[data-theme="dark"] .card:not([class*="bg-"]) {
--t4-card-bg: var(--dm-surface);
--t4-card-border-color: var(--dm-border);
background-color: var(--dm-surface);
border-color: var(--dm-border);
color: var(--dm-text);
}
html[data-theme="dark"] .card:not([class*="bg-"]) .card-header,
html[data-theme="dark"] .card:not([class*="bg-"]) .card-footer {
background-color: var(--dm-surface-2);
border-color: var(--dm-border);
color: var(--dm-heading);
}
html[data-theme="dark"] .card:not([class*="bg-"]) .card-title,
html[data-theme="dark"] .card:not([class*="bg-"]) .card-header { color: var(--dm-heading); }
/* .bg-light is only used on the Bootstrap style-guide demo here (a light chip with
.text-dark). Leave it as Bootstrap's light surface so the demo stays readable —
darkening it would put dark text on a dark bg. */
/* category label pills (light pill + dark text in light → dark chip + light text) */
html[data-theme="dark"] .name-category a,
html[data-theme="dark"] .category-name a {
background-color: var(--dm-surface-2);
color: var(--dm-text);
}
html[data-theme="dark"] .name-category a:hover,
html[data-theme="dark"] .category-name a:hover {
background-color: var(--dm-border);
color: var(--dm-heading);
}
/* type-2 article pages use a higher-spec white pill (.item-page.type-2 .name-category a) */
html[data-theme="dark"] .item-page.type-2 .name-category a { background-color: var(--dm-surface-2); color: var(--dm-text); }
/* OVER-IMAGE badges (slide/highlight cards sit on a photo) — keep the LIGHT pill
+ dark text exactly like light; do NOT darken (mirror over imagery). */
html[data-theme="dark"] .mod-view-article-slide .category-name a,
html[data-theme="dark"] .mod-view-article-slide .name-category a,
html[data-theme="dark"] .item-highlight .category-name a,
html[data-theme="dark"] .item-highlight .name-category a,
html[data-theme="dark"] .articlescategories-slide .category-name a {
background-color: #f8f8ff;
color: #212529;
}
/* pager buttons — real source is .pagenavigation .pagination a.btn (0,3,1) */
html[data-theme="dark"] .pagenavigation .pagination a.btn,
html[data-theme="dark"] .pagenavigation .pagination a.btn-secondary {
background-color: var(--dm-surface-2);
color: var(--dm-text);
border-color: var(--dm-field-border);
}
html[data-theme="dark"] .pagenavigation .pagination a.btn:hover {
background-color: var(--dm-border);
color: var(--dm-heading);
}
/* blockquote footer — real source is .item-page figure.area-blockquote .blockquote-footer (0,3,1) */
html[data-theme="dark"] .item-page figure.area-blockquote .blockquote-footer { color: var(--dm-text-muted); }
/* decorative big numbers (mod-articlescategory) — lift darker rotation hues onto dark */
html[data-theme="dark"] .mod-articlescategory li .number { filter: brightness(1.55) saturate(1.1); }
/* =============================================================================
PHASE 5c — remaining surfaces on extra layouts (author section, type-2 lists,
smart-search, list-groups, box-color card pills)
============================================================================= */
/* Author SECTION wrapper — mirror light EXACTLY (verified per type):
• type-default: section is TRANSPARENT in light (only the inner .author-block is the
card) → keep transparent in dark (no band → no double background).
• type-1 / type-2: the SECTION ITSELF is the white card in light → give it the
surface fill (section + inner block read as one card, like light). */
html[data-theme="dark"] .section-author { background-color: transparent; }
html[data-theme="dark"] .section-author.type-1,
html[data-theme="dark"] .section-author.type-2 { background-color: var(--dm-surface); }
/* "Author's latest articles" / related wrapper is TRANSPARENT in light (just a heading
+ cards, no band). Don't paint a big surface band behind it — keep transparent. */
html[data-theme="dark"] .author-related-items,
html[data-theme="dark"] .author-related-items.relateditems.type-1,
html[data-theme="dark"] .author-related-items.relateditems.type-2,
html[data-theme="dark"] .relateditems.type-2 { background-color: transparent; }
/* …EXCEPT on the type-2 article layout, where the related-items live in the right
sidebar as a white CARD in light (.item-page.type-2 .content-right …) → surface. */
html[data-theme="dark"] .item-page.type-2 .content-right .author-related-items {
background-color: var(--dm-surface);
}
/* type-2 article body box-inner (.item-page.type-2 .content-left .box-inner = 0,4,0) */
html[data-theme="dark"] .item-page.type-2 .content-left .box-inner { background-color: var(--dm-surface); }
/* …but the type-2 OUTER .item-page is transparent in light (the card lives on
.box-inner) — the blanket `.item-page → surface` rule wrongly paints it. Mirror light. */
html[data-theme="dark"] .com-content-article.item-page.type-2,
html[data-theme="dark"] .item-page.type-2 { background-color: transparent; }
/* Smart Search (com_finder) container */
html[data-theme="dark"] .com-finder,
html[data-theme="dark"] .finder,
html[data-theme="dark"] .com-finder.finder { background-color: var(--dm-surface); }
/* list-group (tagged items, tag-category lists) */
html[data-theme="dark"] .list-group {
--t4-list-group-bg: var(--dm-surface);
--t4-list-group-color: var(--dm-text);
--t4-list-group-border-color: var(--dm-border);
--t4-list-group-action-hover-bg: var(--dm-surface-2);
}
html[data-theme="dark"] .list-group-item {
background-color: var(--dm-surface);
color: var(--dm-text);
border-color: var(--dm-border);
}
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item a { color: var(--dm-text); }
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item a:hover { color: var(--dm-accent-hover); }
/* box-color card variant pills (white in light, high spec) */
html[data-theme="dark"] .item-content-wrap.box-color .category-name a,
html[data-theme="dark"] .item-content-wrap.box-color ul.tags li,
html[data-theme="dark"] .item-content-wrap.box-color ul.tags li a {
background-color: var(--dm-surface-2);
color: var(--dm-text);
}
/* muted helper text (registration etc.) — boost over .small.text-muted */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small.text-muted,
html[data-theme="dark"] .small.text-muted,
html[data-theme="dark"] .form-text { color: var(--dm-text-muted) !important; }
/* =============================================================================
BOOTSTRAP CONTEXTUAL COMPONENTS (alerts, list-group, table rows, badges,
neutral buttons, progress). These read the Bootstrap "subtle/emphasis" tokens
and DON'T flip with our data-theme hook (the template never sets data-bs-theme,
by design — see index.php). In LIGHT they're pastel-light bg + dark text; on a
dark page that reads as a glaring white/pastel panel. We remap the SAME tokens
Bootstrap's own dark theme uses (template.css [data-bs-theme=dark]) so the
contextual family mirrors light's relationship: subtle tinted bg + readable
text. This also fixes Joomla system messages (save/error alerts) site-wide on
the login / registration / contact forms. We do this via TOKENS only — we do
NOT set data-bs-theme (that would double-activate and fight the tuned look).
============================================================================= */
html[data-theme="dark"] {
--t4-primary-text-emphasis: #6ea8fe;
--t4-secondary-text-emphasis: #a7acb1;
--t4-success-text-emphasis: #75b798;
--t4-info-text-emphasis: #6edff6;
--t4-warning-text-emphasis: #ffda6a;
--t4-danger-text-emphasis: #ea868f;
--t4-light-text-emphasis: #f8f9fa;
--t4-dark-text-emphasis: #dee2e6;
--t4-primary-bg-subtle: #031633;
--t4-secondary-bg-subtle: #1a2130;
--t4-success-bg-subtle: #051b11;
--t4-info-bg-subtle: #032830;
--t4-warning-bg-subtle: #332701;
--t4-danger-bg-subtle: #2c0b0e;
--t4-light-bg-subtle: #222a3b;
--t4-dark-bg-subtle: #1a1d20;
--t4-primary-border-subtle: #084298;
--t4-secondary-border-subtle: #2b3548;
--t4-success-border-subtle: #0f5132;
--t4-info-border-subtle: #087990;
--t4-warning-border-subtle: #997404;
--t4-danger-border-subtle: #842029;
--t4-light-border-subtle: #3a4459;
--t4-dark-border-subtle: #343a40;
}
/* Progress track (light grey #e9ecef in both modes) → surface */
html[data-theme="dark"] .progress,
html[data-theme="dark"] .progress-stacked { background-color: var(--dm-surface-2); }
/* Neutral buttons that went dark-on-dark (colored variants mirror light fine).
Source .btn-* rules use literal colors, not --bs-btn vars, so override directly. */
html[data-theme="dark"] .btn-light {
background-color: var(--dm-surface-2);
border-color: var(--dm-surface-2);
color: var(--dm-heading);
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-light:focus {
background-color: var(--dm-border);
border-color: var(--dm-border);
color: var(--dm-heading);
}
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark {
color: var(--dm-text);
border-color: var(--dm-field-border);
}
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-dark:hover {
color: var(--dm-heading);
background-color: var(--dm-surface-2);
border-color: var(--dm-field-border);
}
html[data-theme="dark"] .btn-outline-light {
color: var(--dm-heading);
border-color: var(--dm-field-border);
}
html[data-theme="dark"] .btn-outline-light:hover {
color: var(--dm-bg);
background-color: var(--dm-heading);
border-color: var(--dm-heading);
}
/* Neutral .bg-light card / badge (utility uses !important → match with !important) */
html[data-theme="dark"] .card.bg-light,
html[data-theme="dark"] .card.text-dark.bg-light { background-color: var(--dm-surface) !important; }
html[data-theme="dark"] .card.bg-light,
html[data-theme="dark"] .card.bg-light.text-dark,
html[data-theme="dark"] .card.text-dark.bg-light { color: var(--dm-text) !important; }
html[data-theme="dark"] .badge.bg-light { background-color: var(--dm-surface-2) !important; color: var(--dm-heading) !important; }
/* =============================================================================
PHASE 6 — multi-page review round (probed light-vs-dark, verified bugs)
============================================================================= */
/* (a) FOOTER bg — the token remap sets --footer-bg-color:--dm-band, but the
base rule `.t4-section{background:transparent}` (0,2,0) defeats
`.t4-footer{background:var(--footer-bg-color)}` (0,1,0), so the footer fell
through to the page bg (no band). Restore the band (mirrors light's distinct
footer panel). */
html[data-theme="dark"] .t4-footer { background-color: var(--dm-band); }
/* Footer "Become a subscriber" CTA is .btn-dark (#212529): a crisp dark button
on white in light, but ~1.2:1 against the dark footer (reads as floating text,
not a button). Make it a visible surface button (mirrors the light CTA). */
html[data-theme="dark"] .t4-footer .btn-dark {
background-color: var(--dm-surface-2);
border-color: var(--dm-field-border);
color: var(--dm-heading);
}
html[data-theme="dark"] .t4-footer .btn-dark:hover,
html[data-theme="dark"] .t4-footer .btn-dark:focus {
background-color: var(--dm-border);
color: var(--dm-heading);
}
/* (b) OFF-CANVAS drill-down "back" pill — source hardcodes bg #F8F8FF (0,4,1);
in dark the text flips to --dm-heading → near-white text on near-white pill
(invisible) + a glaring white chip. Match the doubled-spec source to win. */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back,
html[data-theme="dark"] .sub-menu-back {
background-color: var(--dm-surface-2);
border-color: var(--dm-border);
color: var(--dm-text);
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back:hover,
html[data-theme="dark"] .sub-menu-back:hover,
html[data-theme="dark"] .sub-menu-back:focus,
html[data-theme="dark"] .sub-menu-back:active {
background-color: var(--dm-border);
color: var(--dm-heading);
}
html[data-theme="dark"] .sub-menu-back i { color: var(--dm-text-muted); }
/* (c) MEGAMENU column titles — the inside .mega-col-title re-applies a
hardcoded #212529 (0,3,1) over the heading remap → dark-on-dark; and the
title's bottom rule uses rgba(0,0,0,.1) → invisible on the dark panel. */
html[data-theme="dark"] .t4-megamenu .mega-col-nav .mega-col-title span,
html[data-theme="dark"] .t4-megamenu .mega-col-module .mega-col-title span { color: var(--dm-heading); }
html[data-theme="dark"] .t4-megamenu .mega-col-nav .mega-col-title,
html[data-theme="dark"] .t4-megamenu .mega-col-module .mega-col-title { border-bottom-color: var(--dm-border); }
/* (d) LOGIN page secondary links — template sets .login-wrap .other-links a to a
literal #6c757d (gray-500) → only 3.43:1 on the dark card. Lift to muted. */
html[data-theme="dark"] .login-wrap .other-links a { color: var(--dm-text-muted); }
html[data-theme="dark"] .login-wrap .other-links a:hover { color: var(--dm-accent-hover); }
/* (e) SMART SEARCH empty state — the panel is styled by an ID rule
`#search-result-empty{background:#F8F8FF}` (1,0,0), so the override must carry
the ID too (1,1,1) to win. */
html[data-theme="dark"] #search-result-empty,
html[data-theme="dark"] .com-finder__empty {
background-color: var(--dm-surface-2);
color: var(--dm-text);
}
html[data-theme="dark"] #search-result-empty h2,
html[data-theme="dark"] #search-result-empty p,
html[data-theme="dark"] .com-finder__empty h2,
html[data-theme="dark"] .com-finder__empty p { color: var(--dm-text); }
/* (g) SIDEBAR Tags Cloud — the rest state is themed, but the source hover
`div.tagspopular ul li:hover` keeps a light grey (#e9ecef) flash on dark. */
html[data-theme="dark"] div.tagspopular ul li:hover { background-color: var(--dm-border); }
/* (f) DATE-PICKER calendar popup (registration DOB etc.) — Joomla's calendar is
an unthemed white popup over the dark page. Theme the container, grid + buttons.
The container bg is set inline/by core CSS → use !important to win. */
html[data-theme="dark"] .js-calendar,
html[data-theme="dark"] .calendar-container {
background-color: var(--dm-surface-2) !important;
color: var(--dm-text) !important;
--calendar-week-bg: var(--dm-band); /* week-number column reads this token */
}
html[data-theme="dark"] .js-calendar table,
html[data-theme="dark"] .js-calendar td,
html[data-theme="dark"] .js-calendar th { border-color: var(--dm-border); color: var(--dm-text); }
html[data-theme="dark"] .js-calendar td.wn,
html[data-theme="dark"] .js-calendar .wn { background-color: var(--dm-band); color: var(--dm-text-muted); }
html[data-theme="dark"] .js-calendar .js-btn,
html[data-theme="dark"] .js-calendar a { color: var(--dm-text); }
html[data-theme="dark"] .js-calendar td.today,
html[data-theme="dark"] .js-calendar td:hover { background-color: var(--dm-border); color: var(--dm-heading); }
html[data-theme="dark"] .js-calendar .buttons-wrapper .btn,
html[data-theme="dark"] .js-calendar .btn-group .btn,
html[data-theme="dark"] .js-calendar button {
background-color: var(--dm-border);
color: var(--dm-heading);
border-color: var(--dm-field-border);
}
html[data-theme="dark"] .js-calendar .buttons-wrapper .btn:hover,
html[data-theme="dark"] .js-calendar .btn-group .btn:hover,
html[data-theme="dark"] .js-calendar button:hover { background-color: var(--dm-surface-2); color: var(--dm-heading); }
/* =============================================================================
STANDALONE PAGES — error / offline (jpages.css markup; own pre-paint + link)
============================================================================= */
html[data-theme="dark"] body.error-page,
html[data-theme="dark"] body.offline,
html[data-theme="dark"] body.t4-error-page { background: var(--dm-bg); color: var(--dm-text); }
html[data-theme="dark"] body.error-page .error-page-wrap,
html[data-theme="dark"] .form-wrap { background: var(--dm-surface); }
html[data-theme="dark"] body.error-page .error-info h2,
html[data-theme="dark"] body.error-page .error-code,
html[data-theme="dark"] .t4-error-page h1,
html[data-theme="dark"] .offline-header,
html[data-theme="dark"] .form-wrap h1,
html[data-theme="dark"] .form-wrap label { color: var(--dm-heading); }
html[data-theme="dark"] .page-redirect a,
html[data-theme="dark"] .t4-error-page .cta-wrap a { color: var(--dm-accent); }
html[data-theme="dark"] .page-redirect a:hover,
html[data-theme="dark"] .t4-error-page .cta-wrap a:hover { color: var(--dm-accent-hover); }
/* t4-error-page info-circle icon is a light SVG already — fine on dark */