shadcn.io is not affiliated with official shadcn/ui
Theme Toggle Footer Block for Radix UI
A slim footer for a design-token editor with a theme button that cycles light, dark and system and really changes the page's theme.
Installation
Overview
A slim footer with a working theme control for React with Radix UI. The wordmark and a line sit at the start and three short groups of links (a nav labelled Footer) at the end. A legal row under them carries the copyright and the policies at the start and, at the end, the name of the theme in use beside the catalog's Theme Toggle Button, which cycles Light, Dark and System. It really switches the page: the dark class goes on or off the html element, System follows the device and keeps following it while it is chosen, and the footer starts from whatever theme the page is already showing. A polite live line says "Theme: Dark" once per change. The rails and top rule come from the Guides spine, the legal row's rule is drawn by Guides, and nothing is drawn under it because a footer ends the page.
FAQ
How do I wire it to my theme provider?
The block applies the theme itself with one small function, apply, which toggles the dark class on html. If your app uses next-themes, delete apply and the two effects, read theme from useTheme() for the button's theme prop and call setTheme(next) from change. The button itself never changes the page: it only reports the next theme, which is why this block owns that step.
What does System do?
It follows the device's colour scheme: the block asks the browser for prefers-color-scheme: dark and keeps listening while System is chosen, so a device that switches at sunset changes the page too. Choosing Light or Dark stops listening.
Is the choice remembered?
No. This block keeps it in state, so a reload shows the page's own theme again. To remember it, store the chosen value (a cookie your server reads, or localStorage read before the first paint) where you call apply; next-themes does this for you.
How is it named and announced?
The button's name says what a press does ("Switch to dark theme"), the visible label beside it shows the theme in use, and a live line that is empty from the start says "Theme: System" once per change. The icon turns from sun to moon to monitor with a CSS transition, and only fades under reduced motion.