{navLinks.map((link, i) => (
{link.active && (
-
+
)}
{link.label}
diff --git a/ui/components/theme/Provider.tsx b/ui/components/theme/Provider.tsx
new file mode 100644
index 0000000..43e2714
--- /dev/null
+++ b/ui/components/theme/Provider.tsx
@@ -0,0 +1,16 @@
+'use client';
+import { ThemeProvider } from 'next-themes';
+
+const ThemeProviderComponent = ({
+ children,
+}: {
+ children: React.ReactNode;
+}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default ThemeProviderComponent;
diff --git a/ui/components/theme/Switcher.tsx b/ui/components/theme/Switcher.tsx
new file mode 100644
index 0000000..22e2ecc
--- /dev/null
+++ b/ui/components/theme/Switcher.tsx
@@ -0,0 +1,62 @@
+'use client';
+import { useTheme } from 'next-themes';
+import { SunIcon, MoonIcon, MonitorIcon } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { cn } from '@/lib/utils';
+import { Select } from '../SettingsDialog';
+
+type Theme = 'dark' | 'light' | 'system';
+
+const ThemeSwitcher = ({ className }: { className?: string }) => {
+ const [mounted, setMounted] = useState(false);
+
+ const { theme, setTheme } = useTheme();
+
+ const isTheme = useCallback((t: Theme) => t === theme, [theme]);
+
+ const handleThemeSwitch = (theme: Theme) => {
+ setTheme(theme);
+ };
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ useEffect(() => {
+ if (isTheme('system')) {
+ const preferDarkScheme = window.matchMedia(
+ '(prefers-color-scheme: dark)',
+ );
+
+ const detectThemeChange = (event: MediaQueryListEvent) => {
+ const theme: Theme = event.matches ? 'dark' : 'light';
+ setTheme(theme);
+ };
+
+ preferDarkScheme.addEventListener('change', detectThemeChange);
+
+ return () => {
+ preferDarkScheme.removeEventListener('change', detectThemeChange);
+ };
+ }
+ }, [isTheme, setTheme, theme]);
+
+ // Avoid Hydration Mismatch
+ if (!mounted) {
+ return null;
+ }
+
+ return (
+