Theme Toggle for Dev
A handy theme toggle button helpful during development to quickly test dark/light themes. It sticks on top of all elements in a convenient position.
theme-toggle.tsx
tsx1"use client"; 2 3import { useTheme } from "next-themes"; 4 5import { Icons } from "@/assets/icons"; 6import { Button } from "@/components/ui/reusables/button"; 7 8export function ThemeToggleButton() { 9 const { theme, setTheme } = useTheme(); 10 11 return ( 12 <aside> 13 <Button 14 onClick={() => setTheme(theme === "dark" ? "light" : "dark")} 15 className="fixed bottom-3 right-16 z-50 text-foreground" 16 size="icon" 17 aria-label="toggle theme" 18 > 19 <Icons.Sun /> 20 </Button> 21 </aside> 22 ); 23}
Usage
tsx1// layout.tsx 2 3export default function RootLayout({ 4 children, 5}: Readonly<{ 6 children: React.ReactNode; 7}>) { 8 return ( 9 <html lang="en"> 10 <body> 11 {children} 12 {process.env.NODE_ENV === "development" && ( 13 <ThemeToggleButton /> 14 )} 15 </body> 16 </html> 17 ); 18}