Adaptive dark mode: companion palette from live light tokens #11559
KOUSTAV2409
started this conversation in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Problem
shadcn dark mode is two static sheets plus a class on
<html>::rootfor light,.darkfor night,next-themesto flip. That is the right model when you designed both sheets.It fails when someone ships a custom light palette — warm paper, quiet captions, a brand mixed for daylight — and then flips to
.dark. The canvas goes near-black.--muted-foregroundthat passed WCAG on cream fails on charcoal. Body ink often survives. Captions, helper text, empty states do not. The chrome looks themed. The corners do not work.Theme builders in this ecosystem still emit more static CSS. They do not sample the light tokens you already shipped and raise muted type to AA at runtime.
What we shipped
A registry item that:
:rootthrough the CSSOM even if.darkis already on.<html>. DAY clears them.It is not a full theme engine. It does not generate
--primary-foreground, sidebar tokens, or image retints. Hardcoded colors stay hardcoded. The job is: companion night from light tokens.Reference implementation
Live in the
@atrouidirectory registry (already listed):Happy to port a version onto shadcn’s token names if this belongs in the first-party registry. Per contributing guide, opening a discussion first.
Proposed surface (if first-party)
Two files, same split we used:
lib/adaptive-theme.ts— sample, OKLCH companion, apply/clearui/theme-adapt.tsx— DAY / NIGHT radios on top of existingnext-themesThemeProviderKeep the current mode-toggle for hosts who authored both sheets. Reach for this when a naive invert would hide copy.
All reactions