add the best theme

adds catppuccin mocha (very high quality pr)

src/app/globals.css

@@ -92,6 +92,28 @@
     --ring: 0 0% 70%;
     --radius: 0.4rem;
   }
+
+  .catppuccin {
+    --background: 240 21% 15%;
+    --foreground: 226 64% 88%;
+    --muted: 240 21% 12%;
+    --muted-foreground: 228 17% 64%;
+    --popover: 240 21% 12%;
+    --popover-foreground: 227 35% 80%;
+    --card: 227 35% 80%;
+    --card-foreground: 228 24% 72%;
+    --border: 234 13% 31%;
+    --input: 234 13% 31%;
+    --primary: 115 54% 76%;
+    --primary-foreground: 240 21% 15%;
+    --secondary: 240 21% 12%;
+    --secondary-foreground: 228 17% 64%;
+    --accent: 237 16% 23%;
+    --accent-foreground: 227 35% 80%;
+    --destructive: 343 81% 75%;
+    --destructive-foreground: 226 64% 88%;
+    --ring: 228 24% 72%;
+  }
 }
 
 @layer base {

src/components/ThemeSwitch.tsx

@@ -38,6 +38,9 @@ export function ModeToggle() {
         <DropdownMenuItem onClick={() => setTheme("midnight")}>
           Midnight
         </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("catppuccin")}>
+          Catppuccin
+        </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme("system")}>
           System
         </DropdownMenuItem>

src/components/theme-provider.tsx

@@ -5,12 +5,14 @@ type Theme =
 	| 'cyberpunk'
 	| 'bluelight'
 	| 'midnight'
+	| 'catppuccin'
 	| 'system';
 const themes: Theme[] = [
 	'radius',
 	'cyberpunk',
 	'bluelight',
 	'midnight',
+	'catppuccin',
 	'system',
 ];
 type ThemeProviderProps = {