refact: rework theme code

fix: lint errors

fix: lint error

fix: lint error

src/hooks/useIsBrowser.tsx

@@ -0,0 +1,11 @@
+import { useEffect, useState } from "react"
+
+export function useIsBrowser() {
+  const isBrowserCheck = () => typeof window !== "undefined"
+
+  const [isBrowser, setIsBrowser] = useState(isBrowserCheck)
+
+  useEffect(() => setIsBrowser(isBrowserCheck), [])
+
+  return isBrowser
+}

src/hooks/useMedia.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react"
+
+export function useMedia<Value extends unknown>(
+  queries: string[],
+  values: Value[],
+  defaultValue: Value
+) {
+  const [currentValue, setCurrentValue] = useState(defaultValue)
+
+  useEffect(() => {
+    const windowGlobal = typeof window !== "undefined" && window
+
+    if (!windowGlobal) return
+
+    const mediaQueries = queries.map((query) => windowGlobal.matchMedia(query))
+
+    const getCurrentValue = () => {
+      const index = mediaQueries.findIndex((value) => value.matches)
+      return values[index] || defaultValue
+    }
+
+    setCurrentValue(getCurrentValue)
+
+    const handler = () => setCurrentValue(getCurrentValue)
+
+    mediaQueries.forEach((query) => query.addEventListener("change", handler))
+
+    return () =>
+      mediaQueries.forEach((query) =>
+        query.removeEventListener("change", handler)
+      )
+  }, [queries, values, defaultValue])
+
+  return currentValue
+}