feat: improve dark mode styles

Author: brandonmcconnell

typescript-sdk/apps/dojo/src/app/globals.css

@@ -4,7 +4,6 @@
 @plugin "tailwindcss-animate";
 
 @custom-variant dark (&:is(.dark *));
-@custom-variant prefers-dark (@media (prefers-color-scheme: dark));
 
 @theme {
   /* Base Shadcn Colors */

typescript-sdk/apps/dojo/src/components/code-viewer/code-viewer.tsx

@@ -21,12 +21,12 @@ export default function CodeViewer({ codeFiles }: { codeFiles: FeatureFile[] })
           onValueChange={setCodeFile}
           className="flex-1 flex flex-col"
         >
-          <TabsList className="w-full justify-start h-auto flex-wrap p-1 gap-1 bg-gray-100 prefers-dark:bg-gray-900 border-b border-gray-200 prefers-dark:border-gray-800">
+          <TabsList className="w-full justify-start h-auto flex-wrap p-1 gap-1 bg-white dark:bg-gray-800 rounded-none">
             {codeFiles.map((file) => (
               <TabsTrigger
                 key={file.name}
                 value={file.name}
-                className="border border-transparent bg-transparent prefers-dark:bg-transparent text-gray-600 prefers-dark:text-gray-400 data-[state=active]:bg-white prefers-dark:data-[state=active]:bg-gray-800 data-[state=active]:text-gray-900 prefers-dark:data-[state=active]:text-gray-100 data-[state=active]:border-gray-200 prefers-dark:data-[state=active]:border-gray-700 data-[state=active]:shadow-sm"
+                className="border-0 shadow-none text-gray-600 dark:text-gray-300 hover:bg-foreground/5 hover:text-gray-900 dark:hover:text-gray-100 data-[state=active]:bg-foreground/10 data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"
               >
                 {file.name.split("/").pop()}
               </TabsTrigger>
@@ -38,7 +38,7 @@ export default function CodeViewer({ codeFiles }: { codeFiles: FeatureFile[] })
               value={file.name}
               className="flex-1 mt-0 data-[state=inactive]:hidden"
             >
-              <div className="h-full bg-gray-50 prefers-dark:bg-[#1e1e1e]">
+              <div className="h-full bg-gray-50 dark:bg-[#1e1e1e]">
                 <CodeEditor file={file} />
               </div>
             </TabsContent>
@@ -50,18 +50,18 @@ export default function CodeViewer({ codeFiles }: { codeFiles: FeatureFile[] })
 
   return (
     <div className="flex h-full">
-      <div className="w-72 border-r border-gray-200 prefers-dark:border-gray-800 flex flex-col bg-white prefers-dark:bg-gray-900">
+      <div className="w-72 border-r border-gray-200 dark:border-gray-700 flex flex-col bg-white dark:bg-gray-800">
         <div className="flex-1 overflow-auto">
           <FileTree files={codeFiles} selectedFile={selectedFile} onFileSelect={setCodeFile} />
         </div>
       </div>
-      <div className="flex-1 h-full py-5 bg-gray-50 prefers-dark:bg-[#1e1e1e]">
+      <div className="flex-1 h-full py-5 bg-gray-50 dark:bg-[#1e1e1e]">
         {selectedFile ? (
           <div className="h-full">
             <CodeEditor file={selectedFile} />
           </div>
         ) : (
-          <div className="flex items-center justify-center h-full text-muted-foreground prefers-dark:text-gray-400">
+          <div className="flex items-center justify-center h-full text-muted-foreground dark:text-gray-300">
             Select a file to view its content.
           </div>
         )}

typescript-sdk/apps/dojo/src/components/file-tree/file-tree.tsx

@@ -29,8 +29,9 @@ function FileTreeNode({
       {depth > 0 && <div className="absolute left-0 top-0 h-full w-px bg-border" />}
       <button
         className={cn(
-          "flex w-full items-center gap-2 rounded-sm px-2 py-1 text-sm hover:bg-accent/50",
-          isSelected && "bg-accent",
+          "flex w-full items-center gap-2 rounded-sm px-2 py-1 text-sm text-gray-700 dark:text-gray-200",
+          !isSelected && "hover:bg-foreground/5 hover:text-gray-900 dark:hover:text-white",
+          isSelected && "bg-foreground/10 text-gray-900 dark:text-white",
           depth === 1 && "ml-0.5",
           depth === 2 && "ml-1",
           depth === 3 && "ml-1.5",