Redesign Dark Mode Toggle Button for Better User Experience #470

Author: Pranav92005

package-lock.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.14",
+    "@types/styled-components": "^5.1.34",
     "axios": "^1.12.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -38,6 +39,7 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "remark-supersub": "^1.0.0",
+    "styled-components": "^6.1.19",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.14",
     "tailwindcss-animate": "^1.0.7",

package.json

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import Switch from '@/styles/DarkToggle';
 
 const DarkModeToggle = () => {
   const [isDarkMode, setIsDarkMode] = useState(false);
@@ -26,12 +27,13 @@ const DarkModeToggle = () => {
   };
 
   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>
+    <>
+
+
+    <Switch checked={isDarkMode} onChange={toggleDarkMode} />;
+    
+    </>
+    
   );
 };
 

src/components/shared/DarkModeToggle.tsx

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+import React from 'react';
+
+interface SwitchProps {
+  checked: boolean;
+  onChange: () => void;
+}
+
+const Switch: React.FC<SwitchProps> = ({ checked, onChange }) => {
+  return (
+    <StyledWrapper>
+      <label className="switch">
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={onChange}
+        />
+        <span className="slider round"></span>
+      </label>
+    </StyledWrapper>
+  );
+};
+
+const StyledWrapper = styled.div`
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 28px;
+  }
+
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #26c6da; /* sky-teal for light mode */
+    transition: 0.4s;
+    border-radius: 34px;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 22px;
+    width: 22px;
+    left: 3px;
+    bottom: 3px;
+    background-color: #fff176; /* yellowish sun knob */
+    transition: 0.4s;
+    border-radius: 50%;
+  }
+
+  input:checked + .slider {
+    background-color: #0d47a1; /* dark blue for dark mode */
+  }
+
+  input:checked + .slider:before {
+    transform: translateX(22px);
+    background-color: #90caf9; /* moon knob in light blue */
+  }
+`;
+
+export default Switch;