feat: implement theme provider and toggle functionality

- Added a `ThemeProvider` component to manage theme state and persist it in local storage.
- Introduced a `ModeToggle` component for switching between light, dark, and system themes.
- Updated the `Layout` component to include the `ThemeProvider`.
- Enhanced the `AppSidebar` to include the `ModeToggle` for user accessibility.

src/components/sidebar/index.tsx

@@ -1,6 +1,8 @@
 import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
 import { tools } from "@/components/tool";
 import { Link } from "react-router-dom";
+import { ModeToggle } from "@/components/theme/toggle";
+import { Button } from "../ui/button";
 
 export const AppSidebar = () => (
   <Sidebar>
@@ -28,8 +30,11 @@ export const AppSidebar = () => (
         </SidebarGroupContent>
       </SidebarGroup>
     </SidebarContent>
-    <SidebarFooter>
-      <a href="mailto:litek@mail.typist.cc">contact us</a>
+    <SidebarFooter className="flex flex-row justify-between items-center gap-2">
+      <Button variant="link">
+        <a href="mailto:litek@mail.typist.cc">need more tools?</a>
+      </Button>
+      <ModeToggle />
     </SidebarFooter>
   </Sidebar>
 )

src/components/theme/provider.tsx

@@ -0,0 +1,73 @@
+import { createContext, useContext, useEffect, useState } from "react"
+
+type Theme = "dark" | "light" | "system"
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  )
+
+  useEffect(() => {
+    const root = window.document.documentElement
+
+    root.classList.remove("light", "dark")
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light"
+
+      root.classList.add(systemTheme)
+      return
+    }
+
+    root.classList.add(theme)
+  }, [theme])
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme)
+      setTheme(theme)
+    },
+  }
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext)
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider")
+
+  return context
+}

src/components/theme/toggle.tsx

@@ -0,0 +1,38 @@
+import { Moon, Sun } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+import { useTheme } from "./provider"
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

src/layout.tsx

@@ -1,20 +1,23 @@
 import type { FC } from "react"
 import { Outlet } from "react-router-dom";
 
+import { ThemeProvider } from "@/components/theme/provider"
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
 import { AppSidebar } from "@/components/sidebar";
 
 export const Layout: FC = () => (
-  <SidebarProvider>
-    <AppSidebar />
-    <div className="p-4 flex flex-col w-full h-[100vh] overflow-hidden">
-      <nav className="flex items-center justify-between">
-        <SidebarTrigger className="size-10" />
-        <div role="actions" />
-      </nav>
-      <main className="flex-1 overflow-auto p-4 overflow-hidden">
-        <Outlet />
-      </main>
-    </div>
-  </SidebarProvider>
+  <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+    <SidebarProvider>
+      <AppSidebar />
+      <div className="p-4 flex flex-col w-full h-[100vh] overflow-hidden">
+        <nav className="flex items-center justify-between">
+          <SidebarTrigger className="size-10" />
+          <div role="actions" />
+        </nav>
+        <main className="flex-1 overflow-auto p-4 overflow-hidden">
+          <Outlet />
+        </main>
+      </div>
+    </SidebarProvider>
+  </ThemeProvider>
 );

src/main.tsx

@@ -3,6 +3,7 @@ import { createRoot } from 'react-dom/client'
 
 import { Toaster } from '@/components/ui/sonner'
 
+
 import './index.css'
 import { AppRouter } from './router'