fix: use copilotkit docs bg color for code editor on dark mode

Author: brandonmcconnell

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

@@ -186,6 +186,7 @@
   --anthropic: hsl(240 80% 60%); /* Bright blue */
   --cohere: hsl(0 80% 60%); /* Bright red */ --background: oklch(1 0 0); --foreground: oklch(0.145 0 0);
 
+  --cpk-docs-dark-bg: oklch(0.274 0.006 286.033);
 }
 
 .dark {
@@ -269,6 +270,7 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-cpk-docs-dark-bg: var(--cpk-docs-dark-bg);
 }
 
 @layer base {

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

@@ -21,7 +21,7 @@ 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-white dark:bg-neutral-800 rounded-none">
+          <TabsList className="w-full justify-start h-auto flex-wrap p-1 gap-1 bg-white dark:bg-cpk-docs-dark-bg rounded-none">
             {codeFiles.map((file) => (
               <TabsTrigger
                 key={file.name}
@@ -50,7 +50,7 @@ export default function CodeViewer({ codeFiles }: { codeFiles: FeatureFile[] })
 
   return (
     <div className="flex h-full">
-      <div className="w-72 border-r border-gray-200 dark:border-neutral-700 flex flex-col bg-white dark:bg-neutral-800">
+      <div className="w-72 border-r border-gray-200 dark:border-neutral-700 flex flex-col bg-white dark:bg-cpk-docs-dark-bg">
         <div className="flex-1 overflow-auto">
           <FileTree files={codeFiles} selectedFile={selectedFile} onFileSelect={setCodeFile} />
         </div>