aboutsummaryrefslogtreecommitdiffstats
path: root/frontend/src/components/shared/ThemeToggle.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/shared/ThemeToggle.tsx')
-rw-r--r--frontend/src/components/shared/ThemeToggle.tsx36
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