From dadf8299e0fc9b2b1332d8b8119604ec5188f138 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Tue, 4 Jun 2024 12:07:02 +0800
Subject: [PATCH 1/2] chore(hooks): remove use-theme.ts

---
 src/hooks/use-theme.ts | 50 ------------------------------------------
 1 file changed, 50 deletions(-)
 delete mode 100644 src/hooks/use-theme.ts

diff --git a/src/hooks/use-theme.ts b/src/hooks/use-theme.ts
deleted file mode 100644
index 1a1862d..0000000
--- a/src/hooks/use-theme.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-// originally written by @imoaazahmed
-
-import { useEffect, useMemo, useState } from "react";
-
-const ThemeProps = {
-  key: "theme",
-  light: "light",
-  dark: "dark",
-} as const;
-
-type Theme = typeof ThemeProps.light | typeof ThemeProps.dark;
-
-export const useTheme = (defaultTheme?: Theme) => {
-  const [theme, setTheme] = useState<Theme>(() => {
-    const storedTheme = localStorage.getItem(ThemeProps.key) as Theme | null;
-
-    return storedTheme || (defaultTheme ?? ThemeProps.light);
-  });
-
-  const isDark = useMemo(() => {
-    return theme === ThemeProps.dark;
-  }, [theme]);
-
-  const isLight = useMemo(() => {
-    return theme === ThemeProps.light;
-  }, [theme]);
-
-  const _setTheme = (theme: Theme) => {
-    localStorage.setItem(ThemeProps.key, theme);
-    document.documentElement.classList.remove(
-      ThemeProps.light,
-      ThemeProps.dark,
-    );
-    document.documentElement.classList.add(theme);
-    setTheme(theme);
-  };
-
-  const setLightTheme = () => _setTheme(ThemeProps.light);
-
-  const setDarkTheme = () => _setTheme(ThemeProps.dark);
-
-  const toggleTheme = () =>
-    theme === ThemeProps.dark ? setLightTheme() : setDarkTheme();
-
-  useEffect(() => {
-    _setTheme(theme);
-  });
-
-  return { theme, isDark, isLight, setLightTheme, setDarkTheme, toggleTheme };
-};

From eaac4ba07d484060219d904c708f76a49aebfcd6 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Tue, 4 Jun 2024 12:07:26 +0800
Subject: [PATCH 2/2] refactor(components): use @nextui-org/use-theme

---
 src/components/theme-switch.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/theme-switch.tsx b/src/components/theme-switch.tsx
index f89adad..82967e3 100644
--- a/src/components/theme-switch.tsx
+++ b/src/components/theme-switch.tsx
@@ -2,8 +2,8 @@ import { FC, useState, useEffect } from "react";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 import { SwitchProps, useSwitch } from "@nextui-org/switch";
 import clsx from "clsx";
+import { useTheme } from "@nextui-org/use-theme";
 
-import { useTheme } from "@/hooks/use-theme";
 import { SunFilledIcon, MoonFilledIcon } from "@/components/icons";
 
 export interface ThemeSwitchProps {
@@ -17,9 +17,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({
 }) => {
   const [isMounted, setIsMounted] = useState(false);
 
-  const { theme, toggleTheme } = useTheme();
-
-  const onChange = toggleTheme;
+  const { theme, setTheme } = useTheme();
 
   const {
     Component,
@@ -30,7 +28,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({
     getWrapperProps,
   } = useSwitch({
     isSelected: theme === "light",
-    onChange,
+    onChange: () => setTheme(theme === "light" ? "dark" : "light"),
   });
 
   useEffect(() => {