Fix: Enable Dark mode for Learn Git page

CONTRIBUTORS.md

@@ -132,6 +132,18 @@
           <sub><b>aachal28</b></sub>
         </a>
       </td>
+      <td align="center">
+        <a href="https://github.com/divy-03" target="_blank" rel="noopener noreferrer">
+          <img
+            src="https://avatars.githubusercontent.com/divy-03"
+            width="85"
+            alt="divy-03"
+          />
+          <br />
+          <sub><b>divy-03</b></sub>
+        </a>
+      </td>
+
     </tr>
   </tbody>
 </table>

community-website/components/DarkModeButton.tsx

@@ -5,28 +5,29 @@ import React, { useState, useEffect } from "react";
 import { DarkModeSwitch } from "react-toggle-dark-mode";
 
 export default function DarkModeButton() {
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, setDarkMode] = useState(() => {
+    if (typeof window !== "undefined") {
+      return (
+        localStorage.theme === "dark" ||
+        (!("theme" in localStorage) &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches)
+      );
+    }
+    return false;
+  });
 
   useEffect(() => {
-    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-      document.documentElement.classList.add('dark');
-      setDarkMode(true);
-    } else {
-      document.documentElement.classList.remove('dark');
-      setDarkMode(false);
-    }      
-}, [darkMode])
-
-  const toggleDarkMode = (checked: boolean) => {
-    if (checked) {
-      // Dark mode
+    if (darkMode) {
+      document.documentElement.classList.add("dark");
       localStorage.setItem("theme", "dark");
-      setDarkMode(checked);
     } else {
-      // Light mode
+      document.documentElement.classList.remove("dark");
       localStorage.setItem("theme", "light");
-      setDarkMode(checked);
     }
+  }, [darkMode]);
+
+  const toggleDarkMode = (checked: boolean) => {
+    setDarkMode(checked);
   };
 
   return (
@@ -37,4 +38,4 @@ export default function DarkModeButton() {
       sunColor={"white"}
     />
   );
-}
+}

community-website/pages/contributors.tsx

@@ -264,6 +264,25 @@ const Contributors: NextPage = () => {
                     </sub>
                   </a>
                 </td>
+                <td align="center" className={styles.tableData}>
+                  <a
+                    href="https://github.com/divy-03"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <img
+                      src="https://avatars.githubusercontent.com/divy-03"
+                      width="85"
+                      height="85"
+                      alt="divy-03"
+                      className={styles.profileImage}
+                    />
+                    <br />
+                    <sub>
+                      <b>divy-03</b>
+                    </sub>
+                  </a>
+                </td>
               </tr>
             </tbody>
           </table>

community-website/styles/LearnGitAndGitHub.module.css

@@ -244,3 +244,28 @@
     padding: 5px 10px;
   }
 }
+
+:global(.dark) .slide {
+  background: rgba(30, 30, 30, 0.95);
+  box-shadow: 0 20px 60px rgba(255, 255, 255, 0.1);
+  color: #f1f1f1;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+:global(.dark) .slide h2 {
+  color: #cbd5e0;
+}
+
+:global(.dark) .navBtn {
+  background: rgba(0, 0, 0, 0.2);
+  border: 2px solid white;
+  color: white;
+}
+
+:global(.dark) .navBtn:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+:global(.dark) .slide-counter {
+  background: rgba(0, 0, 0, 0.2);
+}