Theme Picker Onboarding Block for Radix UI

The window carries its own set of greyscale token values for each scheme (--background, --foreground, --card, --muted, --muted-foreground, --border), set as arbitrary properties on that one box. Everything inside is drawn with the usual token classes, so it reads those values and nothing else on the page changes. It does not use a dark class, so it cannot leak into the rest of the page. Showing a scheme is the feature, which is why it does not follow the site's theme.

It compares the preview hour with the two thumbs: the window is light from the first thumb's hour up to (not including) the second's, and dark otherwise. The thumbs stay at least an hour apart. The 24-hour bar is always laid out left to right, even on a right-to-left page, because it is a clock, not a sentence.

They are in the layout either way, in the same cell as a one-line hint, with the unused layer invisible and inert. That way picking Auto never moves the window or the button. The hint says Auto follows the clock and tells you to pick it to set the hours.

Both are ordinary sliders: Tab to a thumb and use the arrow keys, Home and End. The thumbs read in words (“Light starts at 07:00”, “Dark starts at 19:00”, “Preview at 21:00”) rather than a bare number, and the caption under the window repeats the result.

Use Auto only says the scheme was saved in this demo. In your app save the mode and the two hours to the account where apply says so, and apply the scheme with your theme provider. The window here is a picture and never changes the real theme.

The window keeps a fixed height; the preview shortens and the sliders take the full width. If the content is taller than the window, the middle region scrolls and takes keyboard focus, while the top bar and the status line stay in place.