Dark Theme Sidebar Block for React

The surfaces are tokens, not colors: the provider overrides --sidebar (what the rail's bg-sidebar reads) with --background, --muted or --card, and sets --sidebar-accent to a mix of foreground and that surface so hovered and current rows still show. In a dark preset those tokens are dark, so the rail is dark there and light elsewhere, and a Tinted rail never needs a dark: class. Raised also switches the Sidebar to variant="floating", which adds the card's radius, border and shadow.

A terminal is dark by nature, so the figure keeps a dark scope on its own element and nowhere else; a comment in the file says so. The rest of the window follows the theme. If you would rather it followed the theme too, delete the dark class and the terminal turns light in light presets.

Everything. Each console page's command and its three lines of output are typed in PLACES, and the surface switch only changes a class on the provider; nothing is run, deployed or saved. The pages are links to # whose handler shows the page instead of navigating. They're SidebarMenuButtons with render set to an a element. Point them at your routes and mark the current one with isActive. In your app, pick one surface and drop the switch.

Below the medium breakpoint the sidebar is a sheet that opens outside the window's own element, so the provider's tokens don't reach it and it always keeps the theme's own --sidebar surface. The surface switch is therefore hidden there, and the page says so. The menu button in the top bar opens the sheet from the start edge, the right in a right-to-left layout; Escape or choosing a page closes it and focus returns to the button.

Yes: group labels and the secondary lines use the sidebar's full foreground rather than a faded one, and the rows' hover and current fills are mixes built on each surface, so text keeps its contrast on all three. Icons use the sidebar's own muted tone, which is for graphics and not for words. The block was checked in light and dark presets.

The rail is a navigation landmark named after the product with its group named by its label, and the open page is marked as the current page. The surface switch is a labeled group of three options with arrow-key movement, and one polite status line says which surface is on. The terminal is a figure with its lines as a list, read in order, and the page scrolls inside its own region that takes keyboard focus.