configure dark mode styles

frontend/src/App.tsx

@@ -157,7 +157,7 @@ function App() {
   };
 
   return (
-    <div className="mt-2">
+    <div className="mt-2 dark:bg-black dark:text-white">
       {IS_RUNNING_ON_CLOUD && <PicoBadge />}
       {IS_RUNNING_ON_CLOUD && (
         <TermsOfServiceDialog
@@ -167,7 +167,7 @@ function App() {
       )}
 
       <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-96 lg:flex-col">
-        <div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6">
+        <div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6 dark:bg-zinc-950 dark:text-white">
           <div className="flex items-center justify-between mt-10">
             <h1 className="text-2xl ">Screenshot to Code</h1>
             <SettingsDialog settings={settings} setSettings={setSettings} />
@@ -191,7 +191,7 @@ function App() {
                     {executionConsole.slice(-1)[0]}
                   </div>
                   <div className="flex mt-4 w-full">
-                    <Button onClick={stop} className="w-full">
+                    <Button onClick={stop} className="w-full dark:text-white dark:bg-gray-700">
                       Stop
                     </Button>
                   </div>
@@ -208,26 +208,32 @@ function App() {
                       value={updateInstruction}
                     />
                     <div className="flex justify-between items-center gap-x-2">
-                      <div className="font-500 text-xs text-slate-700">
+                      <div className="font-500 text-xs text-slate-700 dark:text-white">
                         Include screenshot of current version?
                       </div>
                       <Switch
                         checked={shouldIncludeResultImage}
                         onCheckedChange={setShouldIncludeResultImage}
+                        className="dark:bg-gray-700"
                       />
                     </div>
-                    <Button onClick={doUpdate}>Update</Button>
+                    <Button 
+                      onClick={doUpdate}
+                      className="dark:text-white dark:bg-gray-700"
+                    >
+                      Update
+                    </Button>
                   </div>
                   <div className="flex items-center gap-x-2 mt-2">
                     <Button
                       onClick={downloadCode}
-                      className="flex items-center gap-x-2"
+                      className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
                     >
                       <FaDownload /> Download
                     </Button>
                     <Button
                       onClick={reset}
-                      className="flex items-center gap-x-2"
+                      className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
                     >
                       <FaUndo />
                       Reset
@@ -245,7 +251,7 @@ function App() {
                     })}
                   >
                     <img
-                      className="w-[340px] border border-gray-200 rounded-md"
+                      className="w-[340px] border border-gray-200 rounded-md dark:invert"
                       src={referenceImages[0]}
                       alt="Reference"
                     />

frontend/src/index.css

@@ -62,8 +62,25 @@
     --radius: 0.5rem;
   }
 
+  /* invert image for dark theme */
+  .invert {
+    filter: invert();
+  }
+  
+  body.dark {
+    background-color: black;
+  }
+
+  div[role="presentation"].dark {
+    background-color: #09090b !important;
+  }
+
+  iframe {
+    background-color: white !important; 
+  }
+
   .dark {
-    --background: 222.2 84% 4.9%;
+    --background: 222.2 0% 0%;
     --foreground: 210 40% 98%;
 
     --card: 222.2 84% 4.9%;