Appearance Command Menu Block for React

So you can see it without a click. On load the menu is the Command and its preview drawn inline under a picture of the dashboard, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the choices you made in the copy are the ones the dialog opens with. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

No. The preview is a drawing with its own wrapper, and a choice only sets four custom properties on that wrapper: the two base colours, the corner radius, the spacing and the text size. Dark swaps the theme's background and text colour for each other (and swaps them again when the page itself is dark, so Light stays light), there is no dark class and no change to the page's theme, and a mix of the two colours makes every line and tint, so the preview follows any preset. In your app the same four choices would write to your theme provider.

It asks the browser for the device's colour scheme (prefers-color-scheme) once, after the page has loaded, and the preview wears that mode; the readout says which, "System, dark on this device". The server never knows it, so the block renders light first and corrects itself after mount. It does not follow a change made while the page is open; in your app subscribe to the media query's change event.

A tick and the words ", current" mark the one choice in each group that the preview wears, and choosing the current one only says so on the status line. The readout under the preview lists the four choices, and on a phone, where the preview sits above the list, it is read out but not drawn.

All of it. The four choices are typed state in the block; nothing is saved and nothing leaves the page. In your app keep CHOICES as the menu's rows, make pick call your theme provider and persist the result with the user's other settings, and keep the preview as the way to see a change before it applies.

Yes. Type to search by name, hint or group ("dark", "round", "compact", "large"), the arrow keys move through the choices, Enter applies the highlighted one and keeps focus in the input, and Escape closes the menu and puts focus on the field. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. The preview is a picture and is hidden from assistive technology; the readout and the status line carry what it shows.

The dashboard goes and the preview moves above the list, about 200 pixels tall. The copy shown on load docks to the top of the page at full width, so the keyboard does not cover the foot; the hints in the rows and the key hints go, and the count stays. The real dialog keeps the Command dialog's own phone layout.