fix(web): Fix the toggle theme button allowing clicks from anywhere in the dropdown item

1 files changed, 10 insertions, 1 deletions

diff --git a/apps/web/components/theme-provider.tsx b/apps/web/components/theme-provider.tsx
index 8efcd93b..737e1356 100644
--- a/apps/web/components/theme-provider.tsx
+++ b/apps/web/components/theme-provider.tsx
@@ -2,8 +2,17 @@
 
 import type { ThemeProviderProps } from "next-themes/dist/types";
 import * as React from "react";
-import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }
+
+export function useToggleTheme() {
+  const { theme, setTheme } = useTheme();
+  if (theme == "dark") {
+    return () => setTheme("light");
+  } else {
+    return () => setTheme("dark");
+  }
+}