lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

light mode: scope the fix to .t_dark — a nested span was re-setting it

Browse Source 
v1.1.20 set --color on <body> and that part worked (verified #000000 on
body, html.light present, media query matching). The headings stayed
white because the provider mounts a SECOND `<span class="t_dark">`
INSIDE <body>: `:root .t_dark` matches body AND that span, so the span
re-set --color to #ffffff and every heading inherited from there. The
inheritance chain measured html -> body(#000000) -> div -> span.t_dark
(#ffffff) -> ... -> h1.

Dropping `body` from the selector reaches every Theme wrapper; (0,2,1)
still beats `:root .t_dark` (0,2,0).

Co-Authored-By: Hanzo Dev <[email protected]>
This commit is contained in:
zeekay
2026-08-06 17:33:46 -07:00
co-authored by Hanzo Dev
parent 827ae46c8a
commit 386261512d
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs/global.css
+8 -2
View File
@@ -302,7 +302,13 @@ html, body {
media query catches the pre-hydration frame.
Remove this the day the provider stops hard-pinning t_dark. */
html.light body.t_dark { --color: var(--c-color-text); }
/* NOT `body.t_dark` — measured 2026-08-06: the provider mounts a SECOND
`<span class="t_dark">` INSIDE <body>, and `:root .t_dark` matches both. A
body-scoped rule sets --color on body correctly (verified #000000 there) and
the nested span immediately re-sets it to #ffffff, which every heading then
inherits. Scoping to `.t_dark` reaches every Theme wrapper; (0,2,1) still
beats `:root .t_dark` (0,2,0). */
html.light .t_dark { --color: var(--c-color-text); }
@media (prefers-color-scheme: light) {
html:not(.dark) body.t_dark { --color: var(--c-color-text); }
html:not(.dark) .t_dark { --color: var(--c-color-text); }
}