Dark Mode Navbar Block for React

It is a picture of dark, not part of the navbar: the bar itself follows the theme and paints nothing dark. The picture's wrapper takes the dark class, so inside it every token resolves to its dark value in your preset; the Light picture needs no scope in a light page, and in a dark page it swaps --background and --foreground for the card's --sample-* copies of the page's own pair. Match system is the Dark picture with the Light one cut across it by a diagonal.

The block keeps the theme in state and applies it in one function, apply, which toggles the dark class on <html>. Replace that function with your library's setTheme(theme) and read your library's theme for the cards; the theme the page starts with is read once on mount. While Match system is chosen the block listens to the device's prefers-color-scheme and re-applies it when it changes.

The Appearance button says whether its popover is open. The three cards are native radios in one fieldset named Appearance: one tab stop, the arrow keys move the choice (and, as the choice is the setting, the page changes with it), the pictures are hidden from assistive technology and each card is named by its words. Escape closes the popover and focus goes back to the Appearance button. The status line says "Theme: Light", "Theme: Dark" or "Theme: Match system" once per change.

The tint is bg-muted/50 on the header, not on the column, so it runs to both edges of the window while the rails and the top rule from Guides stay where every other block has them. The links are foreground rather than muted, the current page keeps its 1 pixel stroke on the bar's bottom edge, and the Appearance button is an outline Button. The tint is a token, so it follows every preset in light and dark.

Below the md breakpoint the links fold into a menu button that opens a sheet from the top with the four links and Start reading. The Appearance button stays in the bar with its icon only (its name is still read), and its popover is as wide as the screen allows, so the three cards fit at 320 pixels. Focus moves into the sheet and stays there; Escape, the close button or choosing a link closes it, and focus goes back to the menu button.

Little: the chosen card's ring eases in, the chevron turns, the popover and the sheet use the catalog's own entrances, and a band of light sweeps across Start reading on hover. With reduced motion the ring and the chevron change at once, and the popover and the sheet appear without sliding, zooming or fading.