Redesign DarkModeToggle: add animated switch with gradient and glow

.vs/ProjectSettings.json

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}

.vs/VSWorkspaceState.json

@@ -0,0 +1,6 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "PreviewInSolutionExplorer": false
+}

.vs/www-v2/v17/DocumentLayout.json

@@ -0,0 +1,37 @@
+{
+  "Version": 1,
+  "WorkspaceRootPath": "D:\\hacktoberfest\\www-v2\\",
+  "Documents": [
+    {
+      "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|D:\\hacktoberfest\\www-v2\\src\\components\\shared\\DarkModeToggle.tsx||{0F2454B1-A556-402D-A7D0-1FDE7F99DEE0}",
+      "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:src\\components\\shared\\DarkModeToggle.tsx||{0F2454B1-A556-402D-A7D0-1FDE7F99DEE0}"
+    }
+  ],
+  "DocumentGroupContainers": [
+    {
+      "Orientation": 0,
+      "VerticalTabListWidth": 256,
+      "DocumentGroups": [
+        {
+          "DockedWidth": 200,
+          "SelectedChildIndex": 0,
+          "Children": [
+            {
+              "$type": "Document",
+              "DocumentIndex": 0,
+              "Title": "DarkModeToggle.tsx",
+              "DocumentMoniker": "D:\\hacktoberfest\\www-v2\\src\\components\\shared\\DarkModeToggle.tsx",
+              "RelativeDocumentMoniker": "src\\components\\shared\\DarkModeToggle.tsx",
+              "ToolTip": "D:\\hacktoberfest\\www-v2\\src\\components\\shared\\DarkModeToggle.tsx",
+              "RelativeToolTip": "src\\components\\shared\\DarkModeToggle.tsx",
+              "ViewState": "AgIAAB4AAAAAAAAAAAAmwC0AAAAmAAAAAAAAAA==",
+              "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003213|",
+              "WhenOpened": "2025-10-06T16:08:56.431Z",
+              "EditorCaption": ""
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

src/components/shared/DarkModeToggle.tsx

@@ -1,38 +1,55 @@
 import { useState, useEffect } from 'react';
 
 const DarkModeToggle = () => {
-  const [isDarkMode, setIsDarkMode] = useState(false);
+    const [isDarkMode, setIsDarkMode] = useState(false);
 
-  useEffect(() => {
-    const theme = localStorage.getItem('theme');
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark');
-      setIsDarkMode(true);
-    } else {
-      document.documentElement.classList.remove('dark');
-      setIsDarkMode(false);
-    }
-  }, []);
+    useEffect(() => {
+        const theme = localStorage.getItem('theme');
+        if (theme === 'dark') {
+            document.documentElement.classList.add('dark');
+            setIsDarkMode(true);
+        } else {
+            document.documentElement.classList.remove('dark');
+            setIsDarkMode(false);
+        }
+    }, []);
 
-  const toggleDarkMode = () => {
-    if (isDarkMode) {
-      document.documentElement.classList.remove('dark');
-      localStorage.setItem('theme', 'light');
-    } else {
-      document.documentElement.classList.add('dark');
-      localStorage.setItem('theme', 'dark');
-    }
-    setIsDarkMode(!isDarkMode);
-  };
+    const toggleDarkMode = () => {
+        if (isDarkMode) {
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
+        } else {
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+        }
+        setIsDarkMode(!isDarkMode);
+    };
 
-  return (
-    <button
-      onClick={toggleDarkMode}
-      className="p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200"
-    >
-      {isDarkMode ? '☀️' : '🌙'}
-    </button>
-  );
+    return (
+        <button
+            onClick={toggleDarkMode}
+            className={`relative w-20 h-10 rounded-full transition-colors duration-500 focus:outline-none shadow-inner ${isDarkMode
+                    ? 'bg-gradient-to-r from-purple-700 via-pink-600 to-red-500'
+                    : 'bg-gradient-to-r from-yellow-400 via-orange-300 to-yellow-200'
+                }`}
+            aria-label="Toggle Dark Mode"
+            role="switch"
+        >
+            {/* Circle */}
+            <span
+                className={`absolute top-1 left-1 w-8 h-8 rounded-full shadow-lg transform transition-transform duration-500 flex items-center justify-center text-xl ${isDarkMode ? 'translate-x-10 bg-white text-yellow-400' : 'translate-x-0 bg-gray-50 text-gray-800'
+                    }`}
+            >
+                {isDarkMode ? '☀️' : '🌙'}
+            </span>
+
+            {/* Subtle glow effect */}
+            <span
+                className={`absolute w-8 h-8 rounded-full top-1 left-1 pointer-events-none blur-md transition-all duration-500 ${isDarkMode ? 'bg-yellow-300 opacity-40 translate-x-10' : 'bg-gray-400 opacity-20 translate-x-0'
+                    }`}
+            ></span>
+        </button>
+    );
 };
 
 export default DarkModeToggle;