Added toggle for switching to dark mode and relevant functionality

package.json

@@ -42,6 +42,9 @@
     ]
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.0"
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5"
   }
 }

postcss.config.js

@@ -0,0 +1,7 @@
+// postcss.config.js
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    }
+  }

src/App.css

@@ -1,3 +1,8 @@
+/* ./your-css-folder/styles.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 .App {
   text-align: center;
 }

src/App.js

@@ -1,15 +1,63 @@
 import './App.css';
+import './tailwind.css';
 import {Route, Routes} from "react-router-dom";
+import React, { useState, useEffect } from "react";
 import {Home} from "./pages/Home";
 import {Games} from "./pages/Games";
 import {Activities} from "./pages/Activities";
 import {activities, games} from "./data/content";
 import {Navbar} from './components/common/Navbar';
 
 function App() {
+    const [darkMode, setDarkMode] = useState(() => {
+        const storedTheme = localStorage.getItem('theme');
+        return storedTheme ? storedTheme === 'dark' : false;
+      });
+
+      // Function to toggle the dark mode icon visibility
+      const toggleIconVisibility = (newDarkMode) => {
+        const darkIcon = document.getElementById('theme-toggle-dark-icon');
+        const lightIcon = document.getElementById('theme-toggle-light-icon');
+        if (darkIcon && lightIcon) {
+          darkIcon.style.display = newDarkMode ? 'inline' : 'none';
+          lightIcon.style.display = newDarkMode ? 'none' : 'inline';
+        }
+      };
+
+      const toggleDarkMode = () => {
+        const newDarkMode = !darkMode;
+        setDarkMode(newDarkMode);
+        localStorage.setItem('theme', newDarkMode ? 'dark' : 'light');
+
+        // Toggle the visibility of the dark and light mode icons
+        toggleIconVisibility(newDarkMode);
+
+        // Toggle dark mode class on the document element
+        if (newDarkMode) {
+          document.documentElement.classList.add('dark');
+        } else {
+          document.documentElement.classList.remove('dark');
+        }
+      };
+
+      useEffect(() => {
+        // Set the icon visibility when the component mounts
+        toggleIconVisibility(darkMode);
+
+        // Toggle dark mode class on the document element
+        if (darkMode) {
+          document.documentElement.classList.add('dark');
+        } else {
+          document.documentElement.classList.remove('dark');
+        }
+      }, [darkMode]);
+
+      // Apply different CSS classes based on the darkMode state
+      const containerClass = localStorage.theme === 'dark' ? 'bg-gray-900 dark' : 'bg-white';
+
     return (
-        <div className="App">
-            <Navbar/>
+        <div className={`${containerClass} App min-h-screen text-black dark:text-white`}>
+            <Navbar />
             <Routes>
                 <Route index element={<Home />} />
                 <Route exact path="/games" element={<Games />} />
@@ -29,6 +77,38 @@ function App() {
                     })
                 }
             </Routes>
+        <div className="absolute top-4 right-4">
+        <button
+        id="theme-toggle"
+        type="button"
+        class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
+        onClick={toggleDarkMode}>
+        <svg
+            id="theme-toggle-dark-icon"
+            class="w-5 h-5 hidden"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+            d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
+            ></path>
+        </svg>
+        <svg
+            id="theme-toggle-light-icon"
+            class="w-5 h-5 hidden"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+            d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            ></path>
+        </svg>
+        </button>
+        </div>
         </div>
     );
 }

src/pages/games/MagicSquares.js

@@ -171,7 +171,7 @@ export const MagicSquares = () => {
                                 <span
                                     key={idx}
                                     className={
-                                        focusCell === cell.index ? "grid-cell-focus" : "grid-cell"
+                                        focusCell === cell.index ? "grid-cell-focus dark:border-white" : "grid-cell dark:border-white"
                                     }
                                     onClick={() => {
                                         if (!winFlag) {

src/styles/components/common/Navbar.css

@@ -122,38 +122,8 @@
 }
 
 .indicator {
-    position: absolute;
-    top: -60%;
-    width: 70px;
-    height: 70px;
-    background: #26b4ec;
-    border-radius: 50%;
-    border: 6px solid var(--clr);
-    transition: 0.5s;
-}
-
-.indicator::before {
-    content: '';
-    position: absolute;
-    top: 60%;
-    left: -22px;
-    width: 23px;
-    height: 20px;
-    background-color: transparent;;
-    border-top-right-radius: 20px;
-    box-shadow: 0px -10px 0 0 var(--clr);
-}
-
-.indicator::after {
-    content: '';
-    position: absolute;
-    top: 60%;
-    right: -22px;
-    width: 23px;
-    height: 20px;
-    background-color: transparent;;
-    border-top-left-radius: 20px;
-    box-shadow: 0px -10px 0 0 var(--clr);
+  @apply absolute top-[-60%] w-[70px] h-[70px] border-[white] dark:border-[#111827] transition-[0.5s] rounded-[50%] border-[6px] border-solid before:content-[""] before:absolute before:left-[-22px] before:w-[23px] before:h-5 before:bg-transparent before:shadow-[0px_-10px_0_0_white] dark:before:shadow-[0px_-10px_0_0_#111827] before:rounded-tr-[20px] before:top-[60%] after:content-[""] after:absolute after:right-[-22px] after:w-[23px] after:h-5 after:bg-transparent after:shadow-[0px_-10px_0_0_white] dark:after:shadow-[0px_-10px_0_0_#111827] after:rounded-tl-[20px] after:top-[60%];
+  background: #26b4ec;
 }
 
 .navbar-root ul li:nth-child(1).active ~ .indicator {