/* =====================================================================
JA Spark — Dark Mode (darkmode.css)
---------------------------------------------------------------------
THE dark-mode stylesheet (vega standard). It lives in its OWN file —
NOT custom.css, which is the site owner's GUI-managed file (T4 reads/
writes css/custom.css from the admin "Edit Custom CSS" box, so dark
rules there get clobbered the moment the owner saves a tweak).
Loaded LAST, after the optimize bundle, via $doc->addCustomTag() in
html/layouts/t4/index.php — so equal-specificity dark rules win the tie
over template.css (registering it as a normal stylesheet risks loading
BEFORE the bundle).
It does NOT touch light mode — every rule is scoped under the standard
`html[data-theme="dark"]` hook (resolved server-side in
html/layouts/t4/index.php, toggled in js/template.js). The companion
`html.t4-dark` class and `data-bs-theme="dark"` are set on alongside.
Foundation: in dark mode also carries data-bs-theme="dark"
(set server-side + on toggle), so Bootstrap's own dark component variants
(alerts, buttons, forms, tables, dropdowns, selects, icons …) apply for
free. This file fixes the TEMPLATE-SPECIFIC gaps that Bootstrap + JA
Spark's shipped dark block (scss/_styles.scss → bundle) don't cover.
Accent is PER-HOME, in `--color-secondary` (lime #b1e346 / amber #fac12f
/ pale-yellow #ffe979), keyed by the theme-* body class — NEVER hard-code
lime; reference the token. `--color-primary` (#18181b) is near-black ink,
not the accent, and is used as a background in places, so it is NOT
flipped globally.
── Self-edit palette ────────────────────────────────────────────────
===================================================================== */
html[data-theme="dark"] {
--dm-bg: #000000; /* page background (matches upstream --body-bg-color) */
--dm-surface: #121212; /* elevated cards/panels */
/* .t4-content (the actual painted page canvas, wrapping header through
footer) reads --body-bg-color directly (`.t4-content{background-color:
var(--body-bg-color)}` in both 13.css/14.css) — that var itself was
never redefined here, so the whole page stayed #fbf9f6 regardless of
theme even though `body` below was fixed. This is the actual fix. */
--body-bg-color: var(--dm-bg);
--dm-surface-2: #0d0d0d; /* very-subtle section lift (mirrors light #F6F8F1) */
--dm-border: rgba(255, 255, 255, 0.12);
--dm-text: rgba(255, 255, 255, 0.80);
--dm-heading: #ffffff;
--dm-muted: rgba(255, 255, 255, 0.55);
/* Content links use the template's own var (per-style root sets it #000 → invisible
on dark). Bootstrap's --t4-link-color doesn't drive these, so flip it here. Hover
stays the per-home accent. */
--body-link-color: var(--dm-text);
--body-link-hover-color: var(--color-secondary);
/* Keep Bootstrap link tokens off their dark-mode blue, on the template ink. */
--t4-link-color: var(--dm-text);
--t4-link-hover-color: var(--color-secondary);
/* Masthead/breadcrumb band uses --tpl-primary-light (#F6F8F1) directly. */
--tpl-primary-light: var(--dm-surface-2);
/* ---- Ported from the compiled bundle's OWN `body.dark-active {...}` block
(scss/_styles.scss → template.css:21096-21140) — a complete, vendor-
authored dark-mode variable set that was never reachable on this site:
the toggle here sets html[data-theme]/.t4-dark (js/template.js), never
body.dark-active, so this whole block has been dead code. Re-scoped to
the hook that's actually live, found 2026-09-25 while chasing the
header/footer/ACM-card gaps below — same values, just reachable now. */
--t4-body-bg-rgb: 0, 0, 0;
--body-text-color: var(--dm-text);
--headings-color: var(--dm-heading);
--masthead-bg-color: rgba(255, 255, 255, 0.075);
--t4-border-color: rgba(255, 255, 255, 0.075);
--t4-white: var(--dm-bg);
--tpl-base-100: var(--t4-gray-900);
--tpl-base-200: var(--t4-gray-700);
--tpl-base-300: var(--t4-gray-500);
--footer-bg-color: var(--dm-bg);
--footer-text-color: var(--dm-text);
--footer-link-color: var(--dm-text);
--footer-link-hover-color: var(--dm-heading);
}
/* ---------------------------------------------------------------------
0b. Selector-based rules from the same dead `body.dark-active` block
(the variables above only cover declaration-based CSS; these need
their own selector, re-scoped the same way).
--------------------------------------------------------------------- */
html[data-theme="dark"] .t4-megamenu {
--mainnav-link-color: var(--dm-heading);
}
html[data-theme="dark"] .bg-white {
background-color: rgba(255, 255, 255, 0.05) !important;
}
html[data-theme="dark"] .bg-light {
background-color: rgba(255, 255, 255, 0.03) !important;
}
html[data-theme="dark"] .bt-dark {
background-color: #15181A !important;
}
/* .d-dark / .d-light — sitewide light/dark content-swap utility (e.g. the
offcanvas logo wrapper uses .d-light). Base rule (body .d-dark{display:
none}) is theme-agnostic and stays as-is; only the dark-mode flip was
unreachable. */
html[data-theme="dark"] .d-dark {
display: inline-block;
}
html[data-theme="dark"] .d-light {
display: none;
}
html[data-theme="dark"] .rating-form .rating-list,
html[data-theme="dark"] .rating-form.action-vote .rating-list a:hover {
background-image: url("../images/rating-stars-light.png");
}
html[data-theme="dark"] .rating-form .rating-list .rating-current {
background: url("../images/rating-stars-light.png") repeat-x 0 center !important;
}
/* ---------------------------------------------------------------------
1. White cards (.bg-white / .bg-light) are darkened by JA Spark's dark
block, but a paired .bg-text-dark keeps text near-black → invisible.
Restore light ink on the darkened surface (e.g. home feature cards).
--------------------------------------------------------------------- */
html[data-theme="dark"] .bg-white.bg-text-dark,
html[data-theme="dark"] .bg-light.bg-text-dark {
--body-text-color: var(--dm-text);
--headings-color: var(--dm-heading);
color: var(--dm-text);
}
/* ---------------------------------------------------------------------
1b. .bg-info neutral card fill (ACM feature cards etc.) — on THIS site
--color-info is pure white (#fff), a neutral card surface, not
Bootstrap's saturated cyan "info" accent the rest of this file
assumes (see rule 2's comment below). Unlike .bg-white/.bg-light,
nothing auto-darkens it in dark mode (T4's own --color-info wins
over any Bootstrap dark-theme flip), so darken the fill itself too,
not just the paired text.
--------------------------------------------------------------------- */
html[data-theme="dark"] .bg-info.bg-text-light,
html[data-theme="dark"] .fd-item-inner.bg-info {
background-color: var(--dm-surface) !important;
--body-text-color: var(--dm-text);
--headings-color: var(--dm-heading);
/* !important: local/css/custom.css has `.badge-info, .bg-info { color:
var(--color-dark) !important; }` (for the badge use case), which also
matches .bg-info here and would otherwise win over this rule despite
loading first, since equal-!important ties go to source order and an
un-!important color here can't outrank an !important one at all. */
color: var(--dm-text) !important;
}
/* ---------------------------------------------------------------------
2. .text-primary utility = near-black ink (--color-primary) → flip to
heading-light on dark (stat numbers, emphasised inline text).
--------------------------------------------------------------------- */
/* SATURATED coloured fills (.bg-info/.bg-warning/.bg-success/.bg-secondary…)
keep their colour in dark, so a paired .text-dark must STAY dark (mirror
light). NEUTRAL fills (.bg-light/.bg-white) darken in dark, so THEIR .text-dark
must flip light — same as standalone page usage. */
html[data-theme="dark"] .text-primary:not([class*="bg-"]),
html[data-theme="dark"] .bg-light.text-primary,
html[data-theme="dark"] .bg-white.text-primary {
color: var(--dm-heading) !important;
}
html[data-theme="dark"] .text-dark:not([class*="bg-"]),
html[data-theme="dark"] .bg-light.text-dark,
html[data-theme="dark"] .bg-white.text-dark {
color: var(--dm-text) !important;
}
/* ---------------------------------------------------------------------
2b. [removed 2026-09-27] This site's .t4-topbar does NOT use the accent
(--color-secondary) as its background — it uses the "Elfri Home Page
Top Bar" T4 palette, compiled to a fixed, literal
`.t4-palette-elfri_home_page_top_bar { background-color: #2b2420;
color: #faf6f0; }` in media/t4/css/13.css/14.css. Those are hardcoded
hex values, not CSS variables, so they already render identically in
both modes with no help needed. The rule that used to live here forced
--color-primary (navy) text onto that already-dark bar regardless of
mode, making it unreadable in dark mode — this was carried over from
a different project's boilerplate (see rule 16 below, which IS a real
case of this pattern on THIS site) and never matched this topbar.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
3. Dropdown caret triangle — hardcoded near-black border-top.
--------------------------------------------------------------------- */
html[data-theme="dark"] .item-caret::before {
border-top-color: currentColor;
}
/* ---------------------------------------------------------------------
4. .section-highlight bands — light #F6F8F1 + light grid PNG overlays.
Mirror light's subtlety: a barely-lifted dark surface, grids hushed.
--------------------------------------------------------------------- */
html[data-theme="dark"] .section-highlight,
html[data-theme="dark"] .section-highlight-2 {
background-color: var(--dm-surface-2);
}
html[data-theme="dark"] .section-highlight::before,
html[data-theme="dark"] .section-highlight::after,
html[data-theme="dark"] .section-highlight-2::before,
html[data-theme="dark"] .section-highlight-2::after {
opacity: 0.04;
}
/* ---------------------------------------------------------------------
5. Always-white palette band -> dark surface.
--------------------------------------------------------------------- */
html[data-theme="dark"] .t4-palette-light {
background-color: var(--dm-surface) !important;
color: var(--dm-text);
}
/* ---------------------------------------------------------------------
6. Megamenu / dropdown frosted-white panel -> dark frosted.
--------------------------------------------------------------------- */
html[data-theme="dark"] .t4-megamenu .dropdown-menu {
/* rgba(18,18,18,...) = --dm-surface (#121212) at 96% opacity, expressed via
color-mix() (same technique already used in rules 15/20d below) so the
panel follows --dm-surface if that token is ever retuned. */
background-color: color-mix(in srgb, var(--dm-surface) 96%, transparent);
/* Close to --dm-border (0.12) but a deliberately softer 0.1 for this
glow-style outline, not the same value -- left as a literal on purpose. */
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
/* ---------------------------------------------------------------------
6b. Back-to-top button — hardcoded white bg; its icon is --headings-color
(white in dark) → white-on-white. Mirror light: dark surface, light icon.
--------------------------------------------------------------------- */
html[data-theme="dark"] #back-to-top {
background-color: var(--dm-surface);
}
html[data-theme="dark"] #back-to-top:hover,
html[data-theme="dark"] #back-to-top:focus,
html[data-theme="dark"] #back-to-top:active {
background-color: #2a2a2a;
color: var(--dm-heading);
}
/* ---------------------------------------------------------------------
7. Logo — the shipped PNG has a near-black "Spark" wordmark that vanishes
on dark. There is deliberately NO image swap here.
`.logo-img` renders whatever the site owner picked in T4 > Site > Logo
(`site_logo`), so a `content: url()` rule replaces THEIR logo with ours.
This rule used to point at `../../../images/joomlart/logo-dark.png` —
i.e. it climbed out of the template into the site root, at a path that
only exists when the JoomlArt sample data is installed. On a site with
its own logo, or a template installed without the quickstart, the file
404s and dark mode renders a broken-image icon instead of the logo. CSS
has no fallback for a missing `content: url()`, so the failure is total.
Same defect measured live on ja_trip 1.2.2 (travelfiji.com.au).
A dark-mode logo is site data, not template data. This template already
carries most of the right mechanism — TPL_T4_SITE_LOGO_DARK strings, an
offcanvas layout that renders `$logo_dark`, and `.d-light`/`.d-dark` CSS
— but the header override is parked as `html/layouts/t4/element/logo_.php`
(trailing underscore = Joomla never loads it) and `site_logo_dark` is not
declared in templateDetails.xml, so the param can never be set. Finishing
that (see ja_titan) is the real fix; it needs an admin round-trip to
verify and is intentionally not done in this change.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
9. Buttons whose fixed palette doesn't adapt to dark.
.btn-outline-dark / -primary carry near-black ink+border -> invisible.
Mirror light (subtle outline) with light ink+border; hover inverts.
--------------------------------------------------------------------- */
html[data-theme="dark"] .btn-outline-dark {
--t4-btn-color: var(--dm-text);
--t4-btn-border-color: var(--dm-border);
--t4-btn-hover-color: var(--dm-bg);
--t4-btn-hover-bg: var(--dm-text);
--t4-btn-hover-border-color: var(--dm-text);
--t4-btn-active-color: var(--dm-bg);
--t4-btn-active-bg: var(--dm-text);
--t4-btn-active-border-color: var(--dm-text);
}
/* The template hardcodes `color:#1E1E1E` at `.t4-wrapper .btn.btn-outline-dark`
(0,3,0) which beats the token. Match+beat it for the rest state. */
html[data-theme="dark"] .btn.btn-outline-dark {
color: var(--dm-text);
border-color: var(--dm-border);
}
html[data-theme="dark"] .btn-outline-primary {
color: var(--dm-text);
border-color: var(--dm-border);
}
html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:focus,
html[data-theme="dark"] .btn-outline-primary:active {
color: var(--dm-bg);
background-color: var(--dm-text);
border-color: var(--dm-text);
}
/* .btn-light is a subtle light button in light mode; mirror its subtlety as a
subtle DARK surface. Its bg is painted by `.btn.btn-light{background-color:var(--color-light)}`
(0,2,0), so match+beat with `html[data-theme="dark"] .btn.btn-light` (0,3,1). */
html[data-theme="dark"] .btn.btn-light {
background-color: var(--dm-surface);
border-color: var(--dm-border);
color: var(--dm-text);
}
html[data-theme="dark"] .btn.btn-light:hover,
html[data-theme="dark"] .btn.btn-light:focus,
html[data-theme="dark"] .btn.btn-light:active {
background-color: #1c1c1c;
border-color: var(--dm-border);
color: var(--dm-heading);
}
/* HikaShop toolbar buttons (cart page: Leeg de winkelwagen / Afrekenen /
Opslaan) are styled like .btn-light in local/css/custom.css (beige
var(--color-light)); mirror the .btn-light dark treatment above so they do
not stay beige in dark mode. Selector (0,3,3) beats the light rule (0,2,2).
The icon inherits the text colour via `span.hk-icon{color:inherit}` there. */
html[data-theme="dark"] div.hika_toolbar a.hikabtn {
background-color: var(--dm-surface);
border-color: var(--dm-border);
color: var(--dm-text);
}
html[data-theme="dark"] div.hika_toolbar a.hikabtn:hover,
html[data-theme="dark"] div.hika_toolbar a.hikabtn:focus,
html[data-theme="dark"] div.hika_toolbar a.hikabtn:active {
background-color: #1c1c1c;
border-color: var(--dm-border);
color: var(--dm-heading);
}
/* ---------------------------------------------------------------------
10. ACM team cards — hardcoded white background.
--------------------------------------------------------------------- */
html[data-theme="dark"] .acm-team.style-1 .item {
background: var(--dm-surface);
}
/* ---------------------------------------------------------------------
12. Off-canvas mobile menu — panel/header/toggle backgrounds are hardcoded
light (#fff / #f8f9fa / #f2f4f6) while the nav links flip to light via
--headings-color → white-on-white. Mirror light: dark panel, light text.
Use ONE uniform surface for the whole drawer (panel = header = drilldown
submenu = back-row) so drilling in doesn't show mismatched dark bands.
--------------------------------------------------------------------- */
html[data-theme="dark"] .t4-offcanvas,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu,
html[data-theme="dark"] .t4-offcanvas .navbar.drilldown-effect .sub-menu-back {
background-color: var(--dm-surface);
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header {
border-color: var(--dm-border);
}
/* drill-in/out (▸/◂) buttons: a hair lighter than the uniform panel so they
still read as tappable controls. */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle {
background-color: rgba(255, 255, 255, 0.06);
color: var(--dm-muted);
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-link,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .separator,
html[data-theme="dark"] .t4-offcanvas .navbar.drilldown-effect .sub-menu-back {
color: var(--dm-text);
}
/* hover/active = accent (mirrors light); the shipped rule's hover colour reads
dark on the now-dark panel. */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-link:hover,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-link:focus,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-link:active,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-item.active > .nav-link {
color: var(--color-secondary);
}
/* ---------------------------------------------------------------------
13. Popular-tags hover — bg var(--t4-gray-200) (#e9ecef) is a fixed light
grey → a light flash on the dark page. Mirror light's subtlety.
--------------------------------------------------------------------- */
html[data-theme="dark"] .tagspopular ul > li:hover,
html[data-theme="dark"] .tagspopular ul > li:focus,
html[data-theme="dark"] .tagspopular ul > li:active {
background: var(--dm-surface);
}
/* ---------------------------------------------------------------------
11. Contact "links" list (website/social) — hardcoded #f8f9fa chips.
Rule `.contact .contact-links ul.nav li a` (0,3,3) — match+beat.
--------------------------------------------------------------------- */
html[data-theme="dark"] .contact .contact-links ul.nav li a {
background-color: var(--dm-surface);
color: var(--dm-text);
}
/* ---------------------------------------------------------------------
14. SVG ICONS — feature-grid icons loaded as ![]()
can't be recoloured via
fill/stroke. Two sets render DARK on the dark cards → invisible:
• `ico-1..17.svg` — monochrome near-black (#18181B)
• `icon-20/21/22` — currentColor (resolves to black inside an ![]()
)
In light they're dark icons on white cards; mirror that → light on dark.
The `icon-2` pattern catches 20/21/22 only — the MULTICOLOUR illustrations
(icon-10/18/19), the blue #4d6bff icons (section-3/4) and the brand logos
are intentionally left untouched (they read fine on dark).
--------------------------------------------------------------------- */
html[data-theme="dark"] img[src*="/section-6/ico-"],
html[data-theme="dark"] img[src*="/section-6/icon-2"] {
filter: invert(1);
}
/* ---------------------------------------------------------------------
16. Accent-filled SECTIONS (.bg-secondary = the per-home accent lime/amber/
yellow) keep their bright fill in dark, so their text
must stay DARK (mirror light). The global flip turns it white → unreadable
on yellow (Product hero "Master Your Home's Smart Devices"). Scoped to
.t4-section so badges/buttons .bg-secondary keep their own white text.
--------------------------------------------------------------------- */
html[data-theme="dark"] .t4-section.bg-secondary {
--headings-color: var(--color-primary);
--body-text-color: var(--color-primary);
color: var(--color-primary);
}
/* ---------------------------------------------------------------------
17. .heading-link hover (article/magazine titles) uses --color-primary
(near-black, unchanged in dark) → dark-on-dark ugly hover. Use the
per-home accent instead — visible, on-brand, matches other link hovers.
--------------------------------------------------------------------- */
html[data-theme="dark"] .heading-link:hover,
html[data-theme="dark"] .heading-link:focus,
html[data-theme="dark"] .heading-link:active {
color: var(--color-secondary);
}
/* ---------------------------------------------------------------------
18. Company-timeline cards — `.timeline-item-info` has a hardcoded white bg
(rule `.timeline-wrap .timeline-item .timeline-item-info`, 0,3,0). On dark
the card stays white while its text flips light → invisible text on a
jarring white block. Mirror light (white card, dark text) → dark card,
light text. Match+beat the source specificity.
--------------------------------------------------------------------- */
html[data-theme="dark"] .timeline-wrap .timeline-item .timeline-item-info {
background: var(--dm-surface);
}
/* ---------------------------------------------------------------------
19. Choices.js dropdown (Time Zone / language selects on edit-profile etc.)
is a JS widget with its own LIGHT styling that data-bs-theme doesn't
reach — the OPEN dropdown panel + search input stay white and the options
are white-text-on-light-grey (invisible). Dark-theme the open widget.
(The closed `.choices__inner` is already dark via Bootstrap.)
--------------------------------------------------------------------- */
/* Choices.js is fully CSS-variable driven — remap its --choices-* tokens (it has
no :root defaults, only inline fallbacks, so our definitions win cleanly). This
covers the dropdown panel, the search input and the disabled/keyline colours in
one place. */
html[data-theme="dark"] .choices,
html[data-theme="dark"] .choices__list--dropdown {
--choices-bg-color: var(--dm-surface);
--choices-bg-color-dropdown: var(--dm-surface);
--choices-bg-color-disabled: #2a2a2a;
--choices-keyline-color: var(--dm-border);
--choices-highlighted-color: rgba(255, 255, 255, 0.08);
--choices-disabled-color: var(--dm-muted);
}
/* dropdown option text + the highlighted (hover/keyboard) row */
html[data-theme="dark"] .choices__list--dropdown .choices__item {
color: var(--dm-text);
}
html[data-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted,
html[data-theme="dark"] .choices__list--dropdown .choices__item.is-highlighted {
background-color: rgba(255, 255, 255, 0.08);
color: var(--dm-heading);
}
/* selected-item remove (×) button uses a black SVG → invert to white on dark */
html[data-theme="dark"] .choices[data-type*="select-one"] .choices__button {
filter: invert(1) grayscale(1);
opacity: 0.6;
}
/* ---------------------------------------------------------------------
15. Decorative bg-shape backgrounds are near-white light-mode glow PNGs
(.bg-shape-3 uses background-size:cover) → on the dark page they become
bright washed-out bands that wreck text contrast (Corporate/Business
feature sections). Replace with a whisper-subtle, per-home-accent-tinted
dark glow: readable text, keeps a tasteful on-brand ambiance.
--------------------------------------------------------------------- */
html[data-theme="dark"] .bg-shape,
html[data-theme="dark"] .bg-shape-2,
html[data-theme="dark"] .bg-shape-3 {
background-image: radial-gradient(80% 60% at 50% 100%,
color-mix(in srgb, var(--color-secondary) 7%, transparent), transparent 70%);
}
/* ---------------------------------------------------------------------
20. Site custom.css gaps (local/css/custom.css) — these rules use
light-mode-only tokens that never get a dark redefinition
(--color-info #fff, --color-light #f2ebe1, --color-primary #06213d
used as text/border) or hardcoded hex, so they stay light-styled
regardless of theme. Added 2026-09-25 after custom.css additions
(sidebar boxes, paid-content notice, CTA links, pricing table)
broke dark mode. Per the rule at the top of this file: fixed HERE,
never in custom.css, which the T4 "Edit Custom CSS" admin screen
overwrites wholesale on every save (plugins/system/t4/admin/src/
Action.php::doSavecss()).
--------------------------------------------------------------------- */
/* 20a. Page background — hardcoded white→cream gradient, mirror in dark. */
html[data-theme="dark"] body {
background: linear-gradient(180deg, var(--dm-bg) 0%, var(--dm-surface) 100%);
}
/* 20b. ".link" CTA text (custom.css) — hardcoded #06213D navy, invisible
on a dark page. */
html[data-theme="dark"] .link {
color: var(--dm-text);
}
/* 20c. Sidebar/section boxes — background-color: var(--color-info), which
is #ffffff and never flips. Same "elevated card" role as --dm-surface
elsewhere in this file. */
html[data-theme="dark"] .sidebar-l,
html[data-theme="dark"] .sidebar-r,
html[data-theme="dark"] .section-3,
html[data-theme="dark"] .section-8 {
background-color: var(--dm-surface);
}
/* 20d. Higher-specificity section-3 variant (landing-page column) and the
paid-content-notice / locked-teaser / desc-article boxes — all hardcode
a near-white gradient or --color-light (#f2ebe1). Mirror light's subtle
corner highlight, on the dark surface instead of white. */
html[data-theme="dark"] .t4-col.section-3.col-sm.col-md-4,
html[data-theme="dark"] .desc-article:has(*) {
background: radial-gradient(circle at 92% 86%, rgba(255, 255, 255, .05) 0 90px, transparent 92px), var(--dm-surface);
}
html[data-theme="dark"] .mod-paidcontentnotice {
background: radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--color-secondary) 10%, transparent), transparent 25%), var(--dm-surface);
}
html[data-theme="dark"] .arc3c_locked_teaser {
background: var(--dm-surface);
}
/* 20e. Subscription pricing table (.tbl-abo-001, OS Membership plans) —
cell borders use var(--color-primary), near-black, invisible on dark. */
html[data-theme="dark"] .tbl-abo-001 td {
border-top-color: var(--dm-border);
border-bottom-color: var(--dm-border);
}
/* 20f. Paid-content-notice field chips — navy text on a near-transparent
navy tint; low contrast once the page itself goes dark. */
html[data-theme="dark"] .mod-paidcontentnotice__fieldlist-item {
color: var(--dm-text);
background: rgba(255, 255, 255, 0.08);
}
/* ---------------------------------------------------------------------
21. OS Membership Pro plan/pricing cards (media/com_osmembership/assets/
css/style.min.css) — third-party bundled CSS, hardcoded hex, no dark-
mode awareness at all. .osm-item-description stayed pure white while
its text already flipped light (inherited from --body-text-color),
so the plan box was blank white-on-white.
--------------------------------------------------------------------- */
html[data-theme="dark"] .osm-item-heading-box {
/* OS Membership's own CSS also paints a light, horizontally-repeating
gradient PNG (media/com_osmembership/assets/images/background.png,
repeat-x along the top edge) on top of the background-color — override
alone left a light strip across the card header. Clear it, and the
light 1px border, too. */
background-color: var(--dm-surface-2);
background-image: none;
border-color: var(--dm-border);
color: var(--dm-text);
}
html[data-theme="dark"] .osm-item-description {
background-color: var(--dm-surface);
/* left/right/bottom border was still the original light rgb(219,222,225)
(only its background got fixed above) — match .osm-item-heading-box's
border so the two don't visibly mismatch. */
border-color: var(--dm-border);
}
/* ---------------------------------------------------------------------
22. Article tag pills (mod_articletags, self-developed module) — same
unflipped var(--color-info) background as the other .btn-info/.bg-
info/.badge-info cases, but here it pairs with var(--headings-color)
for the text (`.tags > li > a { color: var(--headings-color) }` in
template.css), which section 0 above now sets to white globally for
real headings — so the tag text went white-on-white too, not just
the background. Fix both explicitly; !important to beat that rule.
--------------------------------------------------------------------- */
html[data-theme="dark"] .mod-articletags__content .btn-info {
background-color: var(--dm-surface) !important;
border-color: var(--dm-surface) !important;
color: var(--dm-text) !important;
}
/* ---------------------------------------------------------------------
23. Logo — the shipped PNG is a monochrome navy (#06213d, --color-primary)
wordmark on a transparent background, same construction as the
recolourable product icons (see hikashop_migratie/fase0/recolor_icon.py).
On request: recolour it to --color-warning (#e0a458) in dark mode only,
using the same content:url() replacement mechanism already described
(but left undone) in the old rule 7 above -- here it's a straight
recolour of OUR OWN logo file, not a swap to admin-configured data, so
no admin round-trip is needed. Source recoloured once via
recolor_icon.py into local/images/ (survives template updates).
--------------------------------------------------------------------- */
html[data-theme="dark"] .logo-img {
content: url("../local/images/logo-dark-warning.png");
}
/* ---------------------------------------------------------------------
24. Header cart indicator (mod_hikashop_cart, position header-r; see
custom.css "Winkelmandje-indicator in de header"). Two of its rules
there use tokens that are deliberately NOT flipped in dark mode
(--color-primary stays navy, --color-white stays white — see the
file header above), so they need explicit dark counterparts:
- the pill link's navy text on the near-black header was almost
invisible at rest (only :hover, which swaps to --color-white on a
--color-primary fill, was legible);
- the dropdown card stayed a plain white rectangle in an otherwise
all-dark page, and its product-name link (navy) went low-contrast
once that card is made dark here.
th.hikashop_cart_title and the plain td text need no override: they
already resolve via --headings-color/body text color, both of which
section 0 already flips globally. The quantity input is restyled
too, so it doesn't fall back to the browser's native black-on-dark
form-control rendering (color-scheme: dark, template.css:142)
sitting on top of the now-dark card as an ill-fitting block.
--------------------------------------------------------------------- */
html[data-theme="dark"] .hikashop_small_cart_checkout_link {
color: var(--dm-heading);
}
html[data-theme="dark"] .hikashop_cart_dropdown_content {
background-color: var(--dm-surface);
color: var(--dm-text);
}
html[data-theme="dark"] .hikashop_cart_dropdown_content .hikashop_cart_module_product_name_value a {
color: var(--dm-heading);
}
html[data-theme="dark"] .hikashop_cart_dropdown_content .hikashop_cart_proceed_to_checkout {
background-color: var(--color-secondary);
border-color: var(--color-secondary);
color: var(--dm-bg);
}
html[data-theme="dark"] .hikashop_cart_dropdown_content .hikashop_cart_proceed_to_checkout:hover {
background-color: var(--dm-heading);
border-color: var(--dm-heading);
}
html[data-theme="dark"] .hikashop_cart_dropdown_content input.hikashop_product_quantity_field {
background-color: var(--dm-surface-2);
color: var(--dm-text);
border-color: var(--dm-border);
}
/* HikaShop checkout: tabellen en radio/checkbox. Marineblauw (--color-primary) is op donker
onleesbaar, dus gebruiken we het goud van de knoppen als accentkleur. */
html[data-theme="dark"] .hikashop_checkout_page .table {
--t4-table-striped-bg: var(--dm-surface);
--t4-table-hover-bg: #1c1c1c;
}
html[data-theme="dark"] .hikashop_checkout_page input[type="radio"],
html[data-theme="dark"] .hikashop_checkout_page input[type="checkbox"] { accent-color: #bd9162; }
/* HikaShop: totaalrij in de checkout en de kleine btw-vermeldingen bij de prijs (zie custom.css). */
html[data-theme="dark"] .hikashop_cart_total_row .hikashop_cart_total_title,
html[data-theme="dark"] .hikashop_cart_total_row .hikashop_cart_total_value { color: var(--dm-heading); border-top-color: var(--dm-border); }
html[data-theme="dark"] .hikashop_product_price .hk-incl,
html[data-theme="dark"] .hikashop_product_price .hk-excl { color: var(--dm-text); opacity: .75; }
/* HikaShop checkout: kader van het vinkje voor het herroepingsrecht (zie custom.css). */
html[data-theme="dark"] .hikashop_checkout_withdrawal_waiver_line > label.hkcontrol-label { color: var(--dm-heading); }
html[data-theme="dark"] .hikashop_checkout_withdrawal_waiver_line .hkcheckbox label { background-color: var(--dm-surface); color: var(--dm-text); border-left-color: #bd9162; }
/* Note: the standalone documents (error.php / offline.php) load NEITHER the
T4 bundle NOR this darkmode.css. Their dark theme is delivered by a
self-contained inline