Appearance Settings Block for React

No. Only the drawn window and the thumbnails change, and nothing writes a dark class anywhere. The dark look is drawn with the page's own colours traded: the background and foreground swap places for the Dark window, and a dark page swaps them back, so the Light and Dark cards read as light and dark in either theme. To make it real, apply the choice with your theme provider (the class on the root element), save it per person, and read it again before the first paint.

Only how the drawing is mixed from the two page colours: Standard draws lines and quiet fills lightly and text at about four fifths of full strength, More draws lines at about three fifths, fills heavier and text at full strength. Both thumbnails show it on the theme you have chosen. In your product, More would map to a stronger set of tokens, or to the prefers-contrast media query.

The slider moves one pixel at a time between 12 and 20, the readout beside it says the size (and "(default)" at 14), and both the sample sentence under the slider and the paragraph in the preview are set at that size through a CSS custom property. Its value is read out as "16 pixels". In your product, apply it as the root font size, or scale only your reading text.

It switches off the transition on the small sample in the preview: with it off, the sample slides in from the end when you press Replay the sample, and with it on it appears at once. The sentence beside the switch says which. In your product, start from the system's reduced-motion preference and let this switch override it, and keep every animation behind it.

It puts the theme back to System, the contrast to Standard, the text size to 14 pixels and motion on, and says so in the status line. While everything is already at its default the button is marked aria-disabled rather than disabled, so it keeps its place and focus, and pressing it says "Already at the defaults." Nothing is stored: a reload starts from the defaults again.

The cards are native radios in two named radio groups, so the arrow keys move between them and the focused card gets a ring. The slider has a label and a value in words, the switch is named, and the status line is a polite live region that is present from the start. The drawn window is decorative; its caption carries the same information as text. On a phone the cards keep their row, a little smaller, and the reset button stays pinned to the bottom of the screen.