Updated theme toggle to go through all three options and update dark mode colors

src/app/globals.css

@@ -85,42 +85,42 @@
 }
 
 .dark {
-  /* Dark Mode Palette - Modernized */
+  /* Dracula Dark Mode Palette */
-  --background: oklch(0.18 0 0); /* Slightly lighter dark charcoal */
+  --background: oklch(0.17 0.005 270); /* Dracula background: #282a36 */
-  --foreground: oklch(0.88 0 0); /* Soft white/light gray */
+  --foreground: oklch(0.95 0.01 270); /* Dracula foreground: #f8f8f2 */
-  --card: oklch(0.22 0 0); /* Slightly lighter for cards than background */
+  --card: oklch(0.2 0.005 270); /* Slightly lighter for cards */
-  --card-foreground: oklch(0.88 0 0);
+  --card-foreground: oklch(0.95 0.01 270);
-  --popover: oklch(0.22 0 0);
+  --popover: oklch(0.2 0.005 270);
-  --popover-foreground: oklch(0.88 0 0);
+  --popover-foreground: oklch(0.95 0.01 270);
-  --primary: oklch(0.65 0.18 260); /* Brighter, more vibrant indigo */
+  --primary: oklch(0.6 0.25 270); /* Dracula purple: #bd93f9 */
-  --primary-foreground: oklch(0.18 0 0); /* Darker text on primary */
+  --primary-foreground: oklch(0.17 0.005 270); /* Text on primary */
-  --secondary: oklch(0.28 0 0); /* Medium dark gray */
+  --secondary: oklch(0.25 0.005 270); /* Dracula current line/selection: #44475a */
-  --secondary-foreground: oklch(0.75 0 0); /* Lighter gray */
+  --secondary-foreground: oklch(0.75 0.01 270); /* Lighter gray */
-  --muted: oklch(0.28 0 0);
+  --muted: oklch(0.25 0.005 270);
-  --muted-foreground: oklch(0.55 0 0); /* Mid-gray */
+  --muted-foreground: oklch(0.55 0.005 270); /* Dracula comment: #6272a4 */
-  --accent: oklch(0.28 0.04 260); /* Subtle dark hint of primary */
+  --accent: oklch(0.3 0.05 270); /* Subtle hint of primary */
-  --accent-foreground: oklch(0.7 0.06 260); /* Lighter desaturated primary */
+  --accent-foreground: oklch(0.7 0.05 270); /* Lighter desaturated primary */
-  --destructive: oklch(0.65 0.16 20); /* Brighter red */
+  --destructive: oklch(0.7 0.2 0); /* Dracula red: #ff5555 */
-  --border: oklch(0.32 0 0); /* Medium dark gray */
+  --border: oklch(0.3 0.005 270); /* Dracula border: #44475a (similar to secondary) */
-  --input: oklch(0.28 0 0); /* Darker than border */
+  --input: oklch(0.25 0.005 270); /* Darker than border */
-  --ring: oklch(0.5 0 0); /* Mid-dark gray */
+  --ring: oklch(0.5 0.005 270); /* Mid-dark gray */
 
-  /* Chart Colors (Dark Mode) - Brighter and distinct for visibility */
+  /* Chart Colors (Dracula Dark Mode) - Vibrant and distinct */
-  --chart-1: oklch(0.75 0.2 270); /* Brighter purple-blue */
+  --chart-1: oklch(0.7 0.2 270); /* Dracula purple: #bd93f9 */
-  --chart-2: oklch(0.8 0.18 180); /* Brighter teal */
+  --chart-2: oklch(0.7 0.2 120); /* Dracula green: #50fa7b */
-  --chart-3: oklch(0.85 0.15 90); /* Brighter muted green-yellow */
+  --chart-3: oklch(0.7 0.2 60); /* Dracula yellow: #f1fa8c */
-  --chart-4: oklch(0.8 0.18 30); /* Brighter orange-brown */
+  --chart-4: oklch(0.7 0.2 30); /* Dracula orange: #ffb86c */
-  --chart-5: oklch(0.9 0.12 330); /* Brighter muted pink */
+  --chart-5: oklch(0.7 0.2 330); /* Dracula pink: #ff79c6 */
 
-  /* Sidebar Colors (Dark Mode) */
+  /* Sidebar Colors (Dracula Dark Mode) */
-  --sidebar: oklch(0.22 0 0); /* Slightly lighter dark for sidebar */
+  --sidebar: oklch(0.2 0.005 270); /* Slightly lighter dark for sidebar */
-  --sidebar-foreground: oklch(0.88 0 0);
+  --sidebar-foreground: oklch(0.95 0.01 270);
-  --sidebar-primary: oklch(0.65 0.18 260);
+  --sidebar-primary: oklch(0.6 0.25 270);
-  --sidebar-primary-foreground: oklch(0.18 0 0);
+  --sidebar-primary-foreground: oklch(0.17 0.005 270);
-  --sidebar-accent: oklch(0.28 0.04 260);
+  --sidebar-accent: oklch(0.3 0.05 270);
-  --sidebar-accent-foreground: oklch(0.7 0.06 260);
+  --sidebar-accent-foreground: oklch(0.7 0.05 270);
-  --sidebar-border: oklch(0.32 0 0);
+  --sidebar-border: oklch(0.3 0.005 270);
-  --sidebar-ring: oklch(0.5 0 0);
+  --sidebar-ring: oklch(0.5 0.005 270);
 }
 
 @layer base {
@@ -130,4 +130,4 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+}

src/components/ThemeToggle.tsx

@@ -3,19 +3,46 @@
 import * as React from "react";
 import { useTheme } from "@/components/ThemeProvider"; // Adjust path as needed
 import { Button } from "@/components/ui/button"; // Assuming you have a Shadcn UI Button component
-import { Sun, Moon } from "lucide-react"; // Assuming you have lucide-react for icons
+import { Sun, Moon, Laptop } from "lucide-react"; // Import Laptop icon
 
 export function ThemeToggle() {
   const { setTheme, theme } = useTheme();
 
+  // Function to cycle through themes: light -> dark -> system -> light
+  const toggleTheme = () => {
+    if (theme === "light") {
+      setTheme("dark");
+    } else if (theme === "dark") {
+      setTheme("system");
+    } else {
+      setTheme("light");
+    }
+  };
+
   return (
     <Button
       variant="ghost" // Use your preferred button variant
       size="icon"
-      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      onClick={toggleTheme} // Call the new toggleTheme function
     >
-      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      {/* Icon for Light theme */}
-      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <Sun
+        className={`h-[1.2rem] w-[1.2rem] transition-all
+          ${theme === "light" ? "rotate-0 scale-100" : "-rotate-90 scale-0"}
+        `}
+      />
+      {/* Icon for Dark theme */}
+      <Moon
+        className={`absolute h-[1.2rem] w-[1.2rem] transition-all
+          ${theme === "dark" ? "rotate-0 scale-100" : "rotate-90 scale-0"}
+        `}
+      />
+      {/* Icon for System theme */}
+      <Laptop
+        className={`absolute h-[1.2rem] w-[1.2rem] transition-all
+          ${theme === "system" ? "rotate-0 scale-100" : "rotate-90 scale-0"}
+        `}
+      />
       <span className="sr-only">Toggle theme</span>
     </Button>
   );