refactor: Remove hard-coded colors and unnecessary dark classes

src/frontend/src/index.css

@@ -41,6 +41,7 @@
 
   --high-indigo: #4338ca;
   --medium-indigo: #6366f1;
+  --low-indigo: #e0e7ff;
 
   --chat-bot-icon: #afe6ef;
   --chat-user-icon: #aface9;
@@ -52,6 +53,7 @@
   --chat-trigger-disabled: #b4c3da;
   --status-red: #ef4444;
   --status-yellow: #eab308;
+  --chat-send: #059669;
   --status-green: #4ade80;
   --status-blue:#2563eb;
   --connection: #555;
@@ -104,6 +106,7 @@
 
   --high-indigo: #4338ca;
   --medium-indigo: #6366f1;
+  --low-indigo: #e0e7ff;
 
   /* Colors that are shared in dark and light mode */
   --blur-shared: #151923d2;
@@ -112,6 +115,7 @@
   --chat-trigger-disabled: #2d3b54;
   --status-red: #ef4444;
   --status-yellow: #eab308;
+  --chat-send: #059669;
   --status-green: #4ade80;
   --status-blue: #2563eb;
   --connection: #555;

src/frontend/src/modals/formModal/chatInput/index.tsx

@@ -68,10 +68,10 @@ export default function ChatInput({
           className={classNames(
             "form-modal-send-button",
             noInput
-              ? "bg-indigo-600 text-background"
+              ? "bg-high-indigo text-background"
               : chatValue === ""
               ? "text-primary"
-              : "bg-emerald-600 text-background"
+              : "bg-chat-send text-background"
           )}
           disabled={lockChat}
           onClick={() => sendMessage()}

src/frontend/src/modals/formModal/chatMessage/index.tsx

@@ -181,7 +181,7 @@ export default function ChatMessage({
                       // Push div with matched text
                       if (chat.message[match[1]]) {
                         parts.push(
-                          <span className="my-1 rounded-md bg-indigo-100">
+                          <span className="my-1 rounded-md bg-low-indigo">
                             {chat.message[match[1]]}
                           </span>
                         );

src/frontend/src/modals/formModal/index.tsx

@@ -392,7 +392,7 @@ export default function FormModal({
             <DialogTitle className="flex items-center">
               <span className="pr-2">Chat</span>
               <TerminalSquare
-                className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
+                className="h-6 w-6 pl-1 text-foreground"
                 aria-hidden="true"
               />
             </DialogTitle>

src/frontend/src/modals/genericModal/index.tsx

@@ -203,7 +203,7 @@ export default function GenericModal({
           {type === TypeModal.PROMPT && isEdit ? (
             <Textarea
               ref={ref}
-              className="form-input h-full w-full rounded-lg border-gray-300 custom-scroll focus-visible:ring-1 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+              className="form-input h-full w-full rounded-lg border-border custom-scroll focus-visible:ring-1"
               value={inputValue}
               onBlur={() => {
                 setIsEdit(false);
@@ -220,7 +220,7 @@ export default function GenericModal({
           ) : type !== TypeModal.PROMPT ? (
             <Textarea
               ref={ref}
-              className="form-input h-full w-full rounded-lg border-gray-300 focus-visible:ring-1 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+              className="form-input h-full w-full rounded-lg border-border focus-visible:ring-1"
               value={inputValue}
               onChange={(e) => {
                 setInputValue(e.target.value);

src/frontend/tailwind.config.js

@@ -43,6 +43,8 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
       },
       colors: {
+        "low-indigo": "var(--low-indigo)",
+        "chat-send": "var(--chat-send)",
         connection: "var(--connection)",
         "almost-dark-gray": "var(--almost-dark-gray)",
         "almost-light-blue": "var(--almost-light-blue)",