Add Sonner-based notifications and UX polish

components/theme-toggle.tsx

@@ -3,6 +3,7 @@
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
+import { toast } from "sonner";
 
 import { useSound } from "@/components/sound-provider";
 import { Button, type ButtonProps } from "@/components/ui/button";
@@ -11,6 +12,8 @@ import { cn } from "@/lib/utils";
 type ThemeToggleProps = {
   ariaLabel?: string;
   label?: string;
+  lightToastLabel?: string;
+  darkToastLabel?: string;
   variant?: ButtonProps["variant"];
   className?: string;
   iconClassName?: string;
@@ -19,6 +22,8 @@ type ThemeToggleProps = {
 export function ThemeToggle({
   ariaLabel = "Toggle theme",
   label,
+  lightToastLabel = "Light mode enabled",
+  darkToastLabel = "Dark mode enabled",
   variant = "outline",
   className,
   iconClassName,
@@ -54,6 +59,7 @@ export function ThemeToggle({
 
     setTheme(nextTheme);
     playSound(nextTheme === "dark" ? "/audio/dark.mp3" : "/audio/light.mp3");
+    toast(nextTheme === "dark" ? darkToastLabel : lightToastLabel);
   };
 
   return (