From 361e981d0d8d258f374f011e0d569dcff4e0fb82 Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Mon, 26 Jun 2023 01:42:25 -0300
Subject: [PATCH] Refactor component styles for better visual consistency

This commit refactors the styling of some components to improve their visual consistency with the rest of the application. Specifically, it removes unnecessary background and text color properties and adjusts classes for spacing and layout. These changes will enhance the user experience and create a more polished look and feel.
---
 .../components/parameterComponent/index.tsx   |   4 +-
 .../src/CustomNodes/GenericNode/index.tsx     |  16 +-
 .../components/singleAlertComponent/index.tsx |  28 +--
 .../src/alerts/alertDropDown/index.tsx        |  12 +-
 src/frontend/src/alerts/error/index.tsx       |   6 +-
 src/frontend/src/alerts/notice/index.tsx      |   8 +-
 src/frontend/src/alerts/success/index.tsx     |   6 +-
 .../ExtraSidebarComponent/index.tsx           |   4 +-
 .../chatComponent/buildTrigger/index.tsx      |   2 +-
 .../chatComponent/chatMessage/index.tsx       |   2 +-
 .../chatComponent/chatTrigger/index.tsx       |   2 +-
 .../components/codeAreaComponent/index.tsx    |   6 +-
 .../components/dropdownComponent/index.tsx    |  18 +-
 .../src/components/floatComponent/index.tsx   |   6 +-
 .../components/menuBar/index.tsx              |   6 +-
 .../src/components/headerComponent/index.tsx  |  10 +-
 .../src/components/inputComponent/index.tsx   |   6 +-
 .../components/inputFileComponent/index.tsx   |   4 +-
 .../components/inputListComponent/index.tsx   |   4 +-
 .../src/components/intComponent/index.tsx     |   8 +-
 .../src/components/loadingComponent/index.tsx |   2 +-
 .../src/components/promptComponent/index.tsx  |   6 +-
 .../components/textAreaComponent/index.tsx    |   6 +-
 .../src/components/toggleComponent/index.tsx  |   4 +-
 .../src/components/ui/SwitchStyles.css        |   8 +
 src/frontend/src/components/ui/switch.tsx     |   6 +-
 src/frontend/src/constants.tsx                |   2 +-
 src/frontend/src/contexts/tabsContext.tsx     |   8 +-
 src/frontend/src/index.1.css                  | 225 ++++++++++++++++++
 src/frontend/src/index.css                    |  93 ++++----
 src/frontend/src/modals/ApiModal/index.tsx    |   4 +-
 .../src/modals/EditNodeModal/index.tsx        |  12 +-
 .../NodeModal/components/ModalField/index.tsx |   2 +-
 src/frontend/src/modals/NodeModal/index.tsx   |  12 +-
 .../src/modals/chatModal/chatInput/index.tsx  |  10 +-
 .../modals/chatModal/chatMessage/index.tsx    |  22 +-
 .../modals/chatModal/fileComponent/index.tsx  |   4 +-
 src/frontend/src/modals/chatModal/index.tsx   |  16 +-
 .../src/modals/codeAreaModal/index.tsx        |   4 +-
 src/frontend/src/modals/exportModal/index.tsx |   2 +-
 .../src/modals/flowSettingsModal/index.tsx    |   2 +-
 .../src/modals/genericModal/index.tsx         |   4 +-
 .../modals/importModal/buttonBox/index.tsx    |   8 +-
 src/frontend/src/modals/importModal/index.tsx |  20 +-
 src/frontend/src/modals/promptModal/index.tsx |  16 +-
 .../src/modals/textAreaModal/index.tsx        |  16 +-
 .../ConnectionLineComponent/index.tsx         |   4 +-
 .../components/DisclosureComponent/index.tsx  |   8 +-
 .../components/PageComponent/index.tsx        |   8 +-
 .../extraSidebarComponent/index.tsx           |  24 +-
 .../components/nodeToolbarComponent/index.tsx |  18 +-
 51 files changed, 480 insertions(+), 254 deletions(-)
 create mode 100644 src/frontend/src/components/ui/SwitchStyles.css
 create mode 100644 src/frontend/src/index.1.css

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 126e81c30..bc8adb15e 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -121,7 +121,7 @@ export default function ParameterComponent({
   return (
     <div
       ref={ref}
-      className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-foreground dark:text-background mt-1 px-5 py-2"
+      className="w-full flex flex-wrap justify-between items-center bg-muted mt-1 px-5 py-2"
     >
       <>
         <div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
@@ -153,7 +153,7 @@ export default function ParameterComponent({
               }
               className={classNames(
                 left ? "-ml-0.5 " : "-mr-0.5 ",
-                "w-3 h-3 rounded-full border-2 bg-background dark:bg-foreground"
+                "w-3 h-3 rounded-full border-2 bg-background"
               )}
               style={{
                 borderColor: color,
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 1c08f101b..7ec67dd93 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -75,11 +75,11 @@ export default function GenericNode({
 
       <div
         className={classNames(
-          selected ? "border border-ring" : "border dark:border-foreground",
-          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-background dark:bg-foreground"
+          selected ? "border border-ring" : "border",
+          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-background"
         )}
       >
-        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-foreground dark:bg-foreground dark:text-background ">
+        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4  ">
           <div className="flex w-full items-center gap-2 truncate text-lg">
             <Icon
               className="h-10 w-10 rounded p-1"
@@ -124,7 +124,7 @@ export default function GenericNode({
                       validationStatus && validationStatus.valid
                         ? "w-4 h-4 rounded-full bg-red-600 opacity-100"
                         : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-ring hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
+                      "absolute w-4 hover:text-ring hover: transition-all ease-in-out duration-200"
                     )}
                   ></div>
                   <div
@@ -132,7 +132,7 @@ export default function GenericNode({
                       validationStatus && !validationStatus.valid
                         ? "w-4 h-4 rounded-full  bg-status-red opacity-100"
                         : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-ring hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
+                      "absolute w-4 hover:text-ring hover: transition-all ease-in-out duration-200"
                     )}
                   ></div>
                   <div
@@ -140,7 +140,7 @@ export default function GenericNode({
                       !validationStatus
                         ? "w-4 h-4 rounded-full  bg-status-yellow opacity-100"
                         : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-ring hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
+                      "absolute w-4 hover:text-ring hover: transition-all ease-in-out duration-200"
                     )}
                   ></div>
                 </div>
@@ -162,7 +162,7 @@ export default function GenericNode({
                   {/* {idx === 0 ? (
                                 <div
                                     className={classNames(
-                                        "px-5 py-2 mt-2 dark:text-background text-center",
+                                        "px-5 py-2 mt-2 text-center",
                                         Object.keys(data.node.template).filter(
                                             (key) =>
                                                 !key.startsWith("_") &&
@@ -213,7 +213,7 @@ export default function GenericNode({
             >
               {" "}
             </div>
-            {/* <div className="px-5 py-2 mt-2 dark:text-background text-center">
+            {/* <div className="px-5 py-2 mt-2 text-center">
                   Output
               </div> */}
             <ParameterComponent
diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index 72fc3f8ee..d3524c287 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -30,21 +30,21 @@ export default function SingleAlert({
     >
       {type === "error" ? (
         <div
-          className="flex bg-red-50 dark:bg-red-900 rounded-md p-3 mb-2 mx-2"
+          className="flex bg-error-background rounded-md p-3 mb-2 mx-2"
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
             <XCircleIcon
-              className="h-5 w-5 text-red-400 dark:text-red-50"
+              className="h-5 w-5 text-red-400"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm break-words font-medium text-red-800 dark:text-background/80">
+            <h3 className="text-sm break-words font-medium text-red-800">
               {dropItem.title}
             </h3>
             {dropItem.list ? (
-              <div className="mt-2 text-sm text-red-700 dark:text-red-50">
+              <div className="mt-2 text-sm text-red-700">
                 <ul className="list-disc space-y-1 pl-5">
                   {dropItem.list.map((item, idx) => (
                     <li className="break-words" key={idx}>
@@ -67,7 +67,7 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-red-50 dark:bg-transparent p-1.5 text-red-500 dark:text-red-50"
+                className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500"
               >
                 <span className="sr-only">Dismiss</span>
                 <XMarkIcon className="h-5 w-5" aria-hidden="true" />
@@ -77,24 +77,24 @@ export default function SingleAlert({
         </div>
       ) : type === "notice" ? (
         <div
-          className="flex rounded-md bg-blue-50 dark:bg-blue-900 p-3 mb-2 mx-2"
+          className="flex rounded-md bg-blue-50 p-3 mb-2 mx-2"
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
             <InformationCircleIcon
-              className="h-5 w-5 text-blue-400 dark:text-blue-50"
+              className="h-5 w-5 text-blue-400 "
               aria-hidden="true"
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-blue-700 dark:text-background/80">
+            <p className="text-sm text-blue-700">
               {dropItem.title}
             </p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
               {dropItem.link ? (
                 <Link
                   to={dropItem.link}
-                  className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 dark:hover:text-blue-100 hover:text-ring"
+                  className="whitespace-nowrap font-medium text-blue-700 hover:text-ring"
                 >
                   Details
                 </Link>
@@ -113,7 +113,7 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-blue-50 dark:bg-transparent p-1.5 text-blue-500 dark:text-blue-50"
+                className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500 "
               >
                 <span className="sr-only">Dismiss</span>
                 <XMarkIcon className="h-5 w-5" aria-hidden="true" />
@@ -123,17 +123,17 @@ export default function SingleAlert({
         </div>
       ) : (
         <div
-          className="flex bg-green-50 dark:bg-green-900 p-3 mb-2 mx-2 rounded-md"
+          className="flex bg-green-50  p-3 mb-2 mx-2 rounded-md"
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
             <CheckCircleIcon
-              className="h-5 w-5 text-green-400 dark:text-green-50"
+              className="h-5 w-5 text-green-400 "
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <p className="text-sm font-medium text-green-800 dark:bg-background/80">
+            <p className="text-sm font-medium text-green-800">
               {dropItem.title}
             </p>
           </div>
@@ -147,7 +147,7 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-green-50 dark:bg-transparent p-1.5 text-green-500 dark:text-green-50"
+                className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 "
               >
                 <span className="sr-only">Dismiss</span>
                 <XMarkIcon className="h-5 w-5" aria-hidden="true" />
diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index d695c7f71..e3a07b532 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -24,13 +24,13 @@ export default function AlertDropdown({}: AlertDropdownType) {
   return (
     <div
       ref={componentRef}
-      className="z-10 py-3 pb-4 px-2 rounded-md bg-background dark:bg-foreground ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
+      className="z-10 py-3 pb-4 px-2 rounded-md bg-background ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
     >
-      <div className="flex pl-3 flex-row justify-between text-md font-medium text-foreground dark:text-light-gray">
+      <div className="flex pl-3 flex-row justify-between text-md font-medium text-foreground">
         Notifications
         <div className="flex gap-3 pr-3 ">
           <button
-            className="text-foreground hover:text-status-red dark:text-light-gray dark:hover:text-status-red"
+            className="text-foreground hover:text-status-red"
             onClick={() => {
               closePopUp();
               setTimeout(clearNotificationList, 100);
@@ -39,14 +39,14 @@ export default function AlertDropdown({}: AlertDropdownType) {
             <TrashIcon className="w-[1.1rem] h-[1.1rem]" />
           </button>
           <button
-            className="text-foreground hover:text-status-red dark:text-light-gray dark:hover:text-status-red"
+            className="text-foreground hover:text-status-red"
             onClick={closePopUp}
           >
             <XMarkIcon className="h-5 w-5" />
           </button>
         </div>
       </div>
-      <div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-high-foreground dark:text-medium-low-gray">
+      <div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-high-foreground">
         {notificationList.length !== 0 ? (
           notificationList.map((alertItem, index) => (
             <SingleAlert
@@ -56,7 +56,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
             />
           ))
         ) : (
-          <div className="h-full w-full pb-16 text-ring dark:text-ring flex justify-center items-center">
+          <div className="h-full w-full pb-16 text-ring flex justify-center items-center">
             No new notifications
           </div>
         )}
diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index 8908fa37f..3da6e9b2a 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -44,16 +44,16 @@ export default function ErrorAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <XCircleIcon
-              className="h-5 w-5 text-error-background dark:text-error-background"
+              className="h-5 w-5 text-error-background"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm font-medium text-error-foreground dark:text-background/80">
+            <h3 className="text-sm font-medium text-error-foreground">
               {title}
             </h3>
             {list.length !== 0 ? (
-              <div className="mt-2 text-sm text-error-foreground dark:text-error-background">
+              <div className="mt-2 text-sm text-error-foreground">
                 <ul className="list-disc space-y-1 pl-5">
                   {list.map((item, index) => (
                     <li key={index}>{item}</li>
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index c6a9fe912..04309b13b 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -36,22 +36,22 @@ export default function NoticeAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-light-blue dark:bg-dark-blue p-4"
+        className="rounded-md w-96 mt-6 shadow-xl bg-light-blue p-4"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <InformationCircleIcon
-              className="h-5 w-5 text-medium-blue dark:text-light-blue"
+              className="h-5 w-5 text-medium-blue"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-ring dark:text-background/80">{title}</p>
+            <p className="text-sm text-ring">{title}</p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
               {link !== "" ? (
                 <Link
                   to={link}
-                  className="whitespace-nowrap font-medium text-ring dark:text-light-blue hover:dark:text-blue-10 hover:text-ring"
+                  className="whitespace-nowrap font-medium text-ring hover:text-ring"
                 >
                   Details
                 </Link>
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index f62d9e3a9..1628cf8e1 100644
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@@ -34,17 +34,17 @@ export default function SuccessAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-success-background dark:bg-success-foreground p-4"
+        className="rounded-md w-96 mt-6 shadow-xl bg-success-background p-4"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <CheckCircleIcon
-              className="h-5 w-5 text-status-green dark:text-success-background"
+              className="h-5 w-5 text-status-green"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <p className="text-sm font-medium text-success-foreground dark:text-background/80">
+            <p className="text-sm font-medium text-success-foreground">
               {title}
             </p>
           </div>
diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index aa1b47c77..a27581d11 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -19,9 +19,9 @@ export default function ExtraSidebar() {
       <aside
         className={` ${
           isStackedOpen ? "w-52" : "w-0 "
-        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-foreground transition-all duration-500`}
+        } flex-shrink-0 flex overflow-hidden flex-col border-r  transition-all duration-500`}
       >
-        <div className="w-52 dark:bg-foreground border dark:border-foreground  overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-background">
+        <div className="w-52 border  overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-background">
           <div className="flex flex-grow flex-col w-full">
             {extraNavigation.options ? (
               <div className="p-4">
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index f092074c2..f6ee28a0a 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -143,7 +143,7 @@ export default function BuildTrigger({
         >
           <div
             className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md hover:shadow-sm shadow-btn-shadow hover:shadow-btn-shadow
-            bg-buildBackground dark:border-muted-foreground cursor-pointer"
+            bg-buildBackground cursor-pointer"
             onClick={() => {
               handleBuild(flow);
             }}
diff --git a/src/frontend/src/components/chatComponent/chatMessage/index.tsx b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
index f0120da19..10e7778ee 100644
--- a/src/frontend/src/components/chatComponent/chatMessage/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
@@ -48,7 +48,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
         </div>
       ) : (
         <div className="w-full text-end">
-          <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-background dark:bg-foreground bg-input font-normal rounded-tr-none">
+          <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black bg-input font-normal rounded-tr-none">
             {chat.message}
           </div>
         </div>
diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index d05e08769..2297cd2f7 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -36,7 +36,7 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
           side="left"
         >
           <div
-            className="border flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full bg-almost-dark-blue dark:border-muted-foreground cursor-pointer"
+            className="border flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full bg-almost-dark-blue cursor-pointer"
             onClick={handleClick}
           >
             <button>
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 6b12731db..00763508a 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -46,9 +46,9 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:medium-low-gray dark:border-muted-foreground rounded-md border-ring border-1 shadow-sm sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring border-1 shadow-sm bg-transparent sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring dark:border-foreground shadow-sm sm:text-sm" +
+              : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" +
                 INPUT_STYLE +
                 (disabled ? " bg-input" : "")
           }
@@ -69,7 +69,7 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-medium-low-gray ml-3" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index e422ba861..6871253f4 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -31,13 +31,13 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md shadow-sm sm:text-sm border-ring border-1" +
+                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border-ring border-1 bg-transparent" +
                       INPUT_STYLE
-                      : "ring-1 ring-ring w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-foreground dark:focus:ring-1 dark:focus:ring-muted-foreground dark:focus-visible:ring-foreground dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
+                      : "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm" +
                       INPUT_STYLE
                 }
               >
-                <span className="block truncate w-full">{internalValue}</span>
+                <span className="block bg-background truncate w-full">{internalValue}</span>
                 <span
                   className={
                     "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
@@ -70,11 +70,11 @@ export default function Dropdown({
                       className={({ active }) =>
                         classNames(
                           active
-                            ? " bg-accent dark:bg-background dark:text-ring"
+                            ? " bg-accent"
                             : "",
                           editNode
-                            ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-medium-low-gray dark:bg-foreground"
-                            : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-medium-low-gray dark:bg-foreground"
+                            ? "relative cursor-default select-none py-0.5 pl-3 pr-12"
+                            : "relative cursor-default select-none py-2 pl-3 pr-9"
                         )
                       }
                       value={option}
@@ -93,15 +93,15 @@ export default function Dropdown({
                           {selected ? (
                             <span
                               className={classNames(
-                                active ? "text-background dark:text-black" : "",
+                                active ? "text-background " : "",
                                 "absolute inset-y-0 right-0 flex items-center pr-4"
                               )}
                             >
                               <CheckIcon
                                 className={
                                   active
-                                    ? "h-5 w-5 dark:text-black text-black"
-                                    : "h-5 w-5 dark:text-background text-black"
+                                    ? "h-5 w-5 text-black"
+                                    : "h-5 w-5 text-black"
                                 }
                                 aria-hidden="true"
                               />
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index bf723f2d2..65b5166f2 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -56,11 +56,11 @@ export default function FloatComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm bg-transparent placeholder:text-muted-foreground" +
               INPUT_STYLE
-            : "focus:placeholder-transparent block w-full form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm ring-offset-input sm:text-sm" +
+            : "focus:placeholder-transparent block w-full form-input placeholder:text-muted-foreground bg-background rounded-md border-ring shadow-sm ring-offset-input sm:text-sm" +
               INPUT_STYLE +
-              (disabled ? " bg-input dark:bg-foreground" : "")
+              (disabled ? " bg-input" : "")
         }
         placeholder={
           editNode ? "Number 0 to 1" : "Type a number from zero to one"
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index edf19283d..86da64fc6 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -70,7 +70,7 @@ export const MenuBar = ({ flows, tabId }) => {
                 openPopUp(<FlowSettingsModal />);
               }}
             >
-              <Settings2 className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
+              <Settings2 className="w-4 h-4 mr-2 " />
               Settings
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -78,7 +78,7 @@ export const MenuBar = ({ flows, tabId }) => {
                 undo();
               }}
             >
-              <Undo className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
+              <Undo className="w-4 h-4 mr-2 " />
               Undo
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -86,7 +86,7 @@ export const MenuBar = ({ flows, tabId }) => {
                 redo();
               }}
             >
-              <Redo className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
+              <Redo className="w-4 h-4 mr-2 " />
               Redo
             </DropdownMenuItem>
             <DropdownMenuSeparator />
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 3b0700a21..88f45c6eb 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -60,7 +60,7 @@ export default function Header() {
           <Button
             asChild
             variant="outline"
-            className="text-muted-foreground dark:text-medium-low-gray "
+            className="text-muted-foreground  "
           >
             <a
               href="https://github.com/logspace-ai/langflow"
@@ -72,8 +72,8 @@ export default function Header() {
               Join The Community
             </a>
           </Button>
-          {/* <button
-            className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
+          <button
+            className="text-gray-600 hover:text-gray-500"
             onClick={() => {
               setDark(!dark);
             }}
@@ -83,9 +83,9 @@ export default function Header() {
             ) : (
               <MoonIcon className="h-5 w-5" />
             )}
-          </button> */}
+          </button>
           <button
-            className="text-muted-foreground hover:text-ring dark:text-medium-low-gray dark:hover:text-light-gray relative"
+            className="text-muted-foreground hover:text-ring relative"
             onClick={(event: React.MouseEvent<HTMLElement>) => {
               setNotificationCenter(false);
               const { top, left } = (
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index d9209479e..daef2687b 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -46,11 +46,11 @@ export default function InputComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         className={classNames(
-          "block w-full pr-12 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm focus:placeholder-transparent",
-          disabled ? " bg-input dark:bg-foreground" : "",
+          "block w-full pr-12 form-input rounded-md bg-background border-ring shadow-sm sm:text-sm focus:placeholder-transparent placeholder:text-muted-foreground",
+          disabled ? " bg-input" : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
           editNode
-            ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm text-center" +
+            ? "border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm text-center" +
                 INPUT_STYLE
             : "ring-offset-input" + INPUT_STYLE,
           password && editNode ? "pr-8" : "pr-3"
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 6c797ea52..57daca8cc 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -78,9 +78,9 @@ export default function InputFileComponent({
           onClick={handleButtonClick}
           className={
             editNode
-              ? "truncate placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm border-1" +
+              ? "truncate placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input   rounded-md border-ring shadow-sm sm:text-sm border-1" +
                 INPUT_STYLE
-              : "truncate block w-full text-ring dark:text-medium-low-gray px-3 py-2 rounded-md border border-ring dark:border-foreground shadow-sm sm:text-sm" +
+              : "truncate block w-full text-ring  px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" +
                 INPUT_STYLE +
                 (disabled ? " bg-input" : "")
           }
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 366461b07..c0cb5c023 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -32,9 +32,9 @@ export default function InputListComponent({
             value={i}
             className={
               editNode
-                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
+                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm" +
                   INPUT_STYLE
-                : "block w-full form-input rounded-md border-ring shadow-sm focus:border-ring focus:ring-ring sm:text-sm" +
+                : "block w-full form-input bg-background rounded-md border-ring shadow-sm focus:border-ring focus:ring-ring sm:text-sm" +
                   (disabled ? " bg-input" : "") +
                   "focus:placeholder-transparent"
             }
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 82f8c7f19..ba743a0d4 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -70,13 +70,13 @@ export default function IntComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm bg-transparent placeholder:text-muted-foreground" +
               INPUT_STYLE
-            : "focus:placeholder-transparent block w-full form-input dark:bg-foreground dark:border-muted-foreground dark:text-medium-low-gray rounded-md border-ring shadow-sm ring-offset-background sm:text-sm" +
+            : "focus:placeholder-transparent block w-full form-input bg-background rounded-md border-ring shadow-sm ring-offset-background sm:text-sm placeholder:text-muted-foreground" +
               INPUT_STYLE +
-              (disabled ? " bg-input dark:bg-foreground" : "")
+              (disabled ? " bg-input" : "")
         }
-        placeholder={editNode ? "Integer number" : "Type a integer number"}
+        placeholder={editNode ? "Integer number" : "Type an integer number"}
         onChange={(e) => {
           setMyValue(e.target.value);
           onChange(e.target.value);
diff --git a/src/frontend/src/components/loadingComponent/index.tsx b/src/frontend/src/components/loadingComponent/index.tsx
index 75da40b0c..74fb1bf1e 100644
--- a/src/frontend/src/components/loadingComponent/index.tsx
+++ b/src/frontend/src/components/loadingComponent/index.tsx
@@ -7,7 +7,7 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
     <div role="status" className="w-min m-auto">
       <svg
         aria-hidden="true"
-        className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin dark:text-muted-foreground fill-almost-medium-blue`}
+        className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin  fill-almost-medium-blue`}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index e2daec330..8bea98ca3 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -49,9 +49,9 @@ export default function PromptAreaComponent({
           }}
           className={
             editNode
-              ? "cursor-pointer truncate placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
+              ? "cursor-pointer truncate placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input   rounded-md border-ring shadow-sm sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring dark:border-foreground shadow-sm sm:text-sm" +
+              : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" +
                 (disabled ? " bg-input" : "")
           }
         >
@@ -74,7 +74,7 @@ export default function PromptAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-medium-low-gray" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring " />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 959348877..e203237d8 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -51,9 +51,9 @@ export default function TextAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input   rounded-md border-ring bg-transparent shadow-sm sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-ring dark:text-muted px-3 py-2 rounded-md border border-ring dark:border-foreground shadow-sm sm:text-sm" +
+              : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" +
                 (disabled ? " bg-input" : "")
           }
         >
@@ -76,7 +76,7 @@ export default function TextAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-medium-low-gray" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring " />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index fd47e8c1e..20705107f 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -31,8 +31,8 @@ export default function ToggleComponent({
             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-input dark:bg-muted-foreground"
-              : "bg-background dark:bg-foreground"
+              ? "bg-input "
+              : "bg-background"
           )}
         >
           <span
diff --git a/src/frontend/src/components/ui/SwitchStyles.css b/src/frontend/src/components/ui/SwitchStyles.css
new file mode 100644
index 000000000..d54dac065
--- /dev/null
+++ b/src/frontend/src/components/ui/SwitchStyles.css
@@ -0,0 +1,8 @@
+.SwitchRoot[data-state='checked'] {
+    background-color: blue !important;
+  }
+  
+  .SwitchRoot[data-state='unchecked'] {
+    background-color: red !important;
+  }
+  
\ No newline at end of file
diff --git a/src/frontend/src/components/ui/switch.tsx b/src/frontend/src/components/ui/switch.tsx
index 122057cfb..0bdc32b45 100644
--- a/src/frontend/src/components/ui/switch.tsx
+++ b/src/frontend/src/components/ui/switch.tsx
@@ -4,13 +4,15 @@ import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cn } from "../../utils";
 
+import "./SwitchStyles.css"; // Import the new stylesheet
+
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "SwitchRoot peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
       className
     )}
     {...props}
@@ -25,4 +27,4 @@ const Switch = React.forwardRef<
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch };
+export { Switch };
\ No newline at end of file
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 64a64b7d6..aafd4d212 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -147,7 +147,7 @@ export const EXPORT_CODE_DIALOG =
  * @constant
  */
 export const INPUT_STYLE =
-  " focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
+  " focus:ring-1 focus:ring-offset-1 focus:ring-offset-muted-foreground focus:ring-ring focus:outline-none";
 
 
 /**
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 09eefd69c..5f2b29578 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -436,8 +436,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
           style: { stroke: "inherit" },
           className:
             targetHandle.split("|")[0] === "Text"
-              ? "stroke-gray-800 dark:stroke-gray-300"
-              : "stroke-gray-900 dark:stroke-gray-200",
+              ? "stroke-gray-800 "
+              : "stroke-gray-900 ",
           animated: targetHandle.split("|")[0] === "Text",
           selected: false,
         },
@@ -501,8 +501,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       edge.style = { stroke: "inherit" };
       edge.className =
         edge.targetHandle.split("|")[0] === "Text"
-          ? "stroke-gray-800 dark:stroke-gray-300"
-          : "stroke-gray-900 dark:stroke-gray-200";
+          ? "stroke-gray-800 "
+          : "stroke-gray-900 ";
       edge.animated = edge.targetHandle.split("|")[0] === "Text";
     });
   };
diff --git a/src/frontend/src/index.1.css b/src/frontend/src/index.1.css
new file mode 100644
index 000000000..3a95ed6eb
--- /dev/null
+++ b/src/frontend/src/index.1.css
@@ -0,0 +1,225 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+	  --background: 0 0% 100%; /* hsl(0 0% 100%) */
+	  --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+    
+	  --muted: 210 40% 96.1%; /* hsl(210 40% 96%) */
+	  --muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
+    
+	  --popover: 0 0% 100%; /* hsl(0 0% 100%) */
+	  --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+
+	  --card: 0 0% 100%; /* hsl(0 0% 100%) */
+	  --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+    
+	  --border: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
+	  --input: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
+    
+	  --primary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+	  --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+    
+	  --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
+	  --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+    
+	  --accent: 210 40% 96.1%; /* hsl(210 40% 96%) */
+	  --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+    
+	  --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
+	  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+    
+    
+	  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
+    
+    --radius: 0.5rem;
+    
+    
+    --build-background: #E2E7EE; /* hsl(215, 26%, 91%) */
+    
+    --round-btn-shadow: #00000063;
+    
+    --hover-btn-background: #242f47;
+    
+    --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
+    --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
+
+    --error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
+    --error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
+
+    --status-red: #ef4444; /* tailwind red 500 medium-red*/
+    --status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
+    --status-green: #4ade80; /* tailwind green 400 medium-green*/
+
+    --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
+    --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
+
+    /* --high-indigo: #4338ca;  tailwind indigo 700 
+  --medium-indigo: #6366f1;  tailwind indigo 500 
+  --medium-dark-blue:#1d4ed8;  tailwind blue 700 Change in component (--ring)
+  --medium-high-indigo: #4f46e5;  tailwind indigo 600 
+  --medium-emerald: #10b981;  tailwind emerald 500 Unused
+  --medium-dark-green: #166534;  tailwind green 800 Unused
+  --almost-medium-green: #22c55e;  tailwind green 500 Unused
+  --light-slate: #cbd5e1;  tailwind slate 300 UNUSED
+  --light-blue: #eff6ff;  tailwind blue 50
+  --dark-blue: #1e3a8a;  tailwind blue 900
+  --medium-blue: #60a5fa;  tailwind blue 400
+  --almost-dark-blue:#3b82f6;  tailwind blue 500
+  --almost-light-blue: #dbeafe;   tailwind blue 100 */
+  }
+
+	.dark {
+	  --background: 224 71% 4%; /* hsl(224 71% 4%) */
+	  --foreground: 213 31% 91%; /* hsl(213 31% 91%) */
+
+	  --muted: 223 47% 11%; /* hsl(223 47% 11%) */
+	  --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
+
+	  --popover: 224 71% 4%; /* hsl(224 71% 4%) */
+	  --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
+
+	  --card: 224 71% 4%; /* hsl(224 71% 4%) */
+	  --card-foreground: 213 31% 91%; /* hsl(213 31% 91%) */
+
+	  --border: 216 34% 17%; /* hsl(216 34% 17%) */
+	  --input: 216 34% 17%; /* hsl(216 34% 17%) */
+
+	  --primary: 210 40% 98%; /* hsl(210 40% 98%) */
+	  --primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
+
+	  --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+	  --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+
+	  --accent: 216 34% 17%; /* hsl(216 34% 17%) */
+	  --accent-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+
+	  --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
+	  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+
+	  --ring: 216 34% 17%; /* hsl(216 34% 17%) */
+
+    --radius: 0.5rem;
+
+    --build-trigger: 11, 65% 61%; /* hsl(11, 65%, 61%) */
+  }
+}
+
+:root {
+  --background: 0 0% 100%; /* hsl(0 0% 100%) */
+  --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --muted: 210 40% 98%; /* hsl(210 40% 98%) */
+  --muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
+  --popover: 0 0% 100%; /* hsl(0 0% 100%) */
+  --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --card: 0 0% 100%; /* hsl(0 0% 100%) */
+  --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --border: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
+  --input: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
+  --primary: 222.2 27.0% 11.2%; /* hsl(222 27% 18%) */
+  --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+  --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
+  --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --accent: 210 30% 96.1%; /* hsl(210 30% 96%) */
+  --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
+  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+  --radius: 0.5rem;
+  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
+
+  --round-btn-shadow: #00000063;
+  --hover-btn-background: #242f47;
+
+  --build-background: #E2E7EE;
+  --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
+  --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
+
+  --error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
+  --error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
+
+  --status-red: #ef4444; /* tailwind red 500 medium-red*/
+  --status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
+  --status-green: #4ade80; /* tailwind green 400 medium-green*/
+
+  --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
+  --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
+  --high-indigo: #4338ca;  /*tailwind indigo 700*/ 
+  --medium-indigo: #6366f1;  /* tailwind indigo 500 */
+  --medium-dark-blue:#1d4ed8; /* tailwind blue 700 Change in component (--ring)*/
+}
+
+.dark {
+  --background: 224 71% 4%; /* hsl(224 71% 4%) */
+  --foreground: 213 31% 0%; /* hsl(213 31% 91%) */
+  --muted: 223 47% 11%; /* hsl(223 47% 11%) */
+  --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
+  --popover: 224 71% 4%; /* hsl(224 71% 4%) */
+  --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
+  --card: 224 71% 4%; /* hsl(224 71% 4%) */
+  --card-foreground: 213 31% 91%; /* hsl(213 31% 91%) */
+  --border: 216 34% 0%; /* hsl(216 34% 17%) */
+  --input: 216 34% 17%; /* hsl(216 34% 17%) */
+  --primary: 210 40% 98%; /* hsl(210 40% 98%) */
+  --primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
+  --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+  --accent: 216 34% 17%; /* hsl(216 34% 17%) */
+  --accent-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+  --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
+  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+  --ring: 216 34% 0%; /* hsl(216 34% 17%) */
+  --radius: 0.5rem;
+
+  --round-btn-shadow: #00000063;
+  --hover-btn-background: #242f47;
+
+  --build-background: #E2E7EE;
+  --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
+  --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
+
+  --error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
+  --error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
+
+  --status-red: #ef4444; /* tailwind red 500 medium-red*/
+  --status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
+  --status-green: #4ade80; /* tailwind green 400 medium-green*/
+
+  --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
+  --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
+  --high-indigo: #4338ca;  /*tailwind indigo 700*/ 
+  --medium-indigo: #6366f1;  /* tailwind indigo 500 */
+  --medium-dark-blue:#1d4ed8; /* tailwind blue 700 Change in component (--ring)*/
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+/* The style below sets the cursor property of the element with the class .react-flow__pane to the default cursor.
+The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */
+.react-flow__pane {
+  cursor: default;
+}
\ No newline at end of file
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 6673823ca..8cdcfae10 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -128,10 +128,11 @@
   --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
   --radius: 0.5rem;
   --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-  --build-background: #E2E7EE; /*	hsl(215, 26%, 91%) */
+
   --round-btn-shadow: #00000063;
   --hover-btn-background: #242f47;
 
+  --build-background: #E2E7EE;
   --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
   --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
 
@@ -147,59 +148,49 @@
   --high-indigo: #4338ca;  /*tailwind indigo 700*/ 
   --medium-indigo: #6366f1;  /* tailwind indigo 500 */
   --medium-dark-blue:#1d4ed8; /* tailwind blue 700 Change in component (--ring)*/
-  /*
-  --medium-high-indigo: #4f46e5;  tailwind indigo 600 
-  --medium-emerald: #10b981;  tailwind emerald 500 Unused
-  --medium-dark-green: #166534;  tailwind green 800 Unused
-  --almost-medium-green: #22c55e;  tailwind green 500 Unused
-  --light-slate: #cbd5e1;  tailwind slate 300 UNUSED
-  --light-blue: #eff6ff;  tailwind blue 50
-  --dark-blue: #1e3a8a;  tailwind blue 900
-  --medium-blue: #60a5fa;  tailwind blue 400
-  --almost-dark-blue:#3b82f6;  tailwind blue 500
-  --almost-light-blue: #dbeafe;   tailwind blue 100 */
 }
 
 .dark {
-  -background: 224 71% 4%;
-  /* hsl(224 71% 4%) */
-  -foreground: 213 31% 91%;
-  /* hsl(213 31% 91%) */
-  -muted: 223 47% 11%;
-  /* hsl(223 47% 11%) */
-  -muted-foreground: 215.4 16.3% 56.9%;
-  /* hsl(215 16% 56%) */
-  -popover: 224 71% 4%;
-  /* hsl(224 71% 4%) */
-  -popover-foreground: 215 20.2% 65.1%;
-  /* hsl(215 20% 65%) */
-  -card: 224 71% 4%;
-  /* hsl(224 71% 4%) */
-  -card-foreground: 213 31% 91%;
-  /* hsl(213 31% 91%) */
-  -border: 216 34% 17%;
-  /* hsl(216 34% 17%) */
-  -input: 216 34% 17%;
-  /* hsl(216 34% 17%) */
-  -primary: 210 40% 98%;
-  /* hsl(210 40% 98%) */
-  -primary-foreground: 222.2 47.4% 1.2%;
-  /* hsl(222 47% 1%) */
-  -secondary: 222.2 47.4% 11.2%;
-  /* hsl(222 47% 11%) */
-  -secondary-foreground: 210 40% 98%;
-  /* hsl(210 40% 98%) */
-  -accent: 216 34% 17%;
-  /* hsl(216 34% 17%) */
-  -accent-foreground: 210 40% 98%;
-  /* hsl(210 40% 98%) */
-  -destructive: 0 63% 31%;
-  /* hsl(0 63% 31%) */
-  -destructive-foreground: 210 40% 98%;
-  /* hsl(210 40% 98%) */
-  -ring: 216 34% 17%;
-  /* hsl(216 34% 17%) */
-  -radius: 0.5rem;
+  --background: 224 71% 0%; /* hsl(224 71% 4%) */
+  --foreground: 213 31% 0%; /* hsl(213 31% 91%) */
+  --muted: 223 47% 0%; /* hsl(223 47% 11%) */
+  --muted-foreground: 215.4 16.3% 0%; /* hsl(215 16% 56%) */
+  --popover: 224 71% 0%; /* hsl(224 71% 4%) */
+  --popover-foreground: 215 20.2% 0%; /* hsl(215 20% 65%) */
+  --card: 224 71% 0%; /* hsl(224 71% 4%) */
+  --card-foreground: 213 31% 0%; /* hsl(213 31% 91%) */
+  --border: 216 34% 0%; /* hsl(216 34% 17%) */
+  --input: 216 34% 0%; /* hsl(216 34% 17%) */
+  --primary: 210 40% 0%; /* hsl(210 40% 98%) */
+  --primary-foreground: 222.2 47.4% 0%; /* hsl(222 47% 1%) */
+  --secondary: 222.2 47.4% 0%; /* hsl(222 47% 11%) */
+  --secondary-foreground: 210 40% 0%; /* hsl(210 40% 98%) */
+  --accent: 216 34% 0%; /* hsl(216 34% 17%) */
+  --accent-foreground: 210 40% 0%; /* hsl(210 40% 98%) */
+  --destructive: 0 63% 0%; /* hsl(0 63% 31%) */
+  --destructive-foreground: 210 40% 0%; /* hsl(210 40% 98%) */
+  --ring: 216 34% 0%; /* hsl(216 34% 17%) */
+  --radius: 0.5rem;
+
+  --round-btn-shadow: #000000;
+  --hover-btn-background: #000000;
+
+  --build-background: #000000;
+  --build-trigger: 	#000000; /* hsl(11, 65%, 61%) */
+  --chat-trigger: #000000; /* tailwind blue 100 USED IN CHAT BACKGROUND */
+
+  --error-background: #000000; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
+  --error-foreground: #000000; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
+
+  --status-red: #000000; /* tailwind red 500 medium-red*/
+  --status-yellow: #000000; /* tailwind yellow 500 medium-yellow*/
+  --status-green: #000000; /* tailwind green 400 medium-green*/
+
+  --success-background: #000000; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
+  --success-foreground: #000000; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
+  --high-indigo: #000000;  /*tailwind indigo 700*/ 
+  --medium-indigo: #000000;  /* tailwind indigo 500 */
+  --medium-dark-blue:#000000; /* tailwind blue 700 Change in component (--ring)*/
 }
 
 @layer base {
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 09a92b7b1..b8ccb9767 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -89,7 +89,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
             <CodeBracketSquareIcon
-              className="h-6 w-6 text-foreground pl-1 dark:text-background"
+              className="h-6 w-6 text-foreground pl-1"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -109,7 +109,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
             </TabsList>
             <div className="float-right">
               <button
-                className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-ring dark:text-medium-low-gray"
+                className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-ring "
                 onClick={copyToClipboard}
               >
                 {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 3c429ff02..b2a41964f 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -93,7 +93,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
               <VariableIcon className="w-5 h-5 pe-1 text-foreground stroke-2">
                 &nbsp;
               </VariableIcon>
-              <span className="text-sm font-semibold text-foreground dark:text-background">
+              <span className="text-sm font-semibold text-foreground">
                 Parameters
               </span>
             </div>
@@ -103,7 +103,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
         <div className="flex w-full max-h-[350px] h-fit">
           <div
             className={classNames(
-              "w-full rounded-lg bg-background dark:bg-foreground border-[1px] border-input",
+              "w-full rounded-lg bg-background border-[1px] border-input",
               nodeLength > limitScrollFieldsModal
                 ? "overflow-scroll overflow-x-hidden custom-scroll"
                 : "overflow-hidden"
@@ -113,7 +113,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
               <div className="flex flex-col gap-5 h-fit">
                 <Table className="table-fixed bg-muted outline-1">
                   <TableHeader className="border-input text-ring text-xs font-medium h-10">
-                    <TableRow className="dark:border-b-muted">
+                    <TableRow className="">
                       <TableHead className="h-7 text-center">PARAM</TableHead>
                       <TableHead className="p-0 h-7 text-center">
                         VALUE
@@ -136,13 +136,13 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                             data.node.template[t].type === "int")
                       )
                       .map((n, i) => (
-                        <TableRow key={i} className="h-10 dark:border-b-muted">
-                          <TableCell className="p-0 text-center text-foreground dark:text-medium-low-gray text-sm">
+                        <TableRow key={i} className="h-10 ">
+                          <TableCell className="p-0 text-center text-foreground  text-sm">
                             {data.node.template[n].name
                               ? data.node.template[n].name
                               : data.node.template[n].display_name}
                           </TableCell>
-                          <TableCell className="p-0 text-center text-foreground text-xs w-[300px] dark:text-medium-low-gray">
+                          <TableCell className="p-0 text-center text-foreground text-xs w-[300px] ">
                             {data.node.template[n].type === "str" &&
                             !data.node.template[n].options ? (
                               <div className="mx-auto">
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
index bc1838478..38f33b34d 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -52,7 +52,7 @@ export default function ModalField({
     >
       {display && (
         <div>
-          <span className="mx-2 dark:text-medium-low-gray">{title}</span>
+          <span className="mx-2">{title}</span>
           <span className="text-destructive">{required ? " *" : ""}</span>
         </div>
       )}
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 9bc14a716..833969db3 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -45,7 +45,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-ring dark:bg-muted-foreground dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-ring   bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -59,7 +59,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
               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-background dark:bg-foreground 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-background 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"
@@ -84,17 +84,17 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                     <div className="mt-4 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium dark:text-background leading-10 text-foreground"
+                        className="text-lg font-medium leading-10 text-foreground"
                       >
                         {data.type}
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-input dark:bg-foreground p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-input p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex w-full h-[445px]">
                       <div
                         className={classNames(
-                          "px-4 sm:p-4 w-full rounded-lg bg-background dark:bg-foreground shadow",
+                          "px-4 sm:p-4 w-full rounded-lg bg-background shadow",
                           Object.keys(data.node.template).filter(
                             (t) =>
                               t.charAt(0) !== "_" &&
@@ -143,7 +143,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                       </div>
                     </div>
                   </div>
-                  <div className="bg-input dark:bg-foreground w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-input 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-red-500 px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index bdf963821..2046e7cda 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -44,9 +44,9 @@ export default function ChatInput({
         }}
         className={classNames(
           lockChat
-            ? " bg-input text-black dark:bg-foreground dark:text-medium-low-gray"
-            : "  bg-background-200 text-black dark:bg-foreground dark:text-medium-low-gray",
-          "form-input block w-full custom-scroll rounded-md border-ring dark:border-muted-foreground pr-10 sm:text-sm" +
+            ? " bg-input text-black "
+            : "  bg-background-200 text-black ",
+          "form-input block w-full custom-scroll rounded-md border-ring  pr-10 sm:text-sm" +
             INPUT_STYLE
         )}
         placeholder={"Send a message..."}
@@ -55,12 +55,12 @@ export default function ChatInput({
         <button disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
             <LockClosedIcon
-              className="h-5 w-5 text-ring  dark:hover:text-medium-low-gray animate-pulse"
+              className="h-5 w-5 text-ring animate-pulse"
               aria-hidden="true"
             />
           ) : (
             <PaperAirplaneIcon
-              className="h-5 w-5 text-ring hover:text-muted-foreground dark:hover:text-medium-low-gray"
+              className="h-5 w-5 text-ring hover:text-muted-foreground"
               aria-hidden="true"
             />
           )}
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index f07f6514b..c8b5cfe59 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -34,8 +34,8 @@ export default function ChatMessage({
       className={classNames(
         "w-full py-2 pl-2 flex",
         chat.isSend
-          ? "bg-background dark:bg-foreground "
-          : "bg-input  dark:bg-foreground"
+          ? "bg-background "
+          : "bg-input"
       )}
     >
       <div
@@ -62,25 +62,25 @@ export default function ChatMessage({
           </div>
         )}
         {chat.isSend && (
-          <UserIcon className="w-6 h-6 -mb-1 text-foreground dark:text-light-gray" />
+          <UserIcon className="w-6 h-6 -mb-1 text-foreground " />
         )}
       </div>
       {!chat.isSend ? (
         <div className="w-full text-start flex items-center">
-          <div className="w-full relative text-start inline-block text-muted-foreground dark:text-medium-low-gray text-sm font-normal">
+          <div className="w-full relative text-start inline-block text-muted-foreground  text-sm font-normal">
             {hidden && chat.thought && chat.thought !== "" && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
                 className="absolute -top-1 -left-2 cursor-pointer"
               >
-                <ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce dark:text-background" />
+                <ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce" />
               </div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
-                className=" text-start inline-block rounded-md text-muted-foreground dark:text-light-gray h-full border border-ring dark:border-ring
-								bg-muted dark:bg-foreground w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
+                className=" text-start inline-block rounded-md text-muted-foreground  h-full border border-ring
+								bg-muted w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
                 dangerouslySetInnerHTML={{
                   __html: convert.toHtml(chat.thought),
                 }}
@@ -88,12 +88,12 @@ export default function ChatMessage({
             )}
             {chat.thought && chat.thought !== "" && !hidden && <br></br>}
             <div className="w-full px-4 pb-3 pt-3 pr-8">
-              <div className="dark:text-background w-full">
+              <div className="w-full">
                 <div className="w-full">
                   <ReactMarkdown
                     remarkPlugins={[remarkGfm, remarkMath]}
                     rehypePlugins={[rehypeMathjax]}
-                    className="markdown prose dark:prose-invert text-muted-foreground dark:text-light-gray"
+                    className="markdown prose text-muted-foreground "
                     components={{
                       code({ node, inline, className, children, ...props }) {
                         if (children.length) {
@@ -152,9 +152,9 @@ export default function ChatMessage({
         </div>
       ) : (
         <div className="w-full flex items-center">
-          <div className="text-start inline-block px-3 text-sm text-muted-foreground dark:text-background">
+          <div className="text-start inline-block px-3 text-sm text-muted-foreground">
             <span
-              className="text-muted-foreground dark:text-light-gray"
+              className="text-muted-foreground "
               dangerouslySetInnerHTML={{
                 __html: message.replace(/\n/g, "<br>"),
               }}
diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index 9ca9ffdca..b7f6de447 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -37,10 +37,10 @@ export default function FileCard({ fileName, content, fileType }) {
         />
         {isHovered && (
           <div
-            className={`absolute top-0 right-0 bg-muted text-foreground rounded-bl-lg px-1 text-sm font-bold dark:bg-foreground dark:text-medium-low-gray`}
+            className={`absolute top-0 right-0 bg-muted text-foreground rounded-bl-lg px-1 text-sm font-bold `}
           >
             <button
-              className="text-ring py-1 px-2 dark:bg-foreground dark:text-medium-low-gray"
+              className="text-ring py-1 px-2 "
               onClick={handleDownload}
             >
               <CloudArrowDownIcon className="hover:scale-110 w-5 h-5 text-current"></CloudArrowDownIcon>
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index ed1f7deb5..53843496c 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -332,7 +332,7 @@ export default function ChatModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-muted-foreground dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
+          <div className="fixed inset-0 bg-black backdrop-blur-sm   bg-opacity-80 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -346,24 +346,24 @@ export default function ChatModal({
               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=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-background dark:bg-foreground text-left shadow-xl transition-all w-[690px]">
+              <Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all w-[690px]">
                 <div className="relative w-full p-4">
                   <button
                     onClick={() => clearChat()}
-                    className="absolute top-2 right-10 hover:text-status-red text-muted-foreground dark:text-medium-low-gray dark:hover:text-status-red z-30"
+                    className="absolute top-2 right-10 hover:text-status-red text-muted-foreground z-30"
                   >
                     <FaEraser className="w-4 h-4" />
                   </button>
                   <button
                     onClick={() => setModalOpen(false)}
-                    className="absolute top-1.5 right-2 hover:text-status-red text-muted-foreground dark:text-medium-low-gray dark:hover:text-status-red z-30"
+                    className="absolute top-1.5 right-2 hover:text-status-red text-muted-foreground z-30"
                   >
                     <HiX className="w-5 h-5" />
                   </button>
                 </div>
                 <div
                   ref={messagesRef}
-                  className="w-full h-full bg-background dark:bg-foreground border-t dark:border-t-muted-foreground flex-col flex items-center overflow-scroll scrollbar-hide"
+                  className="w-full h-full bg-background border-t  flex-col flex items-center overflow-scroll scrollbar-hide"
                 >
                   {chatHistory.length > 0 ? (
                     chatHistory.map((c, i) => (
@@ -378,12 +378,12 @@ export default function ChatModal({
                     <div className="flex flex-col h-full text-center justify-center w-full items-center align-middle">
                       <span>
                         👋{" "}
-                        <span className="text-muted-foreground dark:text-medium-low-gray text-lg">
+                        <span className="text-muted-foreground  text-lg">
                           LangFlow Chat
                         </span>
                       </span>
                       <br />
-                      <div className="bg-muted dark:bg-foreground rounded-md w-2/4 px-6 py-8 border border-input dark:border-foreground">
+                      <div className="bg-muted rounded-md w-2/4 px-6 py-8 border border-input">
                         <span className="text-base text-ring">
                           Start a conversation and click the agent’s thoughts{" "}
                           <span>
@@ -396,7 +396,7 @@ export default function ChatModal({
                   )}
                   <div ref={ref}></div>
                 </div>
-                <div className="w-full bg-background dark:bg-foreground border-t dark:border-t-muted-foreground flex-col flex items-center justify-between p-3">
+                <div className="w-full bg-background border-t  flex-col flex items-center justify-between p-3">
                   <div className="relative w-full  mt-1 rounded-md shadow-sm">
                     <ChatInput
                       chatValue={chatValue}
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 5636abfb1..00c392705 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -52,7 +52,7 @@ export default function CodeAreaModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
             <CommandLineIcon
-              className="h-6 w-6 text-foreground pl-1 dark:text-background"
+              className="h-6 w-6 text-foreground pl-1"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -73,7 +73,7 @@ export default function CodeAreaModal({
             onChange={(value) => {
               setCode(value);
             }}
-            className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-ring dark:border-muted-foreground"
+            className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-ring "
           />
         </div>
 
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 33757a97b..a45ebc28d 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -47,7 +47,7 @@ export default function ExportModal() {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Export</span>
             <Download
-              className="h-6 w-6 text-foreground pl-1 dark:text-background"
+              className="h-6 w-6 text-foreground pl-1"
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index a60d72416..ee20a239c 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -51,7 +51,7 @@ export default function FlowSettingsModal() {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Settings </span>
-            <Settings2 className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
+            <Settings2 className="w-4 h-4 mr-2 " />
           </DialogTitle>
           <DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index c4eb028ce..150fbaf0e 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -55,7 +55,7 @@ export default function GenericModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
             <DocumentTextIcon
-              className="h-6 w-6 text-foreground pl-1 dark:text-background"
+              className="h-6 w-6 text-foreground pl-1"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -78,7 +78,7 @@ export default function GenericModal({
         <div className="flex h-full w-full mt-2">
           <Textarea
             ref={ref}
-            className="form-input h-[300px] w-full rounded-lg border-ring dark:border-foreground dark:bg-foreground dark:text-background focus-visible:ring-1"
+            className="form-input h-[300px] w-full rounded-lg border-ring focus-visible:ring-1"
             value={myValue}
             onChange={(e) => {
               setMyValue(e.target.value);
diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index 328f50c09..59d8f525f 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -79,7 +79,7 @@ export default function ButtonBox({
     <button disabled={deactivate} onClick={onClick}>
       <div
         className={classNames(
-          "flex flex-col justify-center items-center rounded-lg text-center shadow border border-ring dark:border-foreground hover:shadow-lg transform hover:scale-105",
+          "flex flex-col justify-center items-center rounded-lg text-center shadow border border-ring hover:shadow-lg transform hover:scale-105",
           bgColor,
           height,
           width,
@@ -87,10 +87,10 @@ export default function ButtonBox({
         )}
       >
         <div
-          className={`flex items-center justify-center ${bigCircle} bg-background/30 dark:bg-background/30 rounded-full mb-1`}
+          className={`flex items-center justify-center ${bigCircle} bg-background/30 rounded-full mb-1`}
         >
           <div
-            className={`flex items-center justify-center ${smallCircle} bg-background dark:bg-background/80 rounded-full`}
+            className={`flex items-center justify-center ${smallCircle} bg-background rounded-full`}
           >
             <div className={textColor}>{icon}</div>
           </div>
@@ -98,7 +98,7 @@ export default function ButtonBox({
         <div className="w-full mt-auto mb-auto">
           <h3
             className={classNames(
-              "w-full font-semibold break-words text-background dark:text-background/80 truncate-multiline",
+              "w-full font-semibold break-words text-background truncate-multiline",
               titleFontSize,
               marginTop
             )}
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 0228c3ece..b4dc4a6ca 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -85,7 +85,7 @@ export default function ImportModal() {
                     }}
                   >
                     <ArrowLeftIcon
-                      className="h-5 w-5 text-foreground ml-1 dark:text-background"
+                      className="h-5 w-5 text-foreground ml-1"
                       aria-hidden="true"
                     />
                   </button>
@@ -97,7 +97,7 @@ export default function ImportModal() {
               {showExamples ? "Select an example" : "Import"}
             </span>
             <ArrowUpTrayIcon
-              className="h-5 w-5 text-foreground ml-1 dark:text-background"
+              className="h-5 w-5 text-foreground ml-1"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -106,7 +106,7 @@ export default function ImportModal() {
 
         <div
           className={classNames(
-            "h-full w-full dark:bg-foreground overflow-y-auto scrollbar-hide",
+            "h-full w-full overflow-y-auto scrollbar-hide",
             showExamples && !loadingExamples
               ? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto"
               : "flex flex-row justify-center items-center"
@@ -116,7 +116,7 @@ export default function ImportModal() {
             <div className="flex h-full w-full justify-evenly items-center">
               <ButtonBox
                 size="big"
-                bgColor="bg-medium-emerald dark:bg-medium-emerald/75"
+                bgColor="bg-medium-emerald "
                 description="Prebuilt Examples"
                 icon={
                   <DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
@@ -125,12 +125,12 @@ export default function ImportModal() {
                   setShowExamples(true);
                   handleExamples();
                 }}
-                textColor="text-medium-emerald dark:text-medium-emerald/75"
+                textColor="text-medium-emerald "
                 title="Examples"
               ></ButtonBox>
               <ButtonBox
                 size="big"
-                bgColor="bg-almost-dark-blue dark:bg-almost-dark-blue/75"
+                bgColor="bg-almost-dark-blue "
                 description="Import from Local"
                 icon={
                   <ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
@@ -139,7 +139,7 @@ export default function ImportModal() {
                   uploadFlow();
                   setModalOpen(false);
                 }}
-                textColor="text-almost-dark-blue dark:text-almost-dark-blue/75"
+                textColor="text-almost-dark-blue "
                 title="Local File"
               ></ButtonBox>
             </div>
@@ -157,7 +157,7 @@ export default function ImportModal() {
                   {" "}
                   <ButtonBox
                     size="small"
-                    bgColor="bg-medium-emerald dark:bg-medium-emerald/75"
+                    bgColor="bg-medium-emerald "
                     description={example.description ?? "Prebuilt Examples"}
                     icon={
                       <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
@@ -166,7 +166,7 @@ export default function ImportModal() {
                       addFlow(example, false);
                       setModalOpen(false);
                     }}
-                    textColor="text-medium-emerald dark:text-medium-emerald/75"
+                    textColor="text-medium-emerald "
                     title={example.name}
                   ></ButtonBox>
                 </div>
@@ -179,7 +179,7 @@ export default function ImportModal() {
             <a
               href="https://github.com/logspace-ai/langflow_examples"
               target="_blank"
-              className="flex items-center justify-center text-muted-foreground dark:text-medium-low-gray"
+              className="flex items-center justify-center text-muted-foreground "
               rel="noreferrer"
             >
               <svg
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx
index 2fac7b373..a0697eeea 100644
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@@ -43,7 +43,7 @@ export default function PromptAreaModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-ring dark:bg-muted-foreground dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-ring   bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -57,7 +57,7 @@ export default function PromptAreaModal({
               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-background dark:bg-foreground 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-background 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"
@@ -72,7 +72,7 @@ export default function PromptAreaModal({
                 </div>
                 <div className="h-full w-full flex flex-col justify-center items-center">
                   <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue dark:bg-foreground sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10">
                       <DocumentTextIcon
                         className="h-6 w-6 text-almost-medium-blue"
                         aria-hidden="true"
@@ -81,18 +81,18 @@ export default function PromptAreaModal({
                     <div className="mt-4 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium dark:text-background leading-10 text-foreground"
+                        className="text-lg font-medium leading-10 text-foreground"
                       >
                         Edit Prompt
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-accent overflow-auto dark:bg-foreground p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-accent overflow-auto 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 h-full rounded-lg bg-background dark:bg-foreground shadow">
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-background shadow">
                         <textarea
                           ref={ref}
-                          className="form-input h-full w-full rounded-lg border-ring dark:border-foreground dark:bg-foreground dark:text-background"
+                          className="form-input h-full w-full rounded-lg border-ring"
                           value={myValue}
                           onChange={(e) => {
                             setMyValue(e.target.value);
@@ -102,7 +102,7 @@ export default function PromptAreaModal({
                       </div>
                     </div>
                   </div>
-                  <div className="bg-input dark:bg-foreground w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-input 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 px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx
index adda0acf0..69f3d98b3 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@@ -42,7 +42,7 @@ export default function TextAreaModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-ring dark:bg-muted-foreground dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-ring   bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -56,7 +56,7 @@ export default function TextAreaModal({
               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-background dark:bg-foreground 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-background 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"
@@ -71,7 +71,7 @@ export default function TextAreaModal({
                 </div>
                 <div className="h-full w-full flex flex-col justify-center items-center">
                   <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue dark:bg-foreground sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10">
                       <ClipboardDocumentListIcon
                         className="h-6 w-6 text-almost-medium-blue"
                         aria-hidden="true"
@@ -80,18 +80,18 @@ export default function TextAreaModal({
                     <div className="mt-4 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium dark:text-background leading-10 text-foreground"
+                        className="text-lg font-medium leading-10 text-foreground"
                       >
                         Edit text
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-input dark:bg-foreground p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-input 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-background dark:bg-foreground shadow">
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-background shadow">
                         <textarea
                           ref={ref}
-                          className="form-input h-full w-full rounded-lg border-ring dark:border-foreground dark:bg-foreground dark:text-background"
+                          className="form-input h-full w-full rounded-lg border-ring"
                           value={myValue}
                           onChange={(e) => {
                             setMyValue(e.target.value);
@@ -101,7 +101,7 @@ export default function TextAreaModal({
                       </div>
                     </div>
                   </div>
-                  <div className="bg-input dark:bg-foreground w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-input 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 px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
diff --git a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
index a005f008f..de1191d07 100644
--- a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
@@ -13,7 +13,7 @@ const ConnectionLineComponent = ({
         fill="none"
         stroke="#222"
         strokeWidth={1.5}
-        className="animated dark:stroke-almost-medium-gray"
+        className="animated "
         d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
         style={connectionLineStyle}
       />
@@ -23,7 +23,7 @@ const ConnectionLineComponent = ({
         fill="#fff"
         r={3}
         stroke="#222"
-        className="dark:stroke-almost-medium-gray dark:fill-foreground"
+        className=""
         strokeWidth={1.5}
       />
     </g>
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 89c9f5d73..eb7db0e24 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -12,10 +12,10 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <Disclosure.Button className="select-none bg-muted dark:bg-foreground/60 dark:border-y-muted-foreground w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-input">
+            <Disclosure.Button className="select-none bg-muted w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-input">
               <div className="flex gap-4">
-                <Icon className="w-6 text-foreground dark:text-background/80" />
-                <span className="flex items-center text-sm text-foreground dark:text-background/80 font-medium">
+                <Icon className="w-6 text-foreground" />
+                <span className="flex items-center text-sm text-foreground font-medium">
                   {title}
                 </span>
               </div>
@@ -29,7 +29,7 @@ export default function DisclosureComponent({
                   <ChevronRightIcon
                     className={`${
                       open || openDisc ? "rotate-90 transform" : ""
-                    } h-4 w-4 text-foreground dark:text-background`}
+                    } h-4 w-4 text-foreground`}
                   />
                 </div>
               </div>
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 39a704126..e5cb3738e 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -185,8 +185,8 @@ export default function Page({ flow }: { flow: FlowType }) {
             style: { stroke: "inherit" },
             className:
               params.targetHandle.split("|")[0] === "Text"
-                ? "stroke-foreground dark:stroke-medium-low-gray"
-                : "stroke-foreground dark:stroke-light-gray",
+                ? "stroke-foreground "
+                : "stroke-foreground ",
             animated: params.targetHandle.split("|")[0] === "Text",
           },
           eds
@@ -397,8 +397,8 @@ export default function Page({ flow }: { flow: FlowType }) {
                   selectNodesOnDrag={false}
                   className="theme-attribution"
                 >
-                  <Background className="dark:bg-foreground" />
-                  <Controls className="[&>button]:text-black  [&>button]:dark:bg-foreground hover:[&>button]:dark:bg-foreground [&>button]:dark:text-almost-medium-gray [&>button]:dark:fill-almost-medium-gray [&>button]:dark:border-muted-foreground"></Controls>
+                  <Background className="" />
+                  <Controls className="[&>button]:text-black"></Controls>
                 </ReactFlow>
                 <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
               </div>
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index c93006896..0839b88a4 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -66,44 +66,44 @@ export default function ExtraSidebar() {
       <div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
         <ShadTooltip delayDuration={1000} content="Import" side="top">
           <button
-            className="hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center rounded-md bg-background px-2 py-2 ring-1 ring-inset ring-input hover:bg-muted"
+            className="text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out   relative inline-flex items-center rounded-md bg-background px-2 py-2 ring-1 ring-inset ring-input hover:bg-muted"
             onClick={() => {
               // openPopUp(<ImportModal />);
               uploadFlow();
             }}
           >
-            <FileUp className="w-5 h-5 dark:text-medium-low-gray"></FileUp>
+            <FileUp className="w-5 h-5 "></FileUp>
           </button>
         </ShadTooltip>
 
         <ShadTooltip delayDuration={1000} content="Export" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
+              "text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out   relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ExportModal />);
             }}
           >
-            <FileDown className="w-5 h-5  dark:text-medium-low-gray"></FileDown>
+            <FileDown className="w-5 h-5  "></FileDown>
           </button>
         </ShadTooltip>
         <ShadTooltip delayDuration={1000} content="Code" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
+              "text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out   relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
             }}
           >
-            <Code2 className="w-5 h-5  dark:text-medium-low-gray"></Code2>
+            <Code2 className="w-5 h-5  "></Code2>
           </button>
         </ShadTooltip>
 
         <ShadTooltip delayDuration={1000} content="Save" side="top">
           <button
-            className="hover:dark:hover:bg-btn-hover-bg text-foreground w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray  relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
+            className="text-foreground w-full justify-center transition-all shadow-sm duration-500 ease-in-out   relative inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-input hover:bg-muted rounded-md"
             onClick={(event) => {
               saveFlow(flows.find((f) => f.id === tabId));
               setSuccessData({ title: "Changes saved successfully" });
@@ -127,7 +127,7 @@ export default function ExtraSidebar() {
           placeholder="Search Nodes"
           className={
             INPUT_STYLE +
-            "w-full border-1 dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            "w-full border-1 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
           }
           onChange={(e) => {
             handleSearchInput(e.target.value);
@@ -135,7 +135,7 @@ export default function ExtraSidebar() {
           }}
         />
         <div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
-          <MagnifyingGlassIcon className="h-5 w-5 dark:text-background"></MagnifyingGlassIcon>
+          <MagnifyingGlassIcon className="h-5 w-5"></MagnifyingGlassIcon>
         </div>
       </div>
 
@@ -183,11 +183,11 @@ export default function ExtraSidebar() {
                               );
                             }}
                           >
-                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-background dark:bg-foreground items-center border-dashed border-ring dark:border-muted-foreground border-l-0 rounded-md rounded-l-none border">
-                              <span className="text-black dark:text-background w-full pr-1 truncate text-xs">
+                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-background items-center border-dashed border-ring  border-l-0 rounded-md rounded-l-none border">
+                              <span className="text-black w-full pr-1 truncate text-xs">
                                 {t}
                               </span>
-                              <Bars2Icon className="w-4 h-6  text-ring dark:text-muted-foreground" />
+                              <Bars2Icon className="w-4 h-6  text-ring " />
                             </div>
                           </div>
                         </div>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index d1a48a282..04fb91959 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -32,12 +32,12 @@ const NodeToolbarComponent = (props) => {
         <span className="isolate inline-flex rounded-md shadow-sm">
           <ShadTooltip delayDuration={1000} content="Delete" side="top">
             <button
-              className="hover:dark:hover:bg-btn-hover-bg text-foreground transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray shadow-md relative inline-flex items-center rounded-l-md bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
+              className="text-foreground transition-all duration-500 ease-in-out  shadow-md relative inline-flex items-center rounded-l-md bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
               onClick={() => {
                 props.deleteNode(props.data.id);
               }}
             >
-              <Trash2 className="w-4 h-4 dark:text-medium-low-gray"></Trash2>
+              <Trash2 className="w-4 h-4 "></Trash2>
             </button>
           </ShadTooltip>
 
@@ -45,8 +45,8 @@ const NodeToolbarComponent = (props) => {
             <button
               className={classNames(
                 nodeLength > 0
-                  ? "hover:dark:hover:bg-btn-hover-bg text-foreground transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
-                  : "hover:dark:hover:bg-btn-hover-bg text-foreground transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
+                  ? "text-foreground transition-all duration-500 ease-in-out  shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
+                  : "text-foreground transition-all duration-500 ease-in-out  shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -65,31 +65,31 @@ const NodeToolbarComponent = (props) => {
                 );
               }}
             >
-              <Copy className="w-4 h-4 dark:text-medium-low-gray"></Copy>
+              <Copy className="w-4 h-4 "></Copy>
             </button>
           </ShadTooltip>
 
           {nodeLength > 0 && (
             <ShadTooltip delayDuration={1000} content="Edit" side="top">
               <button
-                className="hover:dark:hover:bg-btn-hover-bg text-foreground transition-all duration-500 ease-in-out dark:bg-foreground dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
+                className="text-foreground transition-all duration-500 ease-in-out  shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
                 onClick={(event) => {
                   event.preventDefault();
                   props.openPopUp(<EditNodeModal data={props.data} />);
                 }}
               >
-                <Settings2 className="w-4 h-4 dark:text-medium-low-gray"></Settings2>
+                <Settings2 className="w-4 h-4 "></Settings2>
               </button>
             </ShadTooltip>
           )}
 
           
           {/* <Menu as="div" className="relative inline-block text-left z-100">
-            <button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
+            <button className="text-gray-700 transition-all duration-500 ease-in-out   shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
               <div>
                 <Menu.Button className="flex items-center">
                   <EllipsisVerticalIcon
-                    className="w-5 h-5 dark:text-gray-300"
+                    className="w-5 h-5 "
                     aria-hidden="true"
                   />
                 </Menu.Button>