themes and dimensions

hooks/useDarkMode.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+function useDarkMode() {
+  const [theme, setTheme] = useState(
+    typeof window !== "undefined" ? localStorage.theme : "dark"
+  );
+  const colorTheme = theme === "dark" ? "light" : "dark";
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove(colorTheme);
+    root.classList.add(theme);
+
+    if (typeof window !== "undefined") {
+      localStorage.setItem("theme", theme);
+    }
+  }, [theme]);
+
+  return [colorTheme, setTheme];
+}
+
+export default useDarkMode;

hooks/useTournamentFilter.tsx

@@ -25,7 +25,7 @@ const useTournamentDataFilter = (
   } else {
     state = filtered.map((t) => (
       <tr
-        className="border-b border-gray-700 border-opacity-20 bg-gray-800 text-white transition duration-300 ease-in-out hover:bg-gray-400 hover:text-black"
+        className="text-gray-900 bg-white dark:bg-gray-800 dark:text-white hover:bg-gray-400 hover:text-black"
         key={t._id}
       >
         <td className="p-3">