Feature : Add a theme switcher #206

src/app/(general)/_components/landing-page/navbar/index.tsx

@@ -33,7 +33,9 @@ export const Navbar = () => {
               <SiDiscord className="size-4" />
             </Button>
           </Link>
-          <ColorModeToggle />
+          <div className="hidden sm:flex">
+            <ColorModeToggle />
+          </div>
         </HStack>
       </HStack>
     </HStack>

src/app/(general)/_components/sidebar/user.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronRight, LogOut, Moon, Sun, User } from "lucide-react";
+import { ChevronRight, LogOut, Moon, Sun, User, Palette } from "lucide-react";
 import Link from "next/link";
 
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -19,7 +19,9 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar";
+import { ThemeSwitcher } from "@/components/theme";
 import { useTheme } from "next-themes";
+import { useTheme as useCustomTheme } from "@/contexts/theme";
 import { signOut } from "next-auth/react";
 
 export function NavUser({
@@ -33,6 +35,13 @@ export function NavUser({
 }) {
   const { isMobile } = useSidebar();
   const { theme, setTheme } = useTheme();
+  const { currentMode, toggleMode } = useCustomTheme();
+
+  const handleThemeToggle = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setTheme(theme === "light" ? "dark" : "light");
+    toggleMode();
+  };
 
   return (
     <SidebarMenu>
@@ -84,20 +93,25 @@ export function NavUser({
               </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onClick={(e) => {
-                e.preventDefault();
-                setTheme(theme === "light" ? "dark" : "light");
-              }}
-            >
-              {theme === "light" ? (
+            <DropdownMenuItem onClick={handleThemeToggle}>
+              {currentMode === "light" ? (
                 <Sun className="size-4" />
               ) : (
                 <Moon className="size-4" />
               )}
-              {theme === "light" ? "Light mode" : "Dark mode"}
+              {currentMode === "light" ? "Light mode" : "Dark mode"}
             </DropdownMenuItem>
             <DropdownMenuSeparator />
+            <ThemeSwitcher>
+              <DropdownMenuItem
+                onSelect={(e) => e.preventDefault()}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <Palette className="size-4" />
+                Theme
+              </DropdownMenuItem>
+            </ThemeSwitcher>
+            <DropdownMenuSeparator />
             <DropdownMenuItem onClick={() => signOut()}>
               <LogOut />
               Sign Out

src/app/_components/navbar/color-mode-toggle.tsx

@@ -1,22 +1,30 @@
 "use client";
 
 import { useTheme } from "next-themes";
+import { useTheme as useCustomTheme } from "@/contexts/theme";
 
 import { Button } from "@/components/ui/button";
 import { Moon, Sun } from "lucide-react";
 
 export const ColorModeToggle = () => {
   const { theme, setTheme } = useTheme();
+  const { currentMode, toggleMode } = useCustomTheme();
+
+  const handleToggle = () => {
+    // Toggle both next-themes and our custom theme
+    setTheme(theme === "light" ? "dark" : "light");
+    toggleMode();
+  };
 
   return (
     <>
       <Button
-        onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+        onClick={handleToggle}
         variant="outline"
-        aria-label={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
+        aria-label={`Switch to ${currentMode === "light" ? "dark" : "light"} mode`}
         size="icon"
         suppressHydrationWarning
-        className="relative size-8"
+        className="relative size-9"
       >
         <Sun className="absolute size-5 rotate-0 opacity-100 transition-all duration-300 dark:-rotate-90 dark:opacity-0" />
         <Moon className="absolute size-5 rotate-90 opacity-0 transition-all duration-300 dark:rotate-0 dark:opacity-100" />

src/app/_components/navbar/index.tsx

@@ -5,6 +5,7 @@ import { ColorModeToggle } from "./color-mode-toggle";
 import { HStack } from "@/components/ui/stack";
 import { auth } from "@/server/auth";
 import { SidebarTrigger } from "@/components/ui/sidebar";
+import { ThemeSwitcher } from "@/components/theme";
 import { Menu } from "lucide-react";
 
 export const Navbar = async () => {
@@ -26,6 +27,7 @@ export const Navbar = async () => {
       </HStack>
       <HStack>
         <AccountButton />
+        <ThemeSwitcher />
         <ColorModeToggle />
       </HStack>
     </HStack>

src/app/layout.tsx

@@ -9,6 +9,10 @@ import { TRPCReactProvider } from "@/trpc/react";
 import { Toaster } from "@/components/ui/sonner";
 
 import { EnvProvider } from "@/contexts/env";
+import {
+  ThemeProvider as CustomThemeProvider,
+  ThemeScript,
+} from "@/contexts/theme";
 
 import { env } from "@/env";
 
@@ -57,21 +61,24 @@ export default async function RootLayout({
     >
       <head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <ThemeScript />
       </head>
       <body>
         <Analytics />
         <SpeedInsights />
 
         <TRPCReactProvider>
           <EnvProvider>
-            <ThemeProvider
-              attribute="class"
-              defaultTheme="system"
-              enableSystem
-              disableTransitionOnChange
-            >
-              {children}
-            </ThemeProvider>
+            <CustomThemeProvider>
+              <ThemeProvider
+                attribute="class"
+                defaultTheme="system"
+                enableSystem
+                disableTransitionOnChange
+              >
+                {children}
+              </ThemeProvider>
+            </CustomThemeProvider>
           </EnvProvider>
         </TRPCReactProvider>
         <Toaster />

src/components/theme/index.ts

@@ -0,0 +1 @@
+export { ThemeSwitcher } from "./theme-switcher";