fix: support dark mode on code tabs

Author: brandonmcconnell

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

@@ -4,6 +4,7 @@
 @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">
+          <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">
             {codeFiles.map((file) => (
               <TabsTrigger
                 key={file.name}
                 value={file.name}
-                className="border border-transparent data-[state=active]:border-indigo-200"
+                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"
               >
                 {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-[#1e1e1e]">
+              <div className="h-full bg-gray-50 prefers-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 flex flex-col bg-background">
+      <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="flex-1 overflow-auto">
           <FileTree files={codeFiles} selectedFile={selectedFile} onFileSelect={setCodeFile} />
         </div>
       </div>
-      <div className="flex-1 h-full py-5 bg-[#1e1e1e]">
+      <div className="flex-1 h-full py-5 bg-gray-50 prefers-dark:bg-[#1e1e1e]">
         {selectedFile ? (
           <div className="h-full">
             <CodeEditor file={selectedFile} />
           </div>
         ) : (
-          <div className="flex items-center justify-center h-full text-muted-foreground">
+          <div className="flex items-center justify-center h-full text-muted-foreground prefers-dark:text-gray-400">
             Select a file to view its content.
           </div>
         )}