UPDATE: Added Button Light/Dark Theme

frontend/src/assets/styles/sidebar.css

@@ -4,10 +4,10 @@
 
 :root{
 
-    --sideNav-LightBG: white;
-    --sideNav-LightText: black;
+    --sideBar-LightBG: white;
+    --sideBar-LightText: black;
     
-    --sideNav-DarkBG: black;
-    --sideNav-DarkText: white;
+    --sideBar-DarkBG: black;
+    --sideBar-DarkText: white;
   }
   

frontend/src/components/Layout/Sidebar.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import Theme from "./Theme";
 import "../../assets/styles/sidebar.css"
 
 interface SideBarProps {
@@ -21,10 +22,18 @@ const Sidebar: React.FC<SideBarProps> = ( {scrollActiveSideBar}) => {
     };
   }, [isCursorOnSidebar]);
 
-  return <div id="sidebar" className={"fixed top-0 left-0 bg-[var(--sideNav-LightBG)] w-[250px] text-sideBar-text p-4 z-[90] h-screen overflow-y-auto scrollbar-hide"}
-          onMouseEnter={() => setIsCursorOnSidebar(true)}
+  const handleTheme = () => {
+      setThisTheme(!thisTheme);
+  }
+
+  return <div id="sidebar"   className={`fixed top-0 left-0 w-[250px] ${
+    thisTheme
+      ? "bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)]"
+      : "bg-[var(--sideBar-DarkBG)] text-[var(--sideBar-DarkText)]"
+  } p-4 z-[90] h-screen overflow-y-auto scrollbar-hide`}
           onMouseLeave={() => setIsCursorOnSidebar(false)}
           style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
+          <Theme onClick={handleTheme}/>
     <ul className="overflow-y-auto">
       <li>1</li>
       <li>1</li>

frontend/src/components/Layout/Theme.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+interface ThemeProps {
+    children? : React.ReactNode;
+    onClick : () => void;
+}
+
+const Theme: React.FC<ThemeProps> = ( {onClick, children} ) => {
+  return (
+    <button 
+    onClick={onClick}
+    className={` p-2 text-[1.5rem] text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all`}>
+        Light/Dark
+    </button>
+  )
+}
+
+export default Theme

frontend/tailwind.config.js

@@ -49,11 +49,6 @@ export default {
           '100%': { transform: 'translate(0px, -5px) rotateX(0deg) rotateY(0deg)' }, 
         },
       },
-
-      colors: {
-        "sideBar-bg": "var(--sideBar-LightBG)",
-        "sideBar-text": "var(--sideBar-LightText)"
-      }
     },
     plugins: [
       require('tailwind-scrollbar-hide')