Theme Toggle Navbar Block for React

reveal calls document.startViewTransition with a function that sets the theme. When the transition is ready it animates the new picture's clip-path from a circle of zero radius at a point to a circle that reaches the window's farthest corner, over half a second; a temporary style switches off the browser's own cross-fade while it runs and is removed when it ends. The point is where you pressed: the pointer for a click, the middle of the button for a key press, and the middle of the chevron button for a choice in the menu.

reveal checks both before it starts: document.startViewTransition must be a function and prefers-reduced-motion must not be reduce. Otherwise it applies the theme at once, with no animation and no error. The toggle button's own sun and moon turn with a CSS transition and only fade under reduced motion.

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 buttons (the page it starts from is read once on mount). Keep the call to reveal: it wraps whatever you apply in the transition.

The chevron button is named Theme options and says whether its menu is open. The menu is a group labelled Theme with three radio items, each with an icon, the current one checked; the arrow keys move between them, Enter or Space chooses one and closes the menu, and Escape closes it. In every case focus goes back to the chevron button, and the status line says "Theme: Light", "Theme: Dark" or "Theme: System" once. Opening the menu with Enter puts focus on the first item.

Below the md breakpoint the links fold into a menu button that opens a sheet from the top with the four links and Start writing; the theme button and the chevron stay in the bar, so the feature is one tap away, and nothing wraps at 320 pixels. The Shine Button leaves the bar below sm and lives in the sheet. 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.

Only the theme change: the circle, the sun and moon turning, and a band of light across Start writing on hover. With reduced motion the theme changes at once, the icons only fade, and the menu and the sheet appear without sliding, zooming or fading.