diff options
Diffstat (limited to 'frontend/src/components/shared/ThemeToggle.tsx')
-rw-r--r-- | frontend/src/components/shared/ThemeToggle.tsx | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/frontend/src/components/shared/ThemeToggle.tsx b/frontend/src/components/shared/ThemeToggle.tsx new file mode 100644 index 0000000..679bbc5 --- /dev/null +++ b/frontend/src/components/shared/ThemeToggle.tsx @@ -0,0 +1,36 @@ +'use client'; + +import { Moon, Sun } from 'lucide-react'; +import { Button } from '@/components/ui/button'; +import { useTheme } from './ThemeProvider'; + +export function ThemeToggle() { + const { theme, setTheme } = useTheme(); + + const toggleTheme = () => { + if (theme === 'dark') { + setTheme('light'); + } else { + setTheme('dark'); + } + }; + + return ( + <Button + variant="ghost" + size="icon" + onClick={toggleTheme} + aria-label={ + theme === 'dark' + ? 'Switch to light theme' + : 'Switch to dark theme' + } + > + {theme === 'dark' ? ( + <Sun className="h-[1.2rem] w-[1.2rem]" /> + ) : ( + <Moon className="h-[1.2rem] w-[1.2rem]" /> + )} + </Button> + ); +}
\ No newline at end of file |