Customize theme color

frontend/app/layout.tsx

@@ -38,7 +38,7 @@ export default function RootLayout({
         )}
       >
         <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
-          <div className="relative flex flex-col min-h-screen light:bg-gray-50 dark:bg-gray-950">
+          <div className="relative flex flex-col min-h-screen light:bg-neutral-50 dark:bg-neutral-800">
             <Navbar />
             <main>{children}</main>
             {/* <footer className="w-full flex items-center justify-center py-3">

frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/case-editor.tsx

@@ -171,7 +171,7 @@ export default function CaseEditor({
             <Button
               isIconOnly
               size="sm"
-              className="rounded-full bg-gray-50 dark:bg-gray-900"
+              className="rounded-full bg-neutral-50 dark:bg-neutral-600"
               onPress={() =>
                 router.push(
                   `/projects/${params.projectId}/folders/${params.folderId}/cases`
@@ -383,15 +383,15 @@ export default function CaseEditor({
         >
           <label
             htmlFor="dropzone-file"
-            className="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-200 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+            className="flex flex-col items-center justify-center w-full h-32 border-2 border-neutral-200 border-dashed rounded-lg cursor-pointer bg-neutral-50 dark:hover:bg-bray-800 dark:bg-neutral-700 hover:bg-neutral-100 dark:border-neutral-600 dark:hover:border-neutral-500 dark:hover:bg-neutral-600"
           >
             <div className="flex flex-col items-center justify-center pt-5 pb-6">
               <ArrowUpFromLine />
-              <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
+              <p className="mb-2 text-sm text-neutral-500 dark:text-neutral-400">
                 <span className="font-semibold">Click to upload</span> or drag
                 and drop
               </p>
-              <p className="text-xs text-gray-500 dark:text-gray-400">
+              <p className="text-xs text-neutral-500 dark:text-neutral-400">
                 Max. file size: 50 MB
               </p>
             </div>

frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/case-steps-editor.tsx

@@ -26,7 +26,7 @@ export default function StepsEditor({
     <>
       {sortedSteps.map((step, index) => (
         <div key={index} className="flex">
-          <div className="bg-gray-50 dark:bg-gray-900 rounded-full flex items-center justify-center min-w-unit-8 w-unit-8 h-unit-8 mt-3 me-2">
+          <div className="bg-neutral-50 dark:bg-neutral-600 rounded-full flex items-center justify-center min-w-unit-8 w-unit-8 h-unit-8 mt-3 me-2">
             <div>{step.caseSteps.stepNo}</div>
           </div>
           <Textarea

frontend/app/projects/[projectId]/folders/[folderId]/cases/test-case-table.tsx

@@ -76,6 +76,7 @@ export default function TestCaseTable({ projectId, cases, onDeleteCase }: Props)
           <Link
             underline="hover"
             href={`/projects/${projectId}/folders/${testCase.folderId}/cases/${testCase.id}`}
+            className="dark:text-white"
           >
             {cellValue}
           </Link>

frontend/app/projects/project-card.tsx

@@ -19,12 +19,22 @@ export function ProjectCard({ project, onEditClick, onDeleteClick }) {
       <CardHeader className="flex gap-3 h-[50px] justify-between text-ellipsis overflow-hidden">
         <div className="flex gap-5">
           <div className="flex flex-col gap-1 items-start justify-center">
-            <Link underline="hover" href={`/projects/${project.id}/home`}>{project.name}</Link>
+            <Link
+              underline="hover"
+              className="dark:text-white"
+              href={`/projects/${project.id}/home`}
+            >
+              {project.name}
+            </Link>
           </div>
         </div>
         <Dropdown>
           <DropdownTrigger>
-            <Button isIconOnly size="sm" className="bg-transparent rounded-full">
+            <Button
+              isIconOnly
+              size="sm"
+              className="bg-transparent rounded-full"
+            >
               <MoreVertical size={16} />
             </Button>
           </DropdownTrigger>

frontend/tailwind.config.js

@@ -27,10 +27,10 @@ module.exports = {
         dark: {
           colors: {
             primary: {
-              DEFAULT: "#d1d5db",
+              DEFAULT: "#1F883D",
-              foreground: "#000000",
+              foreground: "#FFFFFF",
             },
-            focus: "#d1d5db",
+            focus: "#1F883D",
           },
         },
       },