shadcn.io is not affiliated with official shadcn/ui
Theme Toggle Sidebar Block for Radix UI
A theme studio in a fixed-height window whose sidebar foot switches the page's real theme: a Light, Dark, System control that becomes an icon button when folded, with the page reading the theme back.
Installation
Overview
Put the theme where people keep their other settings with this theme toggle sidebar for React with Radix UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar on the theme's muted tone, and at its foot a three-way Segment Group: Light, Dark and System, each with an icon. Folded to icons, the same place holds the catalog's Theme Toggle Button, an icon that cycles through the three, whose title says "Theme: Dark". The change is real: it puts or removes the dark class on the page, System follows the device's setting and keeps following it while chosen, and the control starts from whatever the page is showing. The window has no dark scope of its own, so it follows the theme like everything around it. The page reads the setting back in three views from the rail: a list of facts (what you chose, what the page shows, what the device prefers, the class on the page), swatches of the real color tokens and a type specimen. A badge in the top bar and a status line say "Theme: Dark", which matters on a phone, where the rail is a sheet. It's built from Sidebar, Segment Group, Theme Toggle Button, Badge and Guides, with a CSS entrance only. For settings, studios and any app whose rail carries a theme control.
FAQ
Does it really change the theme?
Yes. Choosing Dark adds the dark class to the html element and Light removes it, which is how this site and the shadcn themes switch, so everything on the page, not only the window, changes. System asks the device with prefers-color-scheme, applies the answer and listens for changes while it stays chosen. The control starts from the class the page already has. If your app uses next-themes, call its setTheme inside the apply function and read its theme for the control.
What happens when the sidebar folds?
The Segment Group hides with the labels and the Theme Toggle Button takes its place at the foot, centered under the icons. Pressing it cycles Light, Dark, System and back, and its title and accessible name say the theme in use. Both controls hold the same state, so folding and unfolding never loses the choice. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
What does the page show?
Three views, chosen from the rail. Setting lists what you chose, what the page is showing, what your device prefers and the class on the page; the device line and the page lines show dashes until the browser has been asked, so the server and the browser agree on first paint. Swatches draws six color tokens (background, foreground, card, muted, accent and border) with the page's own classes, so you watch them change. Type is a four-line specimen on the theme's fonts.
What stays in the page, and how do I connect it?
The theme change itself is real, so reloading the page returns to whatever your site decides; nothing is stored. To remember the choice, save it in your theme provider or a cookie and read it before first paint. The views and their lines are typed at the top of the file. The views are links to # whose handler shows the view instead of navigating. They're SidebarMenuButtons with asChild around an a element.
Is it accessible?
The Segment Group is a labeled group of three radios, so arrow keys move between Light, Dark and System and the chosen one is announced. The folded button is named "Theme: Dark. Press to change.". One polite status line says "Theme: Dark." after each change. The theme changes both color schemes through tokens, so contrast holds in each, and the chosen segment is inverted with a filled shape rather than a hue.