Add light mode support.

ui/src/app/jobs/[jobID]/page.tsx

@@ -107,7 +107,7 @@ export default function JobPage({ params }: { params: { jobID: string } }) {
           <Button
             key={page.value}
             onClick={() => setPageKey(page.value)}
-            className={`px-4 py-1 h-8 flex items-center gap-1.5 ${page.value === pageKey ? 'bg-gray-300 dark:bg-gray-700' : ''}`}
+            className={`px-4 py-1 h-8 flex items-center gap-1.5 ${page.value === pageKey ? 'bg-gray-300 dark:bg-gray-700 text-white' : ''}`}
           >
             <page.icon className="text-sm" />
             {page.name}

ui/src/app/jobs/new/AdvancedJob.tsx

@@ -6,6 +6,7 @@ import Editor, { OnMount } from '@monaco-editor/react';
 import type { editor } from 'monaco-editor';
 import { Settings } from '@/hooks/useSettings';
 import { migrateJobConfig } from './jobConfig';
+import { useTheme } from '@/components/ThemeProvider';
 
 type Props = {
   jobConfig: JobConfig;
@@ -35,6 +36,7 @@ const yamlConfig: YAML.DocumentOptions &
 };
 
 export default function AdvancedJob({ jobConfig, setJobConfig, settings }: Props) {
+  const { theme } = useTheme();
   const [editorValue, setEditorValue] = useState<string>('');
   const lastJobConfigUpdateStringRef = useRef('');
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
@@ -132,7 +134,7 @@ export default function AdvancedJob({ jobConfig, setJobConfig, settings }: Props
         width="100%"
         defaultLanguage="yaml"
         value={editorValue}
-        theme="vs-dark"
+        theme={theme === 'dark' ? 'vs-dark' : 'light'}
         onChange={handleChange}
         onMount={handleEditorDidMount}
         options={{

ui/src/app/jobs/new/SimpleJob.tsx

@@ -783,7 +783,7 @@ export default function SimpleJob({
                           'config.process[0].datasets',
                         )
                       }
-                      className="bg-red-800 hover:bg-red-700 rounded-full p-2 text-sm transition-colors"
+                      className="bg-red-600 hover:bg-red-700 text-white rounded-full p-2 text-sm transition-colors"
                       title="Remove Dataset"
                     >
                       <X className="w-4 h-4" />

ui/src/app/jobs/new/page.tsx

@@ -210,10 +210,7 @@ export default function TrainingForm() {
             </div>
             <div className="mx-4 bg-gray-200 dark:bg-gray-800 w-1 h-6"></div>
             <div>
-              <Button
-                className="text-gray-200 bg-gray-800 px-3 py-1 rounded-md"
-                onClick={handleImportConfig}
-              >
+              <Button className="text-gray-200 bg-gray-800 px-3 py-1 rounded-md" onClick={handleImportConfig}>
                 Import Config
               </Button>
             </div>
@@ -263,7 +260,7 @@ export default function TrainingForm() {
         </div>
         <div>
           <Button
-            className="text-gray-200 bg-green-800 px-3 py-1 rounded-md"
+            className="text-white bg-green-600 hover:bg-green-700 px-3 py-1 rounded-md"
             onClick={() => saveJob()}
             disabled={status === 'saving'}
           >

ui/src/app/jobs/page.tsx

@@ -13,7 +13,7 @@ export default function Dashboard() {
         </div>
         <div className="flex-1"></div>
         <div>
-          <Link href="/jobs/new" className="text-gray-200 bg-slate-600 px-3 py-1 rounded-md">
+          <Link href="/jobs/new" className="text-white bg-slate-600 px-3 py-1 rounded-md">
             New Training Job
           </Link>
         </div>