feat: Implement app theme handling

src/components/ButtonSwitchTheme.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react";
+import Button from "./Button";
+import useTheme from "@/hooks/useTheme";
+import { Icon } from "@radix-ui/react-select";
+import { IoIosMoon, IoIosSunny } from "react-icons/io";
+
+const ButtonSwitchTheme: FC = () => {
+  const { toggleTheme, theme } = useTheme();
+
+  return (
+    <Button onClick={toggleTheme} variant="ghost" size="icon">
+      <Icon>{theme === "dark" ? <IoIosSunny /> : <IoIosMoon />}</Icon>
+    </Button>
+  );
+};
+
+export default ButtonSwitchTheme;

src/components/Calendar.tsx

@@ -19,39 +19,42 @@ const Calendar: FC<CalendarProps> = ({ className, selected, onSelect }) => {
       showOutsideDays={true}
       className={cn("w-max rounded-md border p-3 shadow", className)}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        months: "flex flex-col relative sm:flex-row space-y-4 sm:space-y-0",
         month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
+        month_caption: "flex justify-center pt-1 relative items-center",
         caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
+        button_previous: cn(
           buttonVariants({ variant: "outline" }),
-          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "size-7 bg-transparent dark:bg-slate-600 p-0 opacity-50 hover:opacity-100",
+           "absolute left-1 z-10"
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50"
+        button_next: cn(
+          buttonVariants({ variant: "outline" }),
+          "size-7 bg-transparent dark:bg-slate-600 p-0 opacity-50 hover:opacity-100",
+          "absolute right-1 z-10"
         ),
+        month_grid: "w-full border-collapse space-y-1",
+        weekdays: "flex",
+        weekday:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        week: "flex w-full mt-2",
         day: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50",
+        ),
+        day_button: cn(
           buttonVariants({ variant: "ghost" }),
-          "size-8 p-0 font-normal aria-selected:opacity-100"
+          "size-8 p-0 font-normal aria-selected:opacity-100",
         ),
-        day_range_start: "day-range-start",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
+        range_start: "day-range-start",
+        selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-lg",
+        today: "bg-accent text-accent-foreground",
+        outside:
           "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
+        disabled: "text-muted-foreground opacity-50",
+        range_middle:
           "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        hidden: "invisible",
       }}
     />
   );

src/hooks/useTheme.ts

@@ -0,0 +1,24 @@
+import { useCallback, useEffect, useState } from "react";
+
+export const THEME_KEY = "theme_mode";
+
+const DARK_MODE = "dark";
+const LIGHT_MODE = "light";
+const savedTheme = localStorage.getItem(THEME_KEY);
+
+const useTheme = () => {
+  const [theme, setTheme] = useState(savedTheme ?? LIGHT_MODE);
+
+  useEffect(() => {
+    document.documentElement.className = theme;
+    localStorage.setItem(THEME_KEY, theme);
+  }, [theme]);
+
+  const toggleTheme = useCallback(() => {
+    setTheme(theme === DARK_MODE ? LIGHT_MODE : DARK_MODE);
+  }, [theme]);
+
+  return { toggleTheme, theme };
+};
+
+export default useTheme;