Improve Light/Dark mode toggle

src/components/DarkModeToggle.tsx

@@ -1,14 +1,13 @@
 import { useTheme } from '../contexts/ThemeContext';
+import '../css/dark-mode-toggle.css';
 
 export default function DarkModeToggle() {
     const { theme, toggleTheme } = useTheme();
 
     return (
-        <input
-            type="checkbox"
-            checked={theme === 'dark'}
-            onChange={toggleTheme}
-            style={{ height: '20px', width: '20px' }}
-        />
+        <label className="theme-switch">
+            <input type="checkbox" checked={theme === 'dark'} onChange={toggleTheme} />
+            <span className="theme-slider" />
+        </label>
     );
 }

src/css/dark-mode-toggle.css

@@ -0,0 +1,43 @@
+.theme-switch {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    z-index: 9999;
+    display: inline-block;
+    width: 48px;
+    height: 26px;
+}
+
+.theme-switch input {
+    display: none;
+}
+
+.theme-slider {
+    position: absolute;
+    inset: 0;
+    cursor: pointer;
+    background-color: var(--primary-dark);
+    border-radius: 999px;
+    transition: 0.25s;
+}
+
+.theme-slider::before {
+    content: '';
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    left: 3px;
+    bottom: 3px;
+    background: var(--highlight);
+    border-radius: 50%;
+    transition: 0.25s;
+    box-shadow: 0 2px 6px var(--primary-extra-dark);
+}
+
+.theme-switch input:checked + .theme-slider {
+    background-color: var(--primary-light);
+}
+
+.theme-switch input:checked + .theme-slider::before {
+    transform: translateX(22px);
+}

src/pages/Testing.tsx

@@ -1,4 +1,4 @@
-import DarkModeToggle from '../components/DarkModeToggle.tsx';
+import DarkModeToggle from '../components/DarkModeToggle';
 
 export default function Testing() {
     return (