Skip to content

Commit ca00dec

Browse files
committed
fix(login-block): keep auth surface light when site is in dark mode
The login block goes near-black in dark mode because the wrapper carries both .jt-login-block and .jt-app, so the .jt-dark .jt-app token override lands on it directly. Customers reading a login form expect a form, not the surrounding feed surface, regardless of theme. Re-declare the relevant light-mode tokens scoped to .jt-login-block inside the dark cascade so the form stays white-on-dark-text even when the rest of the app flips. Mirrors the pattern of the existing dark-mode heading override - contained, single-block re-declaration, no specificity gymnastics. Reproduced in browser (Reign theme, body.jt-dark): block bg was rgb(11,15,26), now rgb(255,255,255); title color #1a1a1a; input bg white. Light mode unchanged. RTL stylesheet kept in sync. Caught by FREE smoke as D.login-dark-leak (regression-trap row in docs/qa/AGENT_SMOKE_RUNBOOK.md).
1 parent a06c1e8 commit ca00dec

2 files changed

Lines changed: 50 additions & 0 deletions

File tree

assets/css/jetonomy-rtl.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,31 @@
175175
color: var(--jt-text);
176176
}
177177

178+
/* Login block stays in light mode even when the rest of the app is dark.
179+
The login block is a focused auth surface (not part of the community
180+
feed) so users expect the form to look like a form regardless of the
181+
surrounding theme. Without this override the .jt-app token redefinitions
182+
above propagate into the block via inheritance and the form goes near-
183+
black on near-black. Re-declaring the relevant tokens here re-establishes
184+
light values inside the block scope only. */
185+
.jt-dark .jt-login-block,
186+
.jt-app.jt-dark .jt-login-block {
187+
--jt-text: #1a1a1a;
188+
--jt-text-secondary: color-mix(in srgb, #1a1a1a 70%, transparent);
189+
--jt-text-tertiary: color-mix(in srgb, #1a1a1a 65%, transparent);
190+
--jt-bg: #ffffff;
191+
--jt-bg-subtle: color-mix(in srgb, #1a1a1a 3%, #ffffff);
192+
--jt-bg-muted: color-mix(in srgb, #1a1a1a 6%, #ffffff);
193+
--jt-bg-hover: color-mix(in srgb, #1a1a1a 4%, #ffffff);
194+
--jt-border: color-mix(in srgb, #1a1a1a 10%, transparent);
195+
--jt-border-strong: color-mix(in srgb, #1a1a1a 18%, transparent);
196+
--jt-success-light: #dcfce7;
197+
--jt-warn-light: #fef9c3;
198+
--jt-danger-light: #fee2e2;
199+
--jt-accent-light: color-mix(in srgb, var(--jt-accent) 10%, white);
200+
--jt-accent-muted: color-mix(in srgb, var(--jt-accent) 15%, white);
201+
}
202+
178203
/* ── Font size scaling (A / A+ / A++) ─────────────────────────────────────
179204
Uses the same data-bn-font-scale attribute and bn_font_scale localStorage
180205
key as BuddyNext so the preference is shared across both plugins.

assets/css/jetonomy.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,31 @@
175175
color: var(--jt-text);
176176
}
177177

178+
/* Login block stays in light mode even when the rest of the app is dark.
179+
The login block is a focused auth surface (not part of the community
180+
feed) so users expect the form to look like a form regardless of the
181+
surrounding theme. Without this override the .jt-app token redefinitions
182+
above propagate into the block via inheritance and the form goes near-
183+
black on near-black. Re-declaring the relevant tokens here re-establishes
184+
light values inside the block scope only. */
185+
.jt-dark .jt-login-block,
186+
.jt-app.jt-dark .jt-login-block {
187+
--jt-text: #1a1a1a;
188+
--jt-text-secondary: color-mix(in srgb, #1a1a1a 70%, transparent);
189+
--jt-text-tertiary: color-mix(in srgb, #1a1a1a 65%, transparent);
190+
--jt-bg: #ffffff;
191+
--jt-bg-subtle: color-mix(in srgb, #1a1a1a 3%, #ffffff);
192+
--jt-bg-muted: color-mix(in srgb, #1a1a1a 6%, #ffffff);
193+
--jt-bg-hover: color-mix(in srgb, #1a1a1a 4%, #ffffff);
194+
--jt-border: color-mix(in srgb, #1a1a1a 10%, transparent);
195+
--jt-border-strong: color-mix(in srgb, #1a1a1a 18%, transparent);
196+
--jt-success-light: #dcfce7;
197+
--jt-warn-light: #fef9c3;
198+
--jt-danger-light: #fee2e2;
199+
--jt-accent-light: color-mix(in srgb, var(--jt-accent) 10%, white);
200+
--jt-accent-muted: color-mix(in srgb, var(--jt-accent) 15%, white);
201+
}
202+
178203
/* ── Font size scaling (A / A+ / A++) ─────────────────────────────────────
179204
Uses the same data-bn-font-scale attribute and bn_font_scale localStorage
180205
key as BuddyNext so the preference is shared across both plugins.

0 commit comments

Comments
 (0)