Theme Toggle Footer Block for React

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.

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.

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.

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.

The page's one primary colour belongs to its main action, and a footer control isn't that. The button is an outline icon button in the theme's border colour, with the theme's focus ring.

The brand stacks over the three groups, which stay in a row of three, and the legal row stacks with the theme control last. Nothing scrolls sideways at 320 pixels.