From c51945b6c6dcb59eedb7f5b4ecd5aa092f96ddde Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 28 Feb 2023 20:25:06 -0300
Subject: [PATCH 01/12] FlowPage refactored

---
 space_flow/src/App.tsx                                 |  4 ++--
 .../{connection => ConnectionLineComponent}/index.tsx  |  0
 .../{flowManager => components}/tabComponent/index.tsx |  2 +-
 .../tabsManagerComponent}/index.tsx                    | 10 ++++------
 space_flow/src/pages/FlowPage/index.tsx                |  4 ++--
 5 files changed, 9 insertions(+), 11 deletions(-)
 rename space_flow/src/pages/FlowPage/components/{connection => ConnectionLineComponent}/index.tsx (100%)
 rename space_flow/src/pages/FlowPage/{flowManager => components}/tabComponent/index.tsx (97%)
 rename space_flow/src/pages/FlowPage/{flowManager => components/tabsManagerComponent}/index.tsx (81%)

diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx
index 8787b2513..f40fc31ac 100644
--- a/space_flow/src/App.tsx
+++ b/space_flow/src/App.tsx
@@ -10,7 +10,7 @@ import { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
 import Sidebar from "./components/SidebarComponent";
 import Header from "./components/HeaderComponent";
-import { TabsManager } from "./pages/FlowPage/flowManager";
+import TabsManagerComponent from "./pages/FlowPage/components/tabsManagerComponent";
 
 export default function App() {
 	var _ = require("lodash");
@@ -105,7 +105,7 @@ export default function App() {
 				<main className="min-w-0 flex-1 border-t border-gray-200 flex">
 					{/* Primary column */}
 					<div className="w-full h-full">
-						<TabsManager></TabsManager>
+						<TabsManagerComponent></TabsManagerComponent>
 					</div>
 				</main>
 			</div>
diff --git a/space_flow/src/pages/FlowPage/components/connection/index.tsx b/space_flow/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
similarity index 100%
rename from space_flow/src/pages/FlowPage/components/connection/index.tsx
rename to space_flow/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
diff --git a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/components/tabComponent/index.tsx
similarity index 97%
rename from space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
rename to space_flow/src/pages/FlowPage/components/tabComponent/index.tsx
index 138d399b9..49a505a73 100644
--- a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/tabComponent/index.tsx
@@ -6,7 +6,7 @@ import { TabsContext } from "../../../../contexts/tabsContext";
 var _ = require("lodash");
 
 export default function TabComponent({ selected, flow, onClick }) {
-	const { removeFlow, updateFlow, flows, downloadFlow } =
+	const { removeFlow, updateFlow, flows } =
 		useContext(TabsContext);
 	const [isRename, setIsRename] = useState(false);
 	const [value, setValue] = useState("");
diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
similarity index 81%
rename from space_flow/src/pages/FlowPage/flowManager/index.tsx
rename to space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
index b444e3edc..4840a0778 100644
--- a/space_flow/src/pages/FlowPage/flowManager/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
@@ -1,12 +1,10 @@
 import { useContext, useEffect } from "react";
 import { ReactFlowProvider } from "reactflow";
-import FlowPage from "..";
-import { TabsContext } from "../../../contexts/tabsContext";
-import TabComponent from "./tabComponent";
-import { example } from "../../../data_assets/example";
-var _ = require("lodash");
+import TabComponent from "../tabComponent";
+import { TabsContext } from "../../../../contexts/tabsContext";
+import FlowPage from "../..";
 
-export function TabsManager() {
+export default function TabsManagerComponent() {
   const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
   useEffect(() => {
     if (flows.length === 0) {
diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx
index d0e4538d4..54c02fcd2 100644
--- a/space_flow/src/pages/FlowPage/index.tsx
+++ b/space_flow/src/pages/FlowPage/index.tsx
@@ -13,7 +13,6 @@ import { locationContext } from "../../contexts/locationContext";
 import ExtraSidebar from "./components/extraSidebarComponent";
 import Chat from "../../components/chatComponent";
 import GenericNode from "../../CustomNodes/GenericNode";
-import connection from "./components/connection";
 import ChatInputNode from "../../CustomNodes/ChatInputNode";
 import ChatOutputNode from "../../CustomNodes/ChatOutputNode";
 import InputNode from "../../CustomNodes/InputNode";
@@ -25,6 +24,7 @@ import {
 	ArrowDownTrayIcon,
 	ArrowUpTrayIcon,
 } from "@heroicons/react/24/outline";
+import ConnectionLineComponent from "./components/ConnectionLineComponent";
 
 const nodeTypes = {
 	genericNode: GenericNode,
@@ -170,7 +170,7 @@ export default function FlowPage({ flow }) {
 						onLoad={setReactFlowInstance}
 						onInit={setReactFlowInstance}
 						nodeTypes={nodeTypes}
-						connectionLineComponent={connection}
+						connectionLineComponent={ConnectionLineComponent}
 						onDragOver={onDragOver}
 						onDrop={onDrop}
 					>

From d530d04691dd96227b03715d5df22ccf85d87e2c Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 28 Feb 2023 21:47:20 -0300
Subject: [PATCH 02/12] darkMode context and button implemented

---
 space_flow/src/App.tsx                        |  5 +++-
 .../src/components/HeaderComponent/index.tsx  | 12 ++++++++-
 space_flow/src/contexts/darkContext.tsx       | 27 +++++++++++++++++++
 space_flow/src/contexts/index.tsx             | 21 ++++++++-------
 space_flow/tailwind.config.js                 |  1 +
 5 files changed, 55 insertions(+), 11 deletions(-)
 create mode 100644 space_flow/src/contexts/darkContext.tsx

diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx
index f40fc31ac..a4ee9227f 100644
--- a/space_flow/src/App.tsx
+++ b/space_flow/src/App.tsx
@@ -11,6 +11,7 @@ import { locationContext } from "./contexts/locationContext";
 import Sidebar from "./components/SidebarComponent";
 import Header from "./components/HeaderComponent";
 import TabsManagerComponent from "./pages/FlowPage/components/tabsManagerComponent";
+import { darkContext } from "./contexts/darkContext";
 
 export default function App() {
 	var _ = require("lodash");
@@ -24,6 +25,8 @@ export default function App() {
 		setIsStackedOpen(true);
 	}, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]);
 
+	const {dark} = useContext(darkContext);
+
 	const {
 		errorData,
 		errorOpen,
@@ -93,7 +96,7 @@ export default function App() {
 
 	return (
 		//need parent component with width and height
-		<div className="h-full flex flex-col">
+		<div className={(dark ? "dark " : "") + "h-full flex flex-col"}>
 			<div className="flex grow-0 shrink basis-auto">
 				<Header userNavigation={userNavigation} user={user}></Header>
 			</div>
diff --git a/space_flow/src/components/HeaderComponent/index.tsx b/space_flow/src/components/HeaderComponent/index.tsx
index fc6442161..8f0d40c52 100644
--- a/space_flow/src/components/HeaderComponent/index.tsx
+++ b/space_flow/src/components/HeaderComponent/index.tsx
@@ -4,6 +4,7 @@ import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
 import {
     BellIcon,
     MoonIcon,
+    SunIcon,
   } from '@heroicons/react/24/outline'
 import { classNames } from '../../utils'
 import { Link } from 'react-router-dom'
@@ -11,6 +12,7 @@ import Breadcrumb from '../breadcrumbComponent'
 import { alertContext } from '../../contexts/alertContext'
 import { useLayer,Arrow } from 'react-laag'
 import AlertDropdown from '../../alerts/alertDropDown'
+import { darkContext } from '../../contexts/darkContext'
 
 export default function Header({user, userNavigation}){
   const {notificationCenter, setNotificationCenter} = useContext(alertContext)
@@ -24,6 +26,7 @@ export default function Header({user, userNavigation}){
     containerOffset: 12,
     arrowOffset: 4,
   })
+  const {dark, setDark} = useContext(darkContext);
     return (
     <header className="relative flex h-16 w-full shrink-0 items-center bg-white">
         {/* Logo area */}
@@ -47,7 +50,14 @@ export default function Header({user, userNavigation}){
           </div>
           <div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
             <div className="flex items-center space-x-8">
-              <span className="inline-flex">
+              <span className="inline-flex gap-6">
+                <button className="text-gray-400 hover:text-gray-500 dark:text-slate-700 dark:hover:text-slate-600" onClick={()=>{setDark(!dark)}}>
+                  {dark ?
+                    <SunIcon className="h-6 w-6" />
+                  :
+                    <MoonIcon className="h-6 w-6" />
+                  }
+                </button>
                 <button type="button" {...triggerProps} className="-mx-1 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 relative" onClick={()=>{setNotificationCenter(false);setIsOpen(true)}}>
                   <span className="sr-only">View notifications</span>
                   {notificationCenter&&<div className='absolute top-[2px] w-2 h-2 rounded-full bg-red-600 right-[7px]'></div>}
diff --git a/space_flow/src/contexts/darkContext.tsx b/space_flow/src/contexts/darkContext.tsx
new file mode 100644
index 000000000..f64e0aa6e
--- /dev/null
+++ b/space_flow/src/contexts/darkContext.tsx
@@ -0,0 +1,27 @@
+import { createContext, useState } from "react";
+
+type darkContextType = {
+	dark: {};
+	setDark: (newState: {}) => void;
+};
+
+const initialValue = {
+	dark: {},
+	setDark: () => {},
+};
+
+export const darkContext = createContext<darkContextType>(initialValue);
+
+export function DarkProvider({ children }) {
+	const [dark, setDark] = useState(false);
+	return (
+		<darkContext.Provider
+			value={{
+				dark,
+				setDark,
+			}}
+		>
+			{children}
+		</darkContext.Provider>
+	);
+}
\ No newline at end of file
diff --git a/space_flow/src/contexts/index.tsx b/space_flow/src/contexts/index.tsx
index 8ad06ab0b..05213427b 100644
--- a/space_flow/src/contexts/index.tsx
+++ b/space_flow/src/contexts/index.tsx
@@ -1,4 +1,5 @@
 import { AlertProvider } from "./alertContext";
+import { DarkProvider } from "./darkContext";
 import { LocationProvider } from "./locationContext";
 import PopUpProvider from "./popUpContext";
 import { TabsProvider } from "./tabsContext";
@@ -8,15 +9,17 @@ export default function ContextWrapper({ children }) {
   //element to wrap all context
   return (
     <>
-      <LocationProvider>
-        <PopUpProvider>
-          <TypesProvider>
-            <TabsProvider>
-              <AlertProvider>{children}</AlertProvider>
-            </TabsProvider>
-          </TypesProvider>
-        </PopUpProvider>
-      </LocationProvider>
+      <DarkProvider>
+        <LocationProvider>
+          <PopUpProvider>
+            <TypesProvider>
+              <TabsProvider>
+                <AlertProvider>{children}</AlertProvider>
+              </TabsProvider>
+            </TypesProvider>
+          </PopUpProvider>
+        </LocationProvider>
+      </DarkProvider>
     </>
   );
 }
diff --git a/space_flow/tailwind.config.js b/space_flow/tailwind.config.js
index b2893659b..5cf6f2599 100644
--- a/space_flow/tailwind.config.js
+++ b/space_flow/tailwind.config.js
@@ -2,6 +2,7 @@
 const plugin = require('tailwindcss/plugin')
 module.exports = {
   content: ["./src/**/*.{js,ts,tsx,jsx}"],
+  darkMode: 'class',
   important:true,
   theme: {
     extend: {},

From b7cfbe6224e5daa5b372988cadd4558515c72faa Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 28 Feb 2023 21:48:59 -0300
Subject: [PATCH 03/12] header dark mode implemented

---
 space_flow/src/components/HeaderComponent/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/space_flow/src/components/HeaderComponent/index.tsx b/space_flow/src/components/HeaderComponent/index.tsx
index 8f0d40c52..58cf48633 100644
--- a/space_flow/src/components/HeaderComponent/index.tsx
+++ b/space_flow/src/components/HeaderComponent/index.tsx
@@ -28,7 +28,7 @@ export default function Header({user, userNavigation}){
   })
   const {dark, setDark} = useContext(darkContext);
     return (
-    <header className="relative flex h-16 w-full shrink-0 items-center bg-white">
+    <header className="relative flex h-16 w-full shrink-0 items-center bg-white dark:bg-slate-800">
         {/* Logo area */}
         <div className="static shrink-0">
           <a
@@ -51,14 +51,14 @@ export default function Header({user, userNavigation}){
           <div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
             <div className="flex items-center space-x-8">
               <span className="inline-flex gap-6">
-                <button className="text-gray-400 hover:text-gray-500 dark:text-slate-700 dark:hover:text-slate-600" onClick={()=>{setDark(!dark)}}>
+                <button className="text-gray-400 hover:text-gray-500 " onClick={()=>{setDark(!dark)}}>
                   {dark ?
                     <SunIcon className="h-6 w-6" />
                   :
                     <MoonIcon className="h-6 w-6" />
                   }
                 </button>
-                <button type="button" {...triggerProps} className="-mx-1 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 relative" onClick={()=>{setNotificationCenter(false);setIsOpen(true)}}>
+                <button type="button" {...triggerProps} className="-mx-1 rounded-full p-1 text-gray-400 hover:text-gray-500 relative" onClick={()=>{setNotificationCenter(false);setIsOpen(true)}}>
                   <span className="sr-only">View notifications</span>
                   {notificationCenter&&<div className='absolute top-[2px] w-2 h-2 rounded-full bg-red-600 right-[7px]'></div>}
                   

From a14a7dc9a2078ee89ca2462c3139b8586d9ebb4f Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 28 Feb 2023 21:54:34 -0300
Subject: [PATCH 04/12] flow background and buttons dark mode applied

---
 space_flow/src/pages/FlowPage/index.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx
index 54c02fcd2..e7c812449 100644
--- a/space_flow/src/pages/FlowPage/index.tsx
+++ b/space_flow/src/pages/FlowPage/index.tsx
@@ -174,17 +174,15 @@ export default function FlowPage({ flow }) {
 						onDragOver={onDragOver}
 						onDrop={onDrop}
 					>
-						<Background />
-						<Controls>
+						<Background className="dark:bg-slate-900"/>
+						<Controls className="[&>button]:text-black  [&>button]:dark:bg-slate-800 hover:[&>button]:dark:bg-slate-700 [&>button]:dark:text-slate-400 [&>button]:dark:fill-slate-400 [&>button]:dark:border-slate-600">
 							<ControlButton
-								className="text-black hover:text-blue-500"
 								onClick={() => uploadFlow()}
 							>
 								<ArrowUpTrayIcon />
 							</ControlButton>
 
 							<ControlButton
-								className="text-black hover:text-blue-500"
 								onClick={() => downloadFlow()}
 							>
 								<ArrowDownTrayIcon />

From df712f0abbce746f27a830e6588e1263092c68e1 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 28 Feb 2023 22:04:16 -0300
Subject: [PATCH 05/12] tabs dark mode implemented

---
 space_flow/src/App.tsx                               |  2 +-
 .../pages/FlowPage/components/tabComponent/index.tsx | 12 ++++++------
 .../components/tabsManagerComponent/index.tsx        |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx
index a4ee9227f..3cfb3a582 100644
--- a/space_flow/src/App.tsx
+++ b/space_flow/src/App.tsx
@@ -105,7 +105,7 @@ export default function App() {
 				<ExtraSidebar />
 
 				{/* Main area */}
-				<main className="min-w-0 flex-1 border-t border-gray-200 flex">
+				<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-slate-700 flex">
 					{/* Primary column */}
 					<div className="w-full h-full">
 						<TabsManagerComponent></TabsManagerComponent>
diff --git a/space_flow/src/pages/FlowPage/components/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/components/tabComponent/index.tsx
index 49a505a73..6eb76881d 100644
--- a/space_flow/src/pages/FlowPage/components/tabComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/tabComponent/index.tsx
@@ -15,7 +15,7 @@ export default function TabComponent({ selected, flow, onClick }) {
 			{flow ? (
 				!selected ? (
 					<div
-						className="flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-t border-t-transparent border-gray-300 -ml-px"
+						className="dark:text-white flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-x-gray-300 dark:border-x-slate-600 -ml-px"
 						onClick={onClick}
 					>
 						{flow.name}
@@ -25,11 +25,11 @@ export default function TabComponent({ selected, flow, onClick }) {
 								removeFlow(flow.id);
 							}}
 						>
-							<XMarkIcon className="h-4 hover:bg-white rounded-full" />
+							<XMarkIcon className="h-4 hover:bg-white dark:hover:bg-slate-600 rounded-full" />
 						</button>
 					</div>
 				) : (
-					<div className="bg-white flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 px-4 py-1.5 rounded-t-xl -ml-px">
+					<div className="bg-white dark:text-white dark:bg-slate-700 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-slate-600 px-4 py-1.5 rounded-t-xl -ml-px">
 						{isRename ? (
 							<input
 								autoFocus
@@ -70,7 +70,7 @@ export default function TabComponent({ selected, flow, onClick }) {
 							}}
 						>
 							{flows.length > 1 && (
-								<XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />
+								<XMarkIcon className="h-4 hover:bg-gray-100 dark:hover:bg-slate-600 rounded-full" />
 							)}
 						</button>
 					</div>
@@ -78,10 +78,10 @@ export default function TabComponent({ selected, flow, onClick }) {
 			) : (
 				<div className="h-full py-1.5 flex justify-center items-center">
 					<button
-						className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-gray-300 -ml-px border-t border-t-transparent"
+						className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-x-gray-300 dark:border-x-slate-600 dark:text-white -ml-px"
 						onClick={onClick}
 					>
-						<PlusIcon className="h-5 rounded-full hover:bg-white" />
+						<PlusIcon className="h-5 rounded-full hover:bg-white dark:hover:bg-slate-600" />
 					</button>
 				</div>
 			)}
diff --git a/space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
index 4840a0778..81f19a69d 100644
--- a/space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
@@ -14,7 +14,7 @@ export default function TabsManagerComponent() {
 
   return (
     <div className="h-full w-full flex flex-col">
-      <div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 px-2">
+      <div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-slate-800 px-2">
         {flows.map((flow, index) => {
           return (
             <TabComponent

From 7742859c1276dcbfab708f1c39306f9509960dcd Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 28 Feb 2023 22:41:40 -0300
Subject: [PATCH 06/12] sidebar dark mode implemented

---
 .../ExtraSidebarComponent/index.tsx           |  6 ++---
 .../src/components/SidebarComponent/index.tsx |  2 +-
 .../src/components/chatComponent/index.tsx    | 24 +++++++++----------
 .../components/DisclosureComponent/index.tsx  |  8 +++----
 .../extraSidebarComponent/index.tsx           | 10 ++++----
 5 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/space_flow/src/components/ExtraSidebarComponent/index.tsx b/space_flow/src/components/ExtraSidebarComponent/index.tsx
index 8f2220cd0..1f16098e0 100644
--- a/space_flow/src/components/ExtraSidebarComponent/index.tsx
+++ b/space_flow/src/components/ExtraSidebarComponent/index.tsx
@@ -20,11 +20,11 @@ export default function ExtraSidebar() {
       <aside
         className={` ${
           isStackedOpen ? "w-60" : "w-0 "
-        } flex-shrink-0 flex overflow-hidden flex-col border-r transition-all duration-500`}
+        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-slate-700 transition-all duration-500`}
       >
-        <div className="w-60 overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
+        <div className="w-60 dark:bg-slate-800 border dark:border-slate-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
           <div className="flex pt-4 px-4 justify-between align-middle w-full">
-            <span className="text-gray-900 text-lg ml-2 font-semibold">
+            <span className="text-gray-900 dark:text-white text-lg ml-2 font-semibold">
               {extraNavigation.title}
             </span>
             <button
diff --git a/space_flow/src/components/SidebarComponent/index.tsx b/space_flow/src/components/SidebarComponent/index.tsx
index 518b985b4..8d413ae98 100644
--- a/space_flow/src/components/SidebarComponent/index.tsx
+++ b/space_flow/src/components/SidebarComponent/index.tsx
@@ -21,7 +21,7 @@ export default function Sidebar() {
       <div className="w-20 h-full">
         <nav
           aria-label="Sidebar"
-          className="h-full overflow-y-auto bg-gray-800"
+          className="h-full overflow-y-auto bg-slate-800 dark:bg-slate-900"
         >
           <div className="flex flex-col h-full justify-between">
             <div className="relative flex w-20 flex-col space-y-3 p-3">
diff --git a/space_flow/src/components/chatComponent/index.tsx b/space_flow/src/components/chatComponent/index.tsx
index 6a31d6560..9668346b0 100644
--- a/space_flow/src/components/chatComponent/index.tsx
+++ b/space_flow/src/components/chatComponent/index.tsx
@@ -88,9 +88,9 @@ export default function Chat({flow, reactFlowInstance }) {
         leaveTo="translate-y-96"
       >
         <div className="w-[400px] absolute bottom-0 right-6">
-          <div className="border h-full rounded-xl rounded-b-none bg-white shadow">
-            <div className="flex justify-between items-center px-5 py-3 border-b">
-              <div className="flex gap-3 text-xl font-medium items-center">
+          <div className="border dark:border-slate-700 h-full rounded-xl rounded-b-none bg-white dark:bg-slate-800 shadow">
+            <div className="flex justify-between items-center px-5 py-3 border-b dark:border-b-slate-700">
+              <div className="flex gap-3 text-xl dark:text-white font-medium items-center">
                 <Bars3CenterLeftIcon className="h-8 w-8 mt-1" style={{color: nodeColors['chat']}} />
                 Chat
               </div>
@@ -99,21 +99,21 @@ export default function Chat({flow, reactFlowInstance }) {
                   setOpen(false);
                 }}
               >
-                <XMarkIcon className="h-6 w-6 text-gray-600" />
+                <XMarkIcon className="h-6 w-6 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
               </button>
             </div>
-            <div  className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto scrollbar-hide flex-col bg-gray-50 p-3 py-5">
+            <div  className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto scrollbar-hide flex-col bg-gray-50 dark:bg-slate-900 p-3 py-5">
               {chatHistory.map((c, i) => (
                 <div key={i}>
-                  {c.isSend ? (
+                  {!c.isSend ? (
                     <div className="w-full text-end">
-                      <div className="text-start inline-block bg-gray-200 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tr-none">
+                      <div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block text-white rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tr-none">
                         {c.message}
                       </div>
                     </div>
                   ) : (
                     <div className="w-full text-start">
-                      <div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white font-normal rounded-tl-none">
+                      <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-slate-700 bg-gray-200 font-normal rounded-tl-none">
                         {c.message}
                       </div>
                     </div>
@@ -122,7 +122,7 @@ export default function Chat({flow, reactFlowInstance }) {
               ))}
               <div ref={ref}></div>
             </div>
-            <div className="w-full bg-white border-t flex items-center justify-between p-3">
+            <div className="w-full bg-white dark:bg-slate-800 border-t dark:border-t-slate-600 flex items-center justify-between p-3">
               <div className="relative w-full mt-1 rounded-md shadow-sm">
                 <input
                 onKeyDown={(event)=>{
@@ -135,7 +135,7 @@ export default function Chat({flow, reactFlowInstance }) {
                   onChange={(e) => {
                     setChatValue(e.target.value);
                   }}
-                  className="form-input block w-full rounded-md border-gray-300 pr-10 sm:text-sm"
+                  className="form-input block w-full rounded-md border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-white pr-10 sm:text-sm"
                   placeholder="Send a message..."
                 />
                 <div className="absolute inset-y-0 right-0 flex items-center pr-3">
@@ -143,7 +143,7 @@ export default function Chat({flow, reactFlowInstance }) {
                     onClick={() => sendMessage()}
                   >
                     <PaperAirplaneIcon
-                      className="h-5 w-5 text-gray-400 hover:text-gray-600"
+                      className="h-5 w-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                       aria-hidden="true"
                     />
                   </button>
@@ -164,7 +164,7 @@ export default function Chat({flow, reactFlowInstance }) {
         leaveTo="translate-y-96"
       >
         <div className="absolute bottom-0 right-6">
-          <div className="border flex justify-center align-center py-2 px-4 rounded-xl rounded-b-none bg-white shadow">
+          <div className="border flex justify-center align-center py-2 px-4 rounded-xl rounded-b-none bg-white dark:bg-slate-800 dark:border-slate-600 dark:text-white shadow">
             <button
               onClick={() => {
                 setOpen(true);
diff --git a/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 3b7b37e20..78f8b1c4c 100644
--- a/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -19,10 +19,10 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <div className="select-none bg-gray-50 w-full flex justify-between items-center -mt-px px-3 py-2 border border-gray-200">
+            <div className="select-none bg-gray-50 dark:bg-slate-700 dark:border-y-slate-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
               <div className="flex gap-4">
-                <Icon className="w-6 text-gray-800" />
-                <span className="flex items-center text-sm text-gray-800 font-medium">
+                <Icon className="w-6 text-gray-800 dark:text-white" />
+                <span className="flex items-center text-sm text-gray-800 dark:text-white font-medium">
                   {title}
                 </span>
               </div>
@@ -36,7 +36,7 @@ export default function DisclosureComponent({
                   <ChevronRightIcon
                     className={`${
                       open ? "rotate-90 transform" : ""
-                    } h-5 w-5 text-gray-800`}
+                    } h-5 w-5 text-gray-800 dark:text-white`}
                   />
                 </Disclosure.Button>
               </div>
diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 980902c22..26df86484 100644
--- a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -70,7 +70,7 @@ export default function ExtraSidebar() {
                   }
                 >
                   <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
-                    <span className="text-black w-36 truncate">{t}</span>
+                    <span className="text-black dark:text-white w-36 truncate">{t}</span>
                     <Bars2Icon className="w-6 h-6 text-gray-400" />
                   </div>
                 </div>
@@ -95,7 +95,7 @@ export default function ExtraSidebar() {
               }
             >
               <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
-                <span className="text-black w-36 truncate">Chat Input</span>
+                <span className="text-black dark:text-white w-36 truncate">Chat Input</span>
                 <Bars2Icon className="w-6 h-6 text-gray-400" />
               </div>
             </div>
@@ -112,7 +112,7 @@ export default function ExtraSidebar() {
               }
             >
               <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
-                <span className="text-black w-36 truncate">Chat Output</span>
+                <span className="text-black dark:text-white w-36 truncate">Chat Output</span>
                 <Bars2Icon className="w-6 h-6 text-gray-400" />
               </div>
             </div>
@@ -135,7 +135,7 @@ export default function ExtraSidebar() {
               }
             >
               <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
-                <span className="text-black w-36 truncate">String</span>
+                <span className="text-black dark:text-white w-36 truncate">String</span>
                 <Bars2Icon className="w-6 h-6 text-gray-400" />
               </div>
             </div>
@@ -152,7 +152,7 @@ export default function ExtraSidebar() {
               }
             >
               <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
-                <span className="text-black w-36 truncate">Boolean</span>
+                <span className="text-black dark:text-white w-36 truncate">Boolean</span>
                 <Bars2Icon className="w-6 h-6 text-gray-400" />
               </div>
             </div>

From 9dfb915dd9324fae97ba73028697c93b8941de39 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 28 Feb 2023 22:58:21 -0300
Subject: [PATCH 07/12] generic node dark mode implemented

---
 .../components/parameterComponent/index.tsx            |  4 ++--
 space_flow/src/CustomNodes/GenericNode/index.tsx       | 10 +++++-----
 space_flow/src/components/inputComponent/index.tsx     |  2 +-
 space_flow/src/components/toggleComponent/index.tsx    |  6 +++---
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 6faf594f8..fa86811b2 100644
--- a/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -43,7 +43,7 @@ export default function ParameterComponent({
   let disabled = reactFlowInstance?.getEdges().some((e) => (e.targetHandle === id)) ?? false;
 
   return (
-    <div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 mt-1 px-5 py-2">
+    <div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-slate-800 dark:text-white mt-1 px-5 py-2">
       <>
         <div className="text-sm truncate">{title}<span className="text-red-600">{required ? " *" : ""}</span></div>
         <Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
@@ -56,7 +56,7 @@ export default function ParameterComponent({
             }
             className={
               (left ? "-ml-0.5 " : "-mr-0.5 ") +
-              "w-3 h-3 rounded-full border-2 bg-white"
+              "w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"
             }
             style={{
               borderColor: color,
diff --git a/space_flow/src/CustomNodes/GenericNode/index.tsx b/space_flow/src/CustomNodes/GenericNode/index.tsx
index c4490c0e2..d046746ab 100644
--- a/space_flow/src/CustomNodes/GenericNode/index.tsx
+++ b/space_flow/src/CustomNodes/GenericNode/index.tsx
@@ -16,8 +16,8 @@ export default function GenericNode({ data }) {
 
 
   return (
-    <div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
-      <div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 border-b ">
+    <div className="prompt-node relative bg-white dark:bg-slate-900 w-96 rounded-lg solid border dark:border-slate-700 flex flex-col justify-center">
+      <div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-slate-800 border-b dark:border-b-slate-700 ">
         <div className="w-full flex items-center truncate gap-4 text-lg">
           <Icon
             className="w-10 h-10 p-1 rounded"
@@ -26,7 +26,7 @@ export default function GenericNode({ data }) {
           <div className="truncate">{data.type}</div>
         </div>
         <button onClick={() => {deleteNode(data.id)}}>
-          <TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
+          <TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-slate-500 dark:hover:text-red-500"></TrashIcon>
         </button>
       </div>
 
@@ -41,7 +41,7 @@ export default function GenericNode({ data }) {
             .map((t, idx) => (
               <div key={idx}>
                 {idx === 0 ? (
-                  <div className="px-5 py-2 mt-2 text-center">Inputs:</div>
+                  <div className="px-5 py-2 mt-2 dark:text-white text-center">Inputs:</div>
                 ) : (
                   <></>
                 )}
@@ -73,7 +73,7 @@ export default function GenericNode({ data }) {
                 )}
               </div>
             ))}
-          <div className="px-5 py-2 mt-2 text-center">Output:</div>
+          <div className="px-5 py-2 mt-2 dark:text-white text-center">Output:</div>
           <ParameterComponent
             data={data}
             color={nodeColors[types[data.type]]}
diff --git a/space_flow/src/components/inputComponent/index.tsx b/space_flow/src/components/inputComponent/index.tsx
index 38bb559a0..87ea3bb06 100644
--- a/space_flow/src/components/inputComponent/index.tsx
+++ b/space_flow/src/components/inputComponent/index.tsx
@@ -13,7 +13,7 @@ export default function InputComponent({value, onChange, disabled}){
             <input
             type="text"
             value={myValue}
-            className={"block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200" : "")}
+            className={"block w-full form-input dark:bg-slate-900 dark:border-slate-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200 dark:bg-slate-700" : "")}
             placeholder="Type a text"
             onChange={(e) => {
                 setMyValue(e.target.value);
diff --git a/space_flow/src/components/toggleComponent/index.tsx b/space_flow/src/components/toggleComponent/index.tsx
index 60def65e1..744ee535f 100644
--- a/space_flow/src/components/toggleComponent/index.tsx
+++ b/space_flow/src/components/toggleComponent/index.tsx
@@ -16,15 +16,15 @@ export default function ToggleComponent({ enabled, setEnabled, disabled }) {
           setEnabled(x);
         }}
         className={classNames(
-          enabled ? "bg-indigo-600" : "bg-gray-200",
-          "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+          enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-slate-600",
+          "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out "
         )}
       >
         <span className="sr-only">Use setting</span>
         <span
           className={classNames(
             enabled ? "translate-x-5" : "translate-x-0",
-            "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out", disabled ? "bg-gray-200" : "bg-white"
+            "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out", disabled ? "bg-gray-200 dark:bg-slate-600" : "bg-white dark:bg-slate-800"
           )}
         >
           <span

From 60002c3eb753d318092db3c35a06e79820a4dfa8 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 28 Feb 2023 23:01:02 -0300
Subject: [PATCH 08/12] fixed fields at generic node

---
 .../components/textAreaComponent/index.tsx    |  2 +-
 .../extraSidebarComponent/index.tsx           | 20 +++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/space_flow/src/components/textAreaComponent/index.tsx b/space_flow/src/components/textAreaComponent/index.tsx
index 258054919..31aba2c64 100644
--- a/space_flow/src/components/textAreaComponent/index.tsx
+++ b/space_flow/src/components/textAreaComponent/index.tsx
@@ -17,7 +17,7 @@ export default function TextAreaComponent({ value, onChange, disabled }) {
       <div className="w-full flex items-center gap-3">
         <span
           className={
-            "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+            "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-slate-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
             (disabled ? " bg-gray-200" : "")
           }
         >
diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 26df86484..83ac8be87 100644
--- a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -69,9 +69,9 @@ export default function ExtraSidebar() {
                     })
                   }
                 >
-                  <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
+                  <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-slate-600 border-l-0 rounded-md rounded-l-none border-2">
                     <span className="text-black dark:text-white w-36 truncate">{t}</span>
-                    <Bars2Icon className="w-6 h-6 text-gray-400" />
+                    <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
                   </div>
                 </div>
               </div>
@@ -94,9 +94,9 @@ export default function ExtraSidebar() {
                 })
               }
             >
-              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
+              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-slate-600 border-l-0 rounded-md rounded-l-none border-2">
                 <span className="text-black dark:text-white w-36 truncate">Chat Input</span>
-                <Bars2Icon className="w-6 h-6 text-gray-400" />
+                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
               </div>
             </div>
           </div>
@@ -111,9 +111,9 @@ export default function ExtraSidebar() {
                 })
               }
             >
-              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
+              <div className="flex w-full justify-between text-sm px-4 py-3 items-center dark:border-slate-600 border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
                 <span className="text-black dark:text-white w-36 truncate">Chat Output</span>
-                <Bars2Icon className="w-6 h-6 text-gray-400" />
+                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
               </div>
             </div>
           </div>
@@ -134,9 +134,9 @@ export default function ExtraSidebar() {
                 })
               }
             >
-              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
+              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed dark:border-slate-600 border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
                 <span className="text-black dark:text-white w-36 truncate">String</span>
-                <Bars2Icon className="w-6 h-6 text-gray-400" />
+                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
               </div>
             </div>
           </div>
@@ -151,9 +151,9 @@ export default function ExtraSidebar() {
                 })
               }
             >
-              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
+              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed dark:border-slate-600 border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
                 <span className="text-black dark:text-white w-36 truncate">Boolean</span>
-                <Bars2Icon className="w-6 h-6 text-gray-400" />
+                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
               </div>
             </div>
           </div>

From 7f31ae6a7e8aa7a5650ef63e14f89602765e072c Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 2 Mar 2023 09:07:03 -0300
Subject: [PATCH 09/12] String and boolean nodes dark mode implemented

---
 space_flow/src/CustomNodes/BooleanNode/index.tsx | 10 ++++++----
 space_flow/src/CustomNodes/InputNode/index.tsx   | 16 ++++++++++------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/space_flow/src/CustomNodes/BooleanNode/index.tsx b/space_flow/src/CustomNodes/BooleanNode/index.tsx
index 733d657f6..db4fd4e4f 100644
--- a/space_flow/src/CustomNodes/BooleanNode/index.tsx
+++ b/space_flow/src/CustomNodes/BooleanNode/index.tsx
@@ -10,8 +10,8 @@ export default function BooleanNode({ data }) {
   const [enabled, setEnabled] = useState(false);
   const {types, deleteNode} = useContext(typesContext);
   return (
-    <div className="prompt-node relative bg-white rounded-lg solid border flex flex-col justify-center">
-      <div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 border-b ">
+    <div className="prompt-node relative bg-white dark:bg-slate-900 rounded-lg solid border dark:border-slate-700 flex flex-col justify-center">
+      <div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 dark:bg-slate-800 dark:text-white dark:border-b-slate-700 border-b ">
         <div className="flex items-center gap-4 text-lg">
           <CheckCircleIcon
             className="w-10 h-10 p-1 rounded"
@@ -35,8 +35,10 @@ export default function BooleanNode({ data }) {
         position={Position.Right}
         id={data.type}
         isValidConnection={(connection) => isValidConnection(data,connection)}
-        className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
-        style={{ borderLeftColor: nodeColors[types[data.type]] }}
+        className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
+        style={{
+          borderColor: nodeColors[types[data.type]],
+        }}
       ></Handle>
     </div>
   );
diff --git a/space_flow/src/CustomNodes/InputNode/index.tsx b/space_flow/src/CustomNodes/InputNode/index.tsx
index a6aa084bd..21031049f 100644
--- a/space_flow/src/CustomNodes/InputNode/index.tsx
+++ b/space_flow/src/CustomNodes/InputNode/index.tsx
@@ -15,7 +15,7 @@ import TextAreaComponent from "../../components/textAreaComponent";
 export default function InputNode({ data }) {
   const {types, deleteNode} = useContext(typesContext);
   return (
-    <div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
+    <div className="prompt-node relative bg-white dark:bg-slate-900 w-96 rounded-lg solid border dark:border-slate-700 flex flex-col justify-center">
       <Tooltip title="Prefix: str">
         <Handle
           type="target"
@@ -24,12 +24,14 @@ export default function InputNode({ data }) {
           isValidConnection={(connection) =>
             isValidConnection(data, connection)
           }
-          className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
-          style={{ borderLeftColor: nodeColors[types[data.type]] }}
+          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
+          style={{
+            borderColor: nodeColors[types[data.type]],
+          }}
         ></Handle>
       </Tooltip>
 
-      <div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 border-b ">
+      <div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 dark:bg-slate-800 dark:text-white border-b dark:border-b-slate-700 ">
         <div className="flex items-center gap-4 text-lg">
           <Bars3CenterLeftIcon
             className="w-10 h-10 p-1 rounded"
@@ -60,8 +62,10 @@ export default function InputNode({ data }) {
         position={Position.Right}
         id={data.type}
         isValidConnection={(connection) => isValidConnection(data, connection)}
-        className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
-        style={{ borderLeftColor: nodeColors[types[data.type]] }}
+        className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
+        style={{
+          borderColor: nodeColors[types[data.type]],
+        }}
       ></Handle>
     </div>
   );

From 6006905504079ec38c624b3bbaa76a90510cae4e Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 2 Mar 2023 09:09:01 -0300
Subject: [PATCH 10/12] chat nodes dark mode implemented

---
 space_flow/src/CustomNodes/ChatInputNode/index.tsx  | 6 +++---
 space_flow/src/CustomNodes/ChatOutputNode/index.tsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/space_flow/src/CustomNodes/ChatInputNode/index.tsx b/space_flow/src/CustomNodes/ChatInputNode/index.tsx
index db0852907..e74071bb4 100644
--- a/space_flow/src/CustomNodes/ChatInputNode/index.tsx
+++ b/space_flow/src/CustomNodes/ChatInputNode/index.tsx
@@ -13,7 +13,7 @@ export default function ChatInputNode({ data }) {
   const { types } = useContext(typesContext);
   return (
     <div
-      className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50"
+      className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-slate-800 dark:border-slate-700"
       style={{ color: nodeColors[types[data.type]] }}
     >
       <Tooltip title="Prefix: str">
@@ -24,7 +24,7 @@ export default function ChatInputNode({ data }) {
           }
           position={Position.Left}
           id={"str|Prefix|" + data.id}
-          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white"}
+          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
           style={{
             borderColor: nodeColors[types[data.type]],
           }}
@@ -38,7 +38,7 @@ export default function ChatInputNode({ data }) {
           }
           position={Position.Right}
           id={"str|str|" + data.id}
-          className={"-mr-0.5  w-3 h-3 rounded-full border-2 bg-white"}
+          className={"-mr-0.5  w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
           style={{
             borderColor: nodeColors[types[data.type]],
           }}
diff --git a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
index b5445860d..c8ffbab79 100644
--- a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
+++ b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
@@ -9,14 +9,14 @@ import { typesContext } from "../../contexts/typesContext";
 export default function ChatOutputNode({ data }) {
   const {types} = useContext(typesContext);
   return (
-    <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors[types[data.type]]}}>
+    <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-slate-800 dark:border-slate-700" style={{color: nodeColors[types[data.type]]}}>
       <Tooltip title="Message: str">
         <Handle
           type="target"
           isValidConnection={(connection) => isValidConnection(data,connection)}
           position={Position.Left}
           id={"str|output|"+data.id}
-          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white"
+          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"
           }
           style={{
             borderColor: nodeColors[types[data.type]],

From e0ffb68cf0e2f88cb8c8bbf1aba3867c5c505498 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 2 Mar 2023 09:20:06 -0300
Subject: [PATCH 11/12] modal dark mode implemented

---
 space_flow/public/index.html                  |  2 +-
 space_flow/src/App.tsx                        |  2 +-
 space_flow/src/contexts/darkContext.tsx       |  9 ++++++++-
 space_flow/src/modals/textAreaModal/index.tsx | 18 +++++++++---------
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/space_flow/public/index.html b/space_flow/public/index.html
index 52741e97f..e9ecbe8ec 100644
--- a/space_flow/public/index.html
+++ b/space_flow/public/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
-<body style="width: 100%; height:100%">
+<body id='body' style="width: 100%; height:100%">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div style="width: 100vw; height:100vh" id='root'>
     </div>
diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx
index 3cfb3a582..cca4e3df1 100644
--- a/space_flow/src/App.tsx
+++ b/space_flow/src/App.tsx
@@ -96,7 +96,7 @@ export default function App() {
 
 	return (
 		//need parent component with width and height
-		<div className={(dark ? "dark " : "") + "h-full flex flex-col"}>
+		<div className="h-full flex flex-col">
 			<div className="flex grow-0 shrink basis-auto">
 				<Header userNavigation={userNavigation} user={user}></Header>
 			</div>
diff --git a/space_flow/src/contexts/darkContext.tsx b/space_flow/src/contexts/darkContext.tsx
index f64e0aa6e..fcdb73cc4 100644
--- a/space_flow/src/contexts/darkContext.tsx
+++ b/space_flow/src/contexts/darkContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, useState } from "react";
+import { createContext, useEffect, useState } from "react";
 
 type darkContextType = {
 	dark: {};
@@ -14,6 +14,13 @@ export const darkContext = createContext<darkContextType>(initialValue);
 
 export function DarkProvider({ children }) {
 	const [dark, setDark] = useState(false);
+	useEffect(()=>{
+		if(dark){
+			document.getElementById("body").classList.add("dark");
+		} else {
+			document.getElementById("body").classList.remove("dark");
+		}
+	}, [dark])
 	return (
 		<darkContext.Provider
 			value={{
diff --git a/space_flow/src/modals/textAreaModal/index.tsx b/space_flow/src/modals/textAreaModal/index.tsx
index 3a15c4647..a94571c6f 100644
--- a/space_flow/src/modals/textAreaModal/index.tsx
+++ b/space_flow/src/modals/textAreaModal/index.tsx
@@ -32,7 +32,7 @@ export default function TextAreaModal({value, setValue}){
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-gray-500 dark:bg-slate-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -46,11 +46,11 @@ export default function TextAreaModal({value, setValue}){
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 w-[700px]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-slate-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                     onClick={() => {
                       setModalOpen(false);
                     }}
@@ -61,7 +61,7 @@ export default function TextAreaModal({value, setValue}){
                 </div>
                 <div className="h-full w-full flex flex-col justify-center items-center">
                   <div className="flex w-full pb-6 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-8 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto mt-8 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-slate-900 sm:mx-0 sm:h-10 sm:w-10">
                       <ClipboardDocumentListIcon
                         className="h-6 w-6 text-blue-600"
                         aria-hidden="true"
@@ -70,20 +70,20 @@ export default function TextAreaModal({value, setValue}){
                     <div className="mt-10 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-gray-900"
+                        className="text-lg font-medium dark:text-white leading-6 text-gray-900"
                       >
                         Edit text
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-gray-200 p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-gray-200 dark:bg-slate-900 p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white shadow">
-                        <textarea ref={ref} className="form-input h-full w-full rounded-lg border-gray-300" value={myValue} onChange={(e) => {setMyValue(e.target.value); setValue(e.target.value)}}/>
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-slate-800 shadow">
+                        <textarea ref={ref} className="form-input h-full w-full rounded-lg border-gray-300 dark:border-slate-700 dark:bg-slate-900 dark:text-white" value={myValue} onChange={(e) => {setMyValue(e.target.value); setValue(e.target.value)}}/>
                       </div>
                     </div>
                   </div>
-                  <div className="bg-gray-200 w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-gray-200 dark:bg-slate-900 w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
                       className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"

From 9c727fdb24ddfc4b978c4b29460b08e6b2af9f2a Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 2 Mar 2023 09:22:16 -0300
Subject: [PATCH 12/12] changed color slate to gray

---
 space_flow/src/App.tsx                        |  2 +-
 .../src/CustomNodes/BooleanNode/index.tsx     |  6 +++---
 .../src/CustomNodes/ChatInputNode/index.tsx   |  6 +++---
 .../src/CustomNodes/ChatOutputNode/index.tsx  |  4 ++--
 .../components/parameterComponent/index.tsx   |  4 ++--
 .../src/CustomNodes/GenericNode/index.tsx     |  6 +++---
 .../src/CustomNodes/InputNode/index.tsx       |  8 ++++----
 space_flow/src/alerts/alertDropDown/index.tsx |  2 +-
 .../ExtraSidebarComponent/index.tsx           |  4 ++--
 .../src/components/HeaderComponent/index.tsx  |  2 +-
 .../src/components/SidebarComponent/index.tsx |  2 +-
 .../src/components/chatComponent/index.tsx    | 14 ++++++-------
 .../src/components/inputComponent/index.tsx   |  2 +-
 .../components/textAreaComponent/index.tsx    |  2 +-
 .../src/components/toggleComponent/index.tsx  |  4 ++--
 space_flow/src/modals/textAreaModal/index.tsx | 14 ++++++-------
 .../components/DisclosureComponent/index.tsx  |  2 +-
 .../extraSidebarComponent/index.tsx           | 20 +++++++++----------
 .../components/tabComponent/index.tsx         | 12 +++++------
 .../components/tabsManagerComponent/index.tsx |  2 +-
 space_flow/src/pages/FlowPage/index.tsx       |  4 ++--
 21 files changed, 61 insertions(+), 61 deletions(-)

diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx
index cca4e3df1..c878aead7 100644
--- a/space_flow/src/App.tsx
+++ b/space_flow/src/App.tsx
@@ -105,7 +105,7 @@ export default function App() {
 				<ExtraSidebar />
 
 				{/* Main area */}
-				<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-slate-700 flex">
+				<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
 					{/* Primary column */}
 					<div className="w-full h-full">
 						<TabsManagerComponent></TabsManagerComponent>
diff --git a/space_flow/src/CustomNodes/BooleanNode/index.tsx b/space_flow/src/CustomNodes/BooleanNode/index.tsx
index db4fd4e4f..707680964 100644
--- a/space_flow/src/CustomNodes/BooleanNode/index.tsx
+++ b/space_flow/src/CustomNodes/BooleanNode/index.tsx
@@ -10,8 +10,8 @@ export default function BooleanNode({ data }) {
   const [enabled, setEnabled] = useState(false);
   const {types, deleteNode} = useContext(typesContext);
   return (
-    <div className="prompt-node relative bg-white dark:bg-slate-900 rounded-lg solid border dark:border-slate-700 flex flex-col justify-center">
-      <div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 dark:bg-slate-800 dark:text-white dark:border-b-slate-700 border-b ">
+    <div className="prompt-node relative bg-white dark:bg-gray-900 rounded-lg solid border dark:border-gray-700 flex flex-col justify-center">
+      <div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 dark:bg-gray-800 dark:text-white dark:border-b-gray-700 border-b ">
         <div className="flex items-center gap-4 text-lg">
           <CheckCircleIcon
             className="w-10 h-10 p-1 rounded"
@@ -35,7 +35,7 @@ export default function BooleanNode({ data }) {
         position={Position.Right}
         id={data.type}
         isValidConnection={(connection) => isValidConnection(data,connection)}
-        className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
+        className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
         style={{
           borderColor: nodeColors[types[data.type]],
         }}
diff --git a/space_flow/src/CustomNodes/ChatInputNode/index.tsx b/space_flow/src/CustomNodes/ChatInputNode/index.tsx
index e74071bb4..66cd8e51a 100644
--- a/space_flow/src/CustomNodes/ChatInputNode/index.tsx
+++ b/space_flow/src/CustomNodes/ChatInputNode/index.tsx
@@ -13,7 +13,7 @@ export default function ChatInputNode({ data }) {
   const { types } = useContext(typesContext);
   return (
     <div
-      className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-slate-800 dark:border-slate-700"
+      className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-gray-800 dark:border-gray-700"
       style={{ color: nodeColors[types[data.type]] }}
     >
       <Tooltip title="Prefix: str">
@@ -24,7 +24,7 @@ export default function ChatInputNode({ data }) {
           }
           position={Position.Left}
           id={"str|Prefix|" + data.id}
-          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
+          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
           style={{
             borderColor: nodeColors[types[data.type]],
           }}
@@ -38,7 +38,7 @@ export default function ChatInputNode({ data }) {
           }
           position={Position.Right}
           id={"str|str|" + data.id}
-          className={"-mr-0.5  w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
+          className={"-mr-0.5  w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
           style={{
             borderColor: nodeColors[types[data.type]],
           }}
diff --git a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
index c8ffbab79..48836d760 100644
--- a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
+++ b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
@@ -9,14 +9,14 @@ import { typesContext } from "../../contexts/typesContext";
 export default function ChatOutputNode({ data }) {
   const {types} = useContext(typesContext);
   return (
-    <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-slate-800 dark:border-slate-700" style={{color: nodeColors[types[data.type]]}}>
+    <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-gray-800 dark:border-gray-700" style={{color: nodeColors[types[data.type]]}}>
       <Tooltip title="Message: str">
         <Handle
           type="target"
           isValidConnection={(connection) => isValidConnection(data,connection)}
           position={Position.Left}
           id={"str|output|"+data.id}
-          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"
+          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
           }
           style={{
             borderColor: nodeColors[types[data.type]],
diff --git a/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index fa86811b2..4864d0aa4 100644
--- a/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -43,7 +43,7 @@ export default function ParameterComponent({
   let disabled = reactFlowInstance?.getEdges().some((e) => (e.targetHandle === id)) ?? false;
 
   return (
-    <div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-slate-800 dark:text-white mt-1 px-5 py-2">
+    <div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-gray-800 dark:text-white mt-1 px-5 py-2">
       <>
         <div className="text-sm truncate">{title}<span className="text-red-600">{required ? " *" : ""}</span></div>
         <Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
@@ -56,7 +56,7 @@ export default function ParameterComponent({
             }
             className={
               (left ? "-ml-0.5 " : "-mr-0.5 ") +
-              "w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"
+              "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
             }
             style={{
               borderColor: color,
diff --git a/space_flow/src/CustomNodes/GenericNode/index.tsx b/space_flow/src/CustomNodes/GenericNode/index.tsx
index d046746ab..dde32a486 100644
--- a/space_flow/src/CustomNodes/GenericNode/index.tsx
+++ b/space_flow/src/CustomNodes/GenericNode/index.tsx
@@ -16,8 +16,8 @@ export default function GenericNode({ data }) {
 
 
   return (
-    <div className="prompt-node relative bg-white dark:bg-slate-900 w-96 rounded-lg solid border dark:border-slate-700 flex flex-col justify-center">
-      <div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-slate-800 border-b dark:border-b-slate-700 ">
+    <div className="prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg solid border dark:border-gray-700 flex flex-col justify-center">
+      <div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 ">
         <div className="w-full flex items-center truncate gap-4 text-lg">
           <Icon
             className="w-10 h-10 p-1 rounded"
@@ -26,7 +26,7 @@ export default function GenericNode({ data }) {
           <div className="truncate">{data.type}</div>
         </div>
         <button onClick={() => {deleteNode(data.id)}}>
-          <TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-slate-500 dark:hover:text-red-500"></TrashIcon>
+          <TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon>
         </button>
       </div>
 
diff --git a/space_flow/src/CustomNodes/InputNode/index.tsx b/space_flow/src/CustomNodes/InputNode/index.tsx
index 21031049f..dfda0edaf 100644
--- a/space_flow/src/CustomNodes/InputNode/index.tsx
+++ b/space_flow/src/CustomNodes/InputNode/index.tsx
@@ -15,7 +15,7 @@ import TextAreaComponent from "../../components/textAreaComponent";
 export default function InputNode({ data }) {
   const {types, deleteNode} = useContext(typesContext);
   return (
-    <div className="prompt-node relative bg-white dark:bg-slate-900 w-96 rounded-lg solid border dark:border-slate-700 flex flex-col justify-center">
+    <div className="prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg solid border dark:border-gray-700 flex flex-col justify-center">
       <Tooltip title="Prefix: str">
         <Handle
           type="target"
@@ -24,14 +24,14 @@ export default function InputNode({ data }) {
           isValidConnection={(connection) =>
             isValidConnection(data, connection)
           }
-          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
+          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
           style={{
             borderColor: nodeColors[types[data.type]],
           }}
         ></Handle>
       </Tooltip>
 
-      <div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 dark:bg-slate-800 dark:text-white border-b dark:border-b-slate-700 ">
+      <div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 dark:bg-gray-800 dark:text-white border-b dark:border-b-gray-700 ">
         <div className="flex items-center gap-4 text-lg">
           <Bars3CenterLeftIcon
             className="w-10 h-10 p-1 rounded"
@@ -62,7 +62,7 @@ export default function InputNode({ data }) {
         position={Position.Right}
         id={data.type}
         isValidConnection={(connection) => isValidConnection(data, connection)}
-        className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
+        className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
         style={{
           borderColor: nodeColors[types[data.type]],
         }}
diff --git a/space_flow/src/alerts/alertDropDown/index.tsx b/space_flow/src/alerts/alertDropDown/index.tsx
index 87ecb5478..e8cb279e2 100644
--- a/space_flow/src/alerts/alertDropDown/index.tsx
+++ b/space_flow/src/alerts/alertDropDown/index.tsx
@@ -67,7 +67,7 @@ export default function AlertDropdown({closeFunction, open}: AlertDropdownProps)
             <SingleAlert key={index} dropItem={alertItem} removeAlert={removeFromNotificationList} />
           ))
         :
-        <div className="h-full w-full pb-16 text-slate-500 flex justify-center items-center">
+        <div className="h-full w-full pb-16 text-gray-500 flex justify-center items-center">
           No new notifications
           </div>
         }
diff --git a/space_flow/src/components/ExtraSidebarComponent/index.tsx b/space_flow/src/components/ExtraSidebarComponent/index.tsx
index 1f16098e0..ff15e8973 100644
--- a/space_flow/src/components/ExtraSidebarComponent/index.tsx
+++ b/space_flow/src/components/ExtraSidebarComponent/index.tsx
@@ -20,9 +20,9 @@ export default function ExtraSidebar() {
       <aside
         className={` ${
           isStackedOpen ? "w-60" : "w-0 "
-        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-slate-700 transition-all duration-500`}
+        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
       >
-        <div className="w-60 dark:bg-slate-800 border dark:border-slate-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
+        <div className="w-60 dark:bg-gray-800 border dark:border-gray-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
           <div className="flex pt-4 px-4 justify-between align-middle w-full">
             <span className="text-gray-900 dark:text-white text-lg ml-2 font-semibold">
               {extraNavigation.title}
diff --git a/space_flow/src/components/HeaderComponent/index.tsx b/space_flow/src/components/HeaderComponent/index.tsx
index 58cf48633..83ecf204b 100644
--- a/space_flow/src/components/HeaderComponent/index.tsx
+++ b/space_flow/src/components/HeaderComponent/index.tsx
@@ -28,7 +28,7 @@ export default function Header({user, userNavigation}){
   })
   const {dark, setDark} = useContext(darkContext);
     return (
-    <header className="relative flex h-16 w-full shrink-0 items-center bg-white dark:bg-slate-800">
+    <header className="relative flex h-16 w-full shrink-0 items-center bg-white dark:bg-gray-800">
         {/* Logo area */}
         <div className="static shrink-0">
           <a
diff --git a/space_flow/src/components/SidebarComponent/index.tsx b/space_flow/src/components/SidebarComponent/index.tsx
index 8d413ae98..83e59a1d0 100644
--- a/space_flow/src/components/SidebarComponent/index.tsx
+++ b/space_flow/src/components/SidebarComponent/index.tsx
@@ -21,7 +21,7 @@ export default function Sidebar() {
       <div className="w-20 h-full">
         <nav
           aria-label="Sidebar"
-          className="h-full overflow-y-auto bg-slate-800 dark:bg-slate-900"
+          className="h-full overflow-y-auto bg-gray-800 dark:bg-gray-900"
         >
           <div className="flex flex-col h-full justify-between">
             <div className="relative flex w-20 flex-col space-y-3 p-3">
diff --git a/space_flow/src/components/chatComponent/index.tsx b/space_flow/src/components/chatComponent/index.tsx
index 9668346b0..51809c10c 100644
--- a/space_flow/src/components/chatComponent/index.tsx
+++ b/space_flow/src/components/chatComponent/index.tsx
@@ -88,8 +88,8 @@ export default function Chat({flow, reactFlowInstance }) {
         leaveTo="translate-y-96"
       >
         <div className="w-[400px] absolute bottom-0 right-6">
-          <div className="border dark:border-slate-700 h-full rounded-xl rounded-b-none bg-white dark:bg-slate-800 shadow">
-            <div className="flex justify-between items-center px-5 py-3 border-b dark:border-b-slate-700">
+          <div className="border dark:border-gray-700 h-full rounded-xl rounded-b-none bg-white dark:bg-gray-800 shadow">
+            <div className="flex justify-between items-center px-5 py-3 border-b dark:border-b-gray-700">
               <div className="flex gap-3 text-xl dark:text-white font-medium items-center">
                 <Bars3CenterLeftIcon className="h-8 w-8 mt-1" style={{color: nodeColors['chat']}} />
                 Chat
@@ -102,7 +102,7 @@ export default function Chat({flow, reactFlowInstance }) {
                 <XMarkIcon className="h-6 w-6 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
               </button>
             </div>
-            <div  className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto scrollbar-hide flex-col bg-gray-50 dark:bg-slate-900 p-3 py-5">
+            <div  className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto scrollbar-hide flex-col bg-gray-50 dark:bg-gray-900 p-3 py-5">
               {chatHistory.map((c, i) => (
                 <div key={i}>
                   {!c.isSend ? (
@@ -113,7 +113,7 @@ export default function Chat({flow, reactFlowInstance }) {
                     </div>
                   ) : (
                     <div className="w-full text-start">
-                      <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-slate-700 bg-gray-200 font-normal rounded-tl-none">
+                      <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-gray-700 bg-gray-200 font-normal rounded-tl-none">
                         {c.message}
                       </div>
                     </div>
@@ -122,7 +122,7 @@ export default function Chat({flow, reactFlowInstance }) {
               ))}
               <div ref={ref}></div>
             </div>
-            <div className="w-full bg-white dark:bg-slate-800 border-t dark:border-t-slate-600 flex items-center justify-between p-3">
+            <div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex items-center justify-between p-3">
               <div className="relative w-full mt-1 rounded-md shadow-sm">
                 <input
                 onKeyDown={(event)=>{
@@ -135,7 +135,7 @@ export default function Chat({flow, reactFlowInstance }) {
                   onChange={(e) => {
                     setChatValue(e.target.value);
                   }}
-                  className="form-input block w-full rounded-md border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-white pr-10 sm:text-sm"
+                  className="form-input block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white pr-10 sm:text-sm"
                   placeholder="Send a message..."
                 />
                 <div className="absolute inset-y-0 right-0 flex items-center pr-3">
@@ -164,7 +164,7 @@ export default function Chat({flow, reactFlowInstance }) {
         leaveTo="translate-y-96"
       >
         <div className="absolute bottom-0 right-6">
-          <div className="border flex justify-center align-center py-2 px-4 rounded-xl rounded-b-none bg-white dark:bg-slate-800 dark:border-slate-600 dark:text-white shadow">
+          <div className="border flex justify-center align-center py-2 px-4 rounded-xl rounded-b-none bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-white shadow">
             <button
               onClick={() => {
                 setOpen(true);
diff --git a/space_flow/src/components/inputComponent/index.tsx b/space_flow/src/components/inputComponent/index.tsx
index 87ea3bb06..bf0d0a813 100644
--- a/space_flow/src/components/inputComponent/index.tsx
+++ b/space_flow/src/components/inputComponent/index.tsx
@@ -13,7 +13,7 @@ export default function InputComponent({value, onChange, disabled}){
             <input
             type="text"
             value={myValue}
-            className={"block w-full form-input dark:bg-slate-900 dark:border-slate-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200 dark:bg-slate-700" : "")}
+            className={"block w-full form-input dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200 dark:bg-gray-700" : "")}
             placeholder="Type a text"
             onChange={(e) => {
                 setMyValue(e.target.value);
diff --git a/space_flow/src/components/textAreaComponent/index.tsx b/space_flow/src/components/textAreaComponent/index.tsx
index 31aba2c64..1d8414f05 100644
--- a/space_flow/src/components/textAreaComponent/index.tsx
+++ b/space_flow/src/components/textAreaComponent/index.tsx
@@ -17,7 +17,7 @@ export default function TextAreaComponent({ value, onChange, disabled }) {
       <div className="w-full flex items-center gap-3">
         <span
           className={
-            "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-slate-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+            "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
             (disabled ? " bg-gray-200" : "")
           }
         >
diff --git a/space_flow/src/components/toggleComponent/index.tsx b/space_flow/src/components/toggleComponent/index.tsx
index 744ee535f..01a3bc528 100644
--- a/space_flow/src/components/toggleComponent/index.tsx
+++ b/space_flow/src/components/toggleComponent/index.tsx
@@ -16,7 +16,7 @@ export default function ToggleComponent({ enabled, setEnabled, disabled }) {
           setEnabled(x);
         }}
         className={classNames(
-          enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-slate-600",
+          enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-gray-600",
           "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out "
         )}
       >
@@ -24,7 +24,7 @@ export default function ToggleComponent({ enabled, setEnabled, disabled }) {
         <span
           className={classNames(
             enabled ? "translate-x-5" : "translate-x-0",
-            "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out", disabled ? "bg-gray-200 dark:bg-slate-600" : "bg-white dark:bg-slate-800"
+            "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out", disabled ? "bg-gray-200 dark:bg-gray-600" : "bg-white dark:bg-gray-800"
           )}
         >
           <span
diff --git a/space_flow/src/modals/textAreaModal/index.tsx b/space_flow/src/modals/textAreaModal/index.tsx
index a94571c6f..897bf301b 100644
--- a/space_flow/src/modals/textAreaModal/index.tsx
+++ b/space_flow/src/modals/textAreaModal/index.tsx
@@ -32,7 +32,7 @@ export default function TextAreaModal({value, setValue}){
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 dark:bg-slate-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -46,7 +46,7 @@ export default function TextAreaModal({value, setValue}){
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-slate-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
@@ -61,7 +61,7 @@ export default function TextAreaModal({value, setValue}){
                 </div>
                 <div className="h-full w-full flex flex-col justify-center items-center">
                   <div className="flex w-full pb-6 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-8 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-slate-900 sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto mt-8 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
                       <ClipboardDocumentListIcon
                         className="h-6 w-6 text-blue-600"
                         aria-hidden="true"
@@ -76,14 +76,14 @@ export default function TextAreaModal({value, setValue}){
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-gray-200 dark:bg-slate-900 p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-slate-800 shadow">
-                        <textarea ref={ref} className="form-input h-full w-full rounded-lg border-gray-300 dark:border-slate-700 dark:bg-slate-900 dark:text-white" value={myValue} onChange={(e) => {setMyValue(e.target.value); setValue(e.target.value)}}/>
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
+                        <textarea ref={ref} className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white" value={myValue} onChange={(e) => {setMyValue(e.target.value); setValue(e.target.value)}}/>
                       </div>
                     </div>
                   </div>
-                  <div className="bg-gray-200 dark:bg-slate-900 w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
                       className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
diff --git a/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 78f8b1c4c..ba9bb5636 100644
--- a/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -19,7 +19,7 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <div className="select-none bg-gray-50 dark:bg-slate-700 dark:border-y-slate-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
+            <div className="select-none bg-gray-50 dark:bg-gray-700 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
               <div className="flex gap-4">
                 <Icon className="w-6 text-gray-800 dark:text-white" />
                 <span className="flex items-center text-sm text-gray-800 dark:text-white font-medium">
diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 83ac8be87..35c1935a7 100644
--- a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -69,9 +69,9 @@ export default function ExtraSidebar() {
                     })
                   }
                 >
-                  <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-slate-600 border-l-0 rounded-md rounded-l-none border-2">
+                  <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border-2">
                     <span className="text-black dark:text-white w-36 truncate">{t}</span>
-                    <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
+                    <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
                   </div>
                 </div>
               </div>
@@ -94,9 +94,9 @@ export default function ExtraSidebar() {
                 })
               }
             >
-              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-slate-600 border-l-0 rounded-md rounded-l-none border-2">
+              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border-2">
                 <span className="text-black dark:text-white w-36 truncate">Chat Input</span>
-                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
+                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
               </div>
             </div>
           </div>
@@ -111,9 +111,9 @@ export default function ExtraSidebar() {
                 })
               }
             >
-              <div className="flex w-full justify-between text-sm px-4 py-3 items-center dark:border-slate-600 border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
+              <div className="flex w-full justify-between text-sm px-4 py-3 items-center dark:border-gray-600 border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
                 <span className="text-black dark:text-white w-36 truncate">Chat Output</span>
-                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
+                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
               </div>
             </div>
           </div>
@@ -134,9 +134,9 @@ export default function ExtraSidebar() {
                 })
               }
             >
-              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed dark:border-slate-600 border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
+              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed dark:border-gray-600 border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
                 <span className="text-black dark:text-white w-36 truncate">String</span>
-                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
+                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
               </div>
             </div>
           </div>
@@ -151,9 +151,9 @@ export default function ExtraSidebar() {
                 })
               }
             >
-              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed dark:border-slate-600 border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
+              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed dark:border-gray-600 border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
                 <span className="text-black dark:text-white w-36 truncate">Boolean</span>
-                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
+                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
               </div>
             </div>
           </div>
diff --git a/space_flow/src/pages/FlowPage/components/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/components/tabComponent/index.tsx
index 6eb76881d..e7e0b5bbe 100644
--- a/space_flow/src/pages/FlowPage/components/tabComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/tabComponent/index.tsx
@@ -15,7 +15,7 @@ export default function TabComponent({ selected, flow, onClick }) {
 			{flow ? (
 				!selected ? (
 					<div
-						className="dark:text-white flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-x-gray-300 dark:border-x-slate-600 -ml-px"
+						className="dark:text-white flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-x-gray-300 dark:border-x-gray-600 -ml-px"
 						onClick={onClick}
 					>
 						{flow.name}
@@ -25,11 +25,11 @@ export default function TabComponent({ selected, flow, onClick }) {
 								removeFlow(flow.id);
 							}}
 						>
-							<XMarkIcon className="h-4 hover:bg-white dark:hover:bg-slate-600 rounded-full" />
+							<XMarkIcon className="h-4 hover:bg-white dark:hover:bg-gray-600 rounded-full" />
 						</button>
 					</div>
 				) : (
-					<div className="bg-white dark:text-white dark:bg-slate-700 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-slate-600 px-4 py-1.5 rounded-t-xl -ml-px">
+					<div className="bg-white dark:text-white dark:bg-gray-700 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-600 px-4 py-1.5 rounded-t-xl -ml-px">
 						{isRename ? (
 							<input
 								autoFocus
@@ -70,7 +70,7 @@ export default function TabComponent({ selected, flow, onClick }) {
 							}}
 						>
 							{flows.length > 1 && (
-								<XMarkIcon className="h-4 hover:bg-gray-100 dark:hover:bg-slate-600 rounded-full" />
+								<XMarkIcon className="h-4 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-full" />
 							)}
 						</button>
 					</div>
@@ -78,10 +78,10 @@ export default function TabComponent({ selected, flow, onClick }) {
 			) : (
 				<div className="h-full py-1.5 flex justify-center items-center">
 					<button
-						className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-x-gray-300 dark:border-x-slate-600 dark:text-white -ml-px"
+						className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-x-gray-300 dark:border-x-gray-600 dark:text-white -ml-px"
 						onClick={onClick}
 					>
-						<PlusIcon className="h-5 rounded-full hover:bg-white dark:hover:bg-slate-600" />
+						<PlusIcon className="h-5 rounded-full hover:bg-white dark:hover:bg-gray-600" />
 					</button>
 				</div>
 			)}
diff --git a/space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
index 81f19a69d..d63ac1e0c 100644
--- a/space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
@@ -14,7 +14,7 @@ export default function TabsManagerComponent() {
 
   return (
     <div className="h-full w-full flex flex-col">
-      <div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-slate-800 px-2">
+      <div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-gray-800 px-2">
         {flows.map((flow, index) => {
           return (
             <TabComponent
diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx
index e7c812449..c31fec035 100644
--- a/space_flow/src/pages/FlowPage/index.tsx
+++ b/space_flow/src/pages/FlowPage/index.tsx
@@ -174,8 +174,8 @@ export default function FlowPage({ flow }) {
 						onDragOver={onDragOver}
 						onDrop={onDrop}
 					>
-						<Background className="dark:bg-slate-900"/>
-						<Controls className="[&>button]:text-black  [&>button]:dark:bg-slate-800 hover:[&>button]:dark:bg-slate-700 [&>button]:dark:text-slate-400 [&>button]:dark:fill-slate-400 [&>button]:dark:border-slate-600">
+						<Background className="dark:bg-gray-900"/>
+						<Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600">
 							<ControlButton
 								onClick={() => uploadFlow()}
 							>