ADD: Color Now Modifiable for Dark/Light Mode

frontend/src/assets/styles/index.css

@@ -20,6 +20,27 @@
   background: #555;
 }
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 /* 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

frontend/src/assets/styles/sidebar.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root{
+
+    --sideNav-LightBG: white;
+    --sideNav-LightText: black;
+    
+    --sideNav-DarkBG: black;
+    --sideNav-DarkText: white;
+  }
+  

frontend/src/components/Layout/Sidebar.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import "../../assets/styles/sidebar.css"
 
 interface SideBarProps {
   extraClasses?: string;
@@ -6,6 +7,7 @@ interface SideBarProps {
 }
 
 const Sidebar: React.FC<SideBarProps> = ( {scrollActiveSideBar}) => {
+  const [thisTheme, setThisTheme] = useState(false);
   const [isCursorOnSidebar, setIsCursorOnSidebar] = useState(false);
 
   useEffect(() => {
@@ -19,7 +21,7 @@ const Sidebar: React.FC<SideBarProps> = ( {scrollActiveSideBar}) => {
     };
   }, [isCursorOnSidebar]);
 
-  return <div id="sidebar" className={"fixed top-0 left-0  w-[250px] bg-blue-400 text-white p-4 z-[90] h-screen overflow-y-auto scrollbar-hide"}
+  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)}
           onMouseLeave={() => setIsCursorOnSidebar(false)}
           style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>