Fixed the light mode icon non-visibility

Author: Soumilgit

components/ModeToggle.jsx

@@ -14,12 +14,13 @@ export function ModeToggle() {
         <Button variant="ghost" size="icon" className="relative overflow-hidden group">
           <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-secondary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-md"></div>
           {theme === "dark" ? (
-            <Moon className="h-[1.2rem] w-[1.2rem] text-primary animate-pulse" />
-          ) : theme === "light" ? (
-            <Sun className="h-[1.2rem] w-[1.2rem] text-secondary animate-pulse" />
-          ) : (
-            <Sparkles className="h-[1.2rem] w-[1.2rem] text-accent animate-pulse" />
-          )}
+  <Moon className="h-[1.2rem] w-[1.2rem] text-primary animate-pulse" />
+) : theme === "light" ? (
+  <Sun className="h-[1.2rem] w-[1.2rem] text-yellow-400 animate-pulse" />
+) : (
+  <Sparkles className="h-[1.2rem] w-[1.2rem] text-accent animate-pulse" />
+)}
+
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
@@ -28,7 +29,8 @@ export function ModeToggle() {
           onClick={() => setTheme("light")}
           className="cursor-pointer focus:bg-primary/10 hover:bg-primary/10 transition-colors duration-200 flex items-center gap-2"
         >
-          <Sun className="h-4 w-4 text-secondary" />
+          <Sun className="h-4 w-4 text-yellow-400" />
+
           Light
         </DropdownMenuItem>
         <DropdownMenuItem