Theme Toggle Pill Banner Block for React

pick is where a choice lands: it stores the theme and speaks the result. Add your provider's call there (setTheme(next) in next-themes, for example) and read the starting value from the provider instead of the dark class. System means "follow the device": your provider resolves it with the prefers-color-scheme media query.

The server doesn't know the visitor's theme, so the first render assumes light and an effect corrects it right after hydration. Reading the dark class during render would make the server and the browser disagree. If your provider can tell the server the theme (a cookie), pass it in as the initial state and drop the effect.

The group is named "Theme" and its three items "Light", "System" and "Dark", each with its pressed state; the visible label beside them is decoration, so it isn't read a second time. A polite status line, empty when the page loads, speaks the choice ("Dark mode on.") when it changes.

Tab enters the group and the arrow keys move between the three items; Enter or Space picks the focused one. Picking the item that is already on does nothing, so the group never ends up with no choice.

The pill renders in flow so the preview and a stack of blocks can see it. To float it, add fixed inset-x-4 bottom-4 z-50 mx-auto to the pill (the section named "Theme") and remove the block's wrapper padding if the pill lives on its own. Keep room for the home indicator with bottom-[max(1rem,env(safe-area-inset-bottom))].

The label sits beside the toggle group while there's room and wraps under it on the narrowest screens, and the pill becomes a rounded card when it does. The three wordings share one grid cell, so the pill never changes width when the choice changes. In a right-to-left layout it mirrors.