Update

Dockerfile

@@ -58,10 +58,10 @@ COPY --chown=user:user static-server.js ./
 # Switch to non-root user
 USER user
 
-ARG PUBLIC_TRANSPORT_SERVER_URL=https://blanchon-robothub-transportserver.hf.space/api
+ARG PUBLIC_TRANSPORT_SERVER_URL=https://blanchon-robothub-transport-server.hf.space/api
 ENV PUBLIC_TRANSPORT_SERVER_URL=${PUBLIC_TRANSPORT_SERVER_URL}
 
-ARG PUBLIC_INFERENCE_SERVER_URL=https://blanchon-robothub-inference-server.hf.space/api
+ARG PUBLIC_INFERENCE_SERVER_URL=https://blanchon-robothub-inferenceserver.hf.space/api
 ENV PUBLIC_INFERENCE_SERVER_URL=${PUBLIC_INFERENCE_SERVER_URL}
 
 ARG PORT=8000

bun.lock

@@ -35,7 +35,7 @@
         "eslint-plugin-svelte": "^3.9.1",
         "globals": "^16.2.0",
         "layerchart": "1.0.11",
-        "mode-watcher": "^1.0.7",
+        "mode-watcher": "^1.0.8",
         "prettier": "^3.5.3",
         "prettier-plugin-svelte": "^3.4.0",
         "prettier-plugin-tailwindcss": "^0.6.11",

external/RobotHub-InferenceServer

@@ -1 +1 @@
-Subproject commit 119f2e226ee9dd33a2ab59894e7c1be24cb5dbde
+Subproject commit e3c6edfc01cbf01b6ca1ac19637a282017ef6c07

package.json

@@ -32,7 +32,7 @@
 		"eslint-plugin-svelte": "^3.9.1",
 		"globals": "^16.2.0",
 		"layerchart": "1.0.11",
-		"mode-watcher": "^1.0.7",
+		"mode-watcher": "^1.0.8",
 		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.4.0",
 		"prettier-plugin-tailwindcss": "^0.6.11",

src/lib/components/3d/Floor.svelte

@@ -2,6 +2,8 @@
 	import { T } from "@threlte/core";
 	import { PlaneGeometry } from 'three';
 	import { Grid } from '@threlte/extras'
+	import { mode } from "mode-watcher";
+	
 	const floorGeometry = new PlaneGeometry(20, 20);
 </script>
 
@@ -20,5 +22,9 @@
 		polygonOffsetUnits={1}
 	/>
 </T.Mesh>
-<Grid/>
+<Grid 
+	backgroundColor={mode.current === 'dark' ? "#dadada" : "#e2e8f0"}
+	cellColor={mode.current === 'dark' ? "#000000" : "#94a3b8"}
+	selectionColor={mode.current === 'dark' ? "#0000ee" : "#3b82f6"}
+/>
 

src/lib/components/3d/elements/compute/Computes.svelte

@@ -76,7 +76,7 @@
 {/each}
 
 {#if selectedCompute}
-	<!-- AI Session Creation Modal -->
+	<!-- Inference Session Creation Modal -->
 	<AISessionConnectionModal bind:open={isAISessionModalOpen} compute={selectedCompute} {workspaceId} />
 	<!-- Video Input Connection Modal -->
 	<VideoInputConnectionModal bind:open={isVideoInputModalOpen} compute={selectedCompute} {workspaceId} />

src/lib/components/3d/elements/compute/modal/AISessionConnectionModal.svelte

@@ -58,7 +58,7 @@
 
 			const result = await remoteComputeManager.createSession(compute.id, config);
 			if (result.success) {
-				toast.success(`AI session created: ${sessionId}`);
+				toast.success(`Inference Session created: ${sessionId}`);
 				open = false;
 			} else {
 				toast.error(`Failed to create session: ${result.error}`);
@@ -78,7 +78,7 @@
 		try {
 			const result = await remoteComputeManager.startSession(compute.id);
 			if (result.success) {
-				toast.success('AI session started');
+				toast.success('Inference Session started');
 			} else {
 				toast.error(`Failed to start session: ${result.error}`);
 			}
@@ -97,7 +97,7 @@
 		try {
 			const result = await remoteComputeManager.stopSession(compute.id);
 			if (result.success) {
-				toast.success('AI session stopped');
+				toast.success('Inference Session stopped');
 			} else {
 				toast.error(`Failed to stop session: ${result.error}`);
 			}
@@ -116,7 +116,7 @@
 		try {
 			const result = await remoteComputeManager.deleteSession(compute.id);
 			if (result.success) {
-				toast.success('AI session deleted');
+				toast.success('Inference Session deleted');
 			} else {
 				toast.error(`Failed to delete session: ${result.error}`);
 			}
@@ -131,14 +131,14 @@
 
 <Dialog.Root bind:open>
 	<Dialog.Content
-		class="max-h-[80vh] max-w-2xl overflow-y-auto border-slate-600 bg-slate-900 text-slate-100"
+		class="max-h-[80vh] max-w-2xl overflow-y-auto border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100"
 	>
 		<Dialog.Header class="pb-3">
-			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-100">
-				<span class="icon-[mdi--robot-outline] size-5 text-purple-400"></span>
+			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
+				<span class="icon-[mdi--robot-outline] size-5 text-purple-500 dark:text-purple-400"></span>
 				AI Compute Session - {compute.name || 'No Compute Selected'}
 			</Dialog.Title>
-			<Dialog.Description class="text-sm text-slate-400">
+			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
 				Configure and manage ACT model inference sessions for robot control
 			</Dialog.Description>
 		</Dialog.Header>
@@ -146,74 +146,74 @@
 		<div class="space-y-4">
 			<!-- Current Session Status -->
 			<div
-				class="flex items-center justify-between rounded-lg border border-purple-500/30 bg-purple-900/20 p-3"
+				class="flex items-center justify-between rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20"
 			>
 				<div class="flex items-center gap-2">
-					<span class="icon-[mdi--brain] size-4 text-purple-400"></span>
-					<span class="text-sm font-medium text-purple-300">Session Status</span>
+					<span class="icon-[mdi--brain] size-4 text-purple-500 dark:text-purple-400"></span>
+					<span class="text-sm font-medium text-purple-700 dark:text-purple-300">Session Status</span>
 				</div>
 				{#if compute.hasSession}
-					<Badge variant="default" class="bg-purple-600 text-xs">
+					<Badge variant="default" class="bg-purple-500 text-xs dark:bg-purple-600">
 						{compute.statusInfo.statusText}
 					</Badge>
 				{:else}
-					<Badge variant="secondary" class="text-xs text-slate-400">No Session</Badge>
+					<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400">No Session</Badge>
 				{/if}
 			</div>
 
 			<!-- Current Session Details -->
 			{#if compute.hasSession && compute.sessionData}
-				<Card.Root class="border-purple-500/30 bg-purple-500/5">
+				<Card.Root class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5">
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-purple-200">
+						<Card.Title class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200">
 							<span class="icon-[mdi--cog] size-4"></span>
 							Current Session
 						</Card.Title>
 					</Card.Header>
 					<Card.Content>
 						<div class="space-y-3">
-							<div class="rounded-lg border border-purple-500/30 bg-purple-900/20 p-3">
+							<div class="rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20">
 								<div class="grid grid-cols-2 gap-2 text-xs">
 									<div>
-										<span class="text-purple-300 font-medium">Session ID:</span>
-										<span class="text-purple-100 block">{compute.sessionId}</span>
+										<span class="text-purple-700 font-medium dark:text-purple-300">Session ID:</span>
+										<span class="text-purple-800 block dark:text-purple-100">{compute.sessionId}</span>
 									</div>
 									<div>
-										<span class="text-purple-300 font-medium">Status:</span>
-										<span class="text-purple-100 block">{compute.statusInfo.emoji} {compute.statusInfo.statusText}</span>
+										<span class="text-purple-700 font-medium dark:text-purple-300">Status:</span>
+										<span class="text-purple-800 block dark:text-purple-100">{compute.statusInfo.emoji} {compute.statusInfo.statusText}</span>
 									</div>
 									<div>
-										<span class="text-purple-300 font-medium">Policy:</span>
-										<span class="text-purple-100 block">{compute.sessionConfig?.policyPath}</span>
+										<span class="text-purple-700 font-medium dark:text-purple-300">Policy:</span>
+										<span class="text-purple-800 block dark:text-purple-100">{compute.sessionConfig?.policyPath}</span>
 									</div>
 									<div>
-										<span class="text-purple-300 font-medium">Cameras:</span>
-										<span class="text-purple-100 block">{compute.sessionConfig?.cameraNames.join(', ')}</span>
+										<span class="text-purple-700 font-medium dark:text-purple-300">Cameras:</span>
+										<span class="text-purple-800 block dark:text-purple-100">{compute.sessionConfig?.cameraNames.join(', ')}</span>
 									</div>
 								</div>
 							</div>
 
 							<!-- Connection Details -->
-							<div class="rounded-lg border border-green-500/30 bg-green-900/20 p-3">
-								<div class="text-sm font-medium text-green-300 mb-2">📡 Inference Server Connections</div>
+							<div class="rounded-lg border border-green-300/30 bg-green-100/20 p-3 dark:border-green-500/30 dark:bg-green-900/20">
+								<div class="text-sm font-medium text-green-700 mb-2 dark:text-green-300">📡 Inference Server Connections</div>
 								<div class="space-y-1 text-xs">
 									<div>
-										<span class="text-green-400">Workspace:</span>
-										<span class="text-green-200 font-mono ml-2">{compute.sessionData.workspace_id}</span>
+										<span class="text-green-600 dark:text-green-400">Workspace:</span>
+										<span class="text-green-700 font-mono ml-2 dark:text-green-200">{compute.sessionData.workspace_id}</span>
 									</div>
 									{#each Object.entries(compute.sessionData.camera_room_ids) as [camera, roomId]}
 										<div>
-											<span class="text-green-400">📹 {camera}:</span>
-											<span class="text-green-200 font-mono ml-2">{roomId}</span>
+											<span class="text-green-600 dark:text-green-400">📹 {camera}:</span>
+											<span class="text-green-700 font-mono ml-2 dark:text-green-200">{roomId}</span>
 										</div>
 									{/each}
 									<div>
-										<span class="text-green-400">📥 Joint Input:</span>
-										<span class="text-green-200 font-mono ml-2">{compute.sessionData.joint_input_room_id}</span>
+										<span class="text-green-600 dark:text-green-400">📥 Joint Input:</span>
+										<span class="text-green-700 font-mono ml-2 dark:text-green-200">{compute.sessionData.joint_input_room_id}</span>
 									</div>
 									<div>
-										<span class="text-green-400">📤 Joint Output:</span>
-										<span class="text-green-200 font-mono ml-2">{compute.sessionData.joint_output_room_id}</span>
+										<span class="text-green-600 dark:text-green-400">📤 Joint Output:</span>
+										<span class="text-green-700 font-mono ml-2 dark:text-green-200">{compute.sessionData.joint_output_room_id}</span>
 									</div>
 								</div>
 							</div>
@@ -226,7 +226,7 @@
 										size="sm"
 										onclick={handleStartSession}
 										disabled={isConnecting}
-										class="bg-green-600 hover:bg-green-700 text-xs disabled:opacity-50"
+										class="bg-green-500 hover:bg-green-600 text-xs disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
 									>
 										{#if isConnecting}
 											<span class="icon-[mdi--loading] animate-spin mr-1 size-3"></span>
@@ -277,58 +277,58 @@
 
 			<!-- Create New Session -->
 			{#if !compute.hasSession}
-				<Card.Root class="border-purple-500/30 bg-purple-500/5">
+				<Card.Root class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5">
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-purple-200">
+						<Card.Title class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200">
 							<span class="icon-[mdi--plus-circle] size-4"></span>
-							Create AI Session
+							Create Inference Session
 						</Card.Title>
 					</Card.Header>
 					<Card.Content>
 						<div class="space-y-4">
 							<div class="grid grid-cols-2 gap-4">
 								<div class="space-y-2">
-									<Label for="sessionId" class="text-purple-300">Session ID</Label>
+									<Label for="sessionId" class="text-purple-700 dark:text-purple-300">Session ID</Label>
 									<Input
 										id="sessionId"
 										bind:value={sessionId}
 										placeholder="my-session-01"
-										class="bg-slate-800 border-slate-600 text-slate-100"
+										class="bg-slate-50 border-slate-300 text-slate-900 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100"
 									/>
 								</div>
 								<div class="space-y-2">
-									<Label for="policyPath" class="text-purple-300">Policy Path</Label>
+									<Label for="policyPath" class="text-purple-700 dark:text-purple-300">Policy Path</Label>
 									<Input
 										id="policyPath"
 										bind:value={policyPath}
 										placeholder="./checkpoints/act_so101_beyond"
-										class="bg-slate-800 border-slate-600 text-slate-100"
+										class="bg-slate-50 border-slate-300 text-slate-900 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100"
 									/>
 								</div>
 							</div>
 
 							<div class="grid grid-cols-2 gap-4">
 								<div class="space-y-2">
-									<Label for="cameraNames" class="text-purple-300">Camera Names</Label>
+									<Label for="cameraNames" class="text-purple-700 dark:text-purple-300">Camera Names</Label>
 									<Input
 										id="cameraNames"
 										bind:value={cameraNames}
 										placeholder="front, wrist, overhead"
-										class="bg-slate-800 border-slate-600 text-slate-100"
+										class="bg-slate-50 border-slate-300 text-slate-900 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100"
 									/>
-									<p class="text-xs text-slate-400">Comma-separated camera names</p>
+									<p class="text-xs text-slate-600 dark:text-slate-400">Comma-separated camera names</p>
 								</div>
 								<div class="space-y-2">
-									<Label for="transportServerUrl" class="text-purple-300">Transport Server URL</Label>
+									<Label for="transportServerUrl" class="text-purple-700 dark:text-purple-300">Transport Server URL</Label>
 									<Input
 										id="transportServerUrl"
 										value={settings.transportServerUrl}
 										disabled
 										placeholder="http://localhost:8000"
-										class="bg-slate-800 border-slate-600 text-slate-100 opacity-60 cursor-not-allowed"
+										class="bg-slate-50 border-slate-300 text-slate-900 opacity-60 cursor-not-allowed dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100"
 										title="Change this value in the settings panel"
 									/>
-									<p class="text-xs text-slate-400">Configure in settings panel</p>
+									<p class="text-xs text-slate-600 dark:text-slate-400">Configure in settings panel</p>
 								</div>
 							</div>
 
@@ -337,9 +337,9 @@
 									type="checkbox"
 									id="useWorkspace"
 									bind:checked={useProvidedWorkspace}
-									class="rounded border-slate-600 bg-slate-800"
+									class="rounded border-slate-300 bg-slate-50 dark:border-slate-600 dark:bg-slate-800"
 								/>
-								<Label for="useWorkspace" class="text-purple-300 text-sm">
+								<Label for="useWorkspace" class="text-purple-700 text-sm dark:text-purple-300">
 									Use current workspace ({workspaceId})
 								</Label>
 							</div>
@@ -356,14 +356,14 @@
 								variant="default"
 								onclick={handleCreateSession}
 								disabled={isConnecting || !sessionId.trim() || !policyPath.trim()}
-								class="w-full bg-purple-600 hover:bg-purple-700 disabled:opacity-50"
+								class="w-full bg-purple-500 hover:bg-purple-600 disabled:opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700"
 							>
 								{#if isConnecting}
 									<span class="icon-[mdi--loading] animate-spin mr-2 size-4"></span>
 									Creating Session...
 								{:else}
 									<span class="icon-[mdi--rocket-launch] mr-2 size-4"></span>
-									Create AI Session
+									Create Inference Session
 								{/if}
 							</Button>
 						</div>
@@ -372,9 +372,9 @@
 			{/if}
 
 			<!-- Quick Info -->
-			<div class="rounded border border-slate-700 bg-slate-800/30 p-2 text-xs text-slate-500">
+			<div class="rounded border border-slate-300 bg-slate-100/30 p-2 text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-800/30 dark:text-slate-500">
 				<span class="icon-[mdi--information] mr-1 size-3"></span>
-				AI sessions require a trained ACT model and create dedicated communication rooms for video inputs,
+				Inference Sessions require a trained ACT model and create dedicated communication rooms for video inputs,
 				robot joint states, and control outputs in the inference server system.
 			</div>
 		</div>

src/lib/components/3d/elements/compute/modal/RobotInputConnectionModal.svelte

@@ -25,7 +25,7 @@
 
 	async function handleConnectRobotInput() {
 		if (!compute.hasSession) {
-			toast.error('No AI session available. Create a session first.');
+			toast.error('No Inference Session available. Create a session first.');
 			return;
 		}
 
@@ -36,10 +36,10 @@
 
 		isConnecting = true;
 		try {
-			// Get the joint input room ID from the AI session
+			// Get the joint input room ID from the Inference Session
 			const jointInputRoomId = compute.sessionData?.joint_input_room_id;
 			if (!jointInputRoomId) {
-				throw new Error('No joint input room found in AI session');
+				throw new Error('No joint input room found in Inference Session');
 			}
 
 			// Find the selected robot
@@ -53,7 +53,7 @@
 
 			connectedRobotId = selectedRobotId;
 
-			toast.success('Robot input connected to AI session', {
+			toast.success('Robot input connected to Inference Session', {
 				description: `Robot ${selectedRobotId} now sends joint data to AI`
 			});
 
@@ -98,54 +98,54 @@
 
 <Dialog.Root bind:open>
 	<Dialog.Content
-		class="max-h-[80vh] max-w-xl overflow-y-auto border-slate-600 bg-slate-900 text-slate-100"
+		class="max-h-[80vh] max-w-xl overflow-y-auto border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100"
 	>
 		<Dialog.Header class="pb-3">
-			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-100">
-				<span class="icon-[mdi--robot-industrial] size-5 text-amber-400"></span>
+			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
+				<span class="icon-[mdi--robot-industrial] size-5 text-amber-500 dark:text-amber-400"></span>
 				Robot Input - {compute.name || 'No Compute Selected'}
 			</Dialog.Title>
-			<Dialog.Description class="text-sm text-slate-400">
+			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
 				Connect robot joint data as input for AI inference
 			</Dialog.Description>
 		</Dialog.Header>
 
 		<div class="space-y-4">
-			<!-- AI Session Status -->
+			<!-- Inference Session Status -->
 			<div
-				class="flex items-center justify-between rounded-lg border border-purple-500/30 bg-purple-900/20 p-3"
+				class="flex items-center justify-between rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20"
 			>
 				<div class="flex items-center gap-2">
-					<span class="icon-[mdi--brain] size-4 text-purple-400"></span>
-					<span class="text-sm font-medium text-purple-300">AI Session</span>
+					<span class="icon-[mdi--brain] size-4 text-purple-500 dark:text-purple-400"></span>
+					<span class="text-sm font-medium text-purple-700 dark:text-purple-300">Inference Session</span>
 				</div>
 				{#if compute.hasSession}
-					<Badge variant="default" class="bg-purple-600 text-xs">
+					<Badge variant="default" class="bg-purple-500 text-xs dark:bg-purple-600">
 						{compute.statusInfo.statusText}
 					</Badge>
 				{:else}
-					<Badge variant="secondary" class="text-xs text-slate-400">No Session</Badge>
+					<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400">No Session</Badge>
 				{/if}
 			</div>
 
 			{#if !compute.hasSession}
-				<Card.Root class="border-yellow-500/30 bg-yellow-500/5">
+				<Card.Root class="border-yellow-300/30 bg-yellow-100/5 dark:border-yellow-500/30 dark:bg-yellow-500/5">
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-yellow-200">
+						<Card.Title class="flex items-center gap-2 text-base text-yellow-700 dark:text-yellow-200">
 							<span class="icon-[mdi--alert] size-4"></span>
-							AI Session Required
+							Inference Session Required
 						</Card.Title>
 					</Card.Header>
-					<Card.Content class="text-sm text-yellow-300">
-						You need to create an AI session before connecting robot inputs.
+					<Card.Content class="text-sm text-yellow-700 dark:text-yellow-300">
+						You need to create an Inference Session before connecting robot inputs.
 						The session provides a joint input room for receiving robot data.
 					</Card.Content>
 				</Card.Root>
 			{:else}
 				<!-- Robot Selection and Connection -->
-				<Card.Root class="border-amber-500/30 bg-amber-500/5">
+				<Card.Root class="border-amber-300/30 bg-amber-100/5 dark:border-amber-500/30 dark:bg-amber-500/5">
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-amber-200">
+						<Card.Title class="flex items-center gap-2 text-base text-amber-700 dark:text-amber-200">
 							<span class="icon-[mdi--robot-industrial] size-4"></span>
 							Robot Input Connection
 						</Card.Title>
@@ -153,10 +153,10 @@
 					<Card.Content class="space-y-4">
 						<!-- Available Robots -->
 						<div class="space-y-2">
-							<div class="text-sm font-medium text-amber-300">Available Robots:</div>
+							<div class="text-sm font-medium text-amber-700 dark:text-amber-300">Available Robots:</div>
 							<div class="max-h-40 overflow-y-auto space-y-2">
 								{#if robots.length === 0}
-									<div class="text-center py-4 text-sm text-slate-400">
+									<div class="text-center py-4 text-sm text-slate-600 dark:text-slate-400">
 										No robots available. Add robots first.
 									</div>
 								{:else}
@@ -164,21 +164,21 @@
 										<button
 											onclick={() => selectedRobotId = robot.id}
 											class="w-full p-3 rounded border text-left {selectedRobotId === robot.id 
-												? 'border-amber-500 bg-amber-500/20' 
-												: 'border-slate-600 bg-slate-800/50 hover:bg-slate-700/50'}"
+												? 'border-amber-400 bg-amber-100/20 dark:border-amber-500 dark:bg-amber-500/20' 
+												: 'border-slate-300 bg-slate-50/50 hover:bg-slate-100/50 dark:border-slate-600 dark:bg-slate-800/50 dark:hover:bg-slate-700/50'}"
 										>
 											<div class="flex items-center justify-between">
 												<div>
-													<div class="text-xs text-slate-400">
+													<div class="text-xs text-slate-600 dark:text-slate-400">
 														ID: {robot.id}
 													</div>
-													<div class="text-xs text-slate-400">
+													<div class="text-xs text-slate-600 dark:text-slate-400">
 														Producers: {robot.producers.length}
 													</div>
 												</div>
 												<div class="flex items-center gap-2">
 													{#if robot.producers.length > 0}
-														<Badge variant="default" class="bg-green-600 text-xs">
+														<Badge variant="default" class="bg-green-500 text-xs dark:bg-green-600">
 															Active
 														</Badge>
 													{:else}
@@ -196,13 +196,13 @@
 
 						<!-- Connection Status -->
 						{#if selectedRobotId}
-							<div class="rounded-lg border border-amber-500/30 bg-amber-900/20 p-3">
+							<div class="rounded-lg border border-amber-300/30 bg-amber-100/20 p-3 dark:border-amber-500/30 dark:bg-amber-900/20">
 								<div class="flex items-center justify-between">
 									<div>
-										<p class="text-sm font-medium text-amber-300">
+										<p class="text-sm font-medium text-amber-700 dark:text-amber-300">
 											Selected Robot: {selectedRobotId}
 										</p>
-										<p class="text-xs text-amber-400/70">
+										<p class="text-xs text-amber-600/70 dark:text-amber-400/70">
 											{connectedRobotId === selectedRobotId ? 'Connected to AI' : 'Not Connected'}
 										</p>
 									</div>
@@ -212,7 +212,7 @@
 											size="sm"
 											onclick={handleConnectRobotInput}
 											disabled={isConnecting}
-											class="bg-amber-600 hover:bg-amber-700 text-xs disabled:opacity-50"
+											class="bg-amber-500 hover:bg-amber-600 text-xs disabled:opacity-50 dark:bg-amber-600 dark:hover:bg-amber-700"
 										>
 											{#if isConnecting}
 												<span class="icon-[mdi--loading] animate-spin mr-1 size-3"></span>
@@ -240,20 +240,20 @@
 				</Card.Root>
 
 				<!-- Session Joint Input Details -->
-				<Card.Root class="border-blue-500/30 bg-blue-500/5">
+				<Card.Root class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5">
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-blue-200">
+						<Card.Title class="flex items-center gap-2 text-base text-blue-700 dark:text-blue-200">
 							<span class="icon-[mdi--information] size-4"></span>
-							Data Flow: Robot → AI Session
+							Data Flow: Robot → Inference Session
 						</Card.Title>
 					</Card.Header>
 					<Card.Content>
 						<div class="space-y-2 text-xs">
-							<div class="flex justify-between items-center p-2 rounded bg-slate-800/50">
-								<span class="text-blue-300 font-medium">Joint Input Room:</span>
-								<span class="text-blue-200 font-mono">{compute.sessionData?.joint_input_room_id}</span>
+							<div class="flex justify-between items-center p-2 rounded bg-slate-100/50 dark:bg-slate-800/50">
+								<span class="text-blue-700 font-medium dark:text-blue-300">Joint Input Room:</span>
+								<span class="text-blue-800 font-mono dark:text-blue-200">{compute.sessionData?.joint_input_room_id}</span>
 							</div>
-							<div class="text-slate-400 text-xs">
+							<div class="text-slate-600 text-xs dark:text-slate-400">
 								The robot will act as a <strong>PRODUCER</strong> and send its current joint positions to this room for AI processing.
 								The inference server receives this data as a CONSUMER.
 								All joint values should be normalized (-100 to +100 for most joints, 0 to 100 for gripper).
@@ -264,16 +264,16 @@
 
 				<!-- Connection Status -->
 				{#if connectedRobotId}
-					<Card.Root class="border-green-500/30 bg-green-500/5">
+					<Card.Root class="border-green-300/30 bg-green-100/5 dark:border-green-500/30 dark:bg-green-500/5">
 						<Card.Header>
-							<Card.Title class="flex items-center gap-2 text-base text-green-200">
+							<Card.Title class="flex items-center gap-2 text-base text-green-700 dark:text-green-200">
 								<span class="icon-[mdi--check-circle] size-4"></span>
 								Active Connection
 							</Card.Title>
 						</Card.Header>
 						<Card.Content>
-							<div class="text-sm text-green-300">
-								Robot <span class="font-mono">{connectedRobotId}</span> is now sending joint data to the AI session as a producer.
+							<div class="text-sm text-green-700 dark:text-green-300">
+								Robot <span class="font-mono">{connectedRobotId}</span> is now sending joint data to the Inference Session as a producer.
 								The AI model will use this data along with camera inputs for inference.
 							</div>
 						</Card.Content>
@@ -282,7 +282,7 @@
 			{/if}
 
 			<!-- Quick Info -->
-			<div class="rounded border border-slate-700 bg-slate-800/30 p-2 text-xs text-slate-500">
+			<div class="rounded border border-slate-300 bg-slate-100/30 p-2 text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-800/30 dark:text-slate-500">
 				<span class="icon-[mdi--information] mr-1 size-3"></span>
 				Robot input: Robot acts as PRODUCER sending joint positions → Inference server acts as CONSUMER receiving data for processing.
 			</div>

src/lib/components/3d/elements/compute/modal/RobotOutputConnectionModal.svelte

@@ -25,7 +25,7 @@
 
 	async function handleConnectRobotOutput() {
 		if (!compute.hasSession) {
-			toast.error('No AI session available. Create a session first.');
+			toast.error('No Inference Session available. Create a session first.');
 			return;
 		}
 
@@ -36,10 +36,10 @@
 
 		isConnecting = true;
 		try {
-			// Get the joint output room ID from the AI session
+			// Get the joint output room ID from the Inference Session
 			const jointOutputRoomId = compute.sessionData?.joint_output_room_id;
 			if (!jointOutputRoomId) {
-				throw new Error('No joint output room found in AI session');
+				throw new Error('No joint output room found in Inference Session');
 			}
 
 			// Find the selected robot
@@ -53,7 +53,7 @@
 
 			connectedRobotId = selectedRobotId;
 
-			toast.success('Robot output connected to AI session', {
+			toast.success('Robot output connected to Inference Session', {
 				description: `Robot ${selectedRobotId} now receives AI commands`
 			});
 
@@ -95,54 +95,54 @@
 
 <Dialog.Root bind:open>
 	<Dialog.Content
-		class="max-h-[80vh] max-w-xl overflow-y-auto border-slate-600 bg-slate-900 text-slate-100"
+		class="max-h-[80vh] max-w-xl overflow-y-auto border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100"
 	>
 		<Dialog.Header class="pb-3">
-			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-100">
-				<span class="icon-[mdi--robot-outline] size-5 text-blue-400"></span>
+			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
+				<span class="icon-[mdi--robot-outline] size-5 text-blue-500 dark:text-blue-400"></span>
 				Robot Output - {compute.name || 'No Compute Selected'}
 			</Dialog.Title>
-			<Dialog.Description class="text-sm text-slate-400">
+			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
 				Connect AI command output to control robot actuators
 			</Dialog.Description>
 		</Dialog.Header>
 
 		<div class="space-y-4">
-			<!-- AI Session Status -->
+			<!-- Inference Session Status -->
 			<div
-				class="flex items-center justify-between rounded-lg border border-purple-500/30 bg-purple-900/20 p-3"
+				class="flex items-center justify-between rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20"
 			>
 				<div class="flex items-center gap-2">
-					<span class="icon-[mdi--brain] size-4 text-purple-400"></span>
-					<span class="text-sm font-medium text-purple-300">AI Session</span>
+					<span class="icon-[mdi--brain] size-4 text-purple-500 dark:text-purple-400"></span>
+					<span class="text-sm font-medium text-purple-700 dark:text-purple-300">Inference Session</span>
 				</div>
 				{#if compute.hasSession}
-					<Badge variant="default" class="bg-purple-600 text-xs">
+					<Badge variant="default" class="bg-purple-500 text-xs dark:bg-purple-600">
 						{compute.statusInfo.statusText}
 					</Badge>
 				{:else}
-					<Badge variant="secondary" class="text-xs text-slate-400">No Session</Badge>
+					<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400">No Session</Badge>
 				{/if}
 			</div>
 
 			{#if !compute.hasSession}
-				<Card.Root class="border-yellow-500/30 bg-yellow-500/5">
+				<Card.Root class="border-yellow-300/30 bg-yellow-100/5 dark:border-yellow-500/30 dark:bg-yellow-500/5">
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-yellow-200">
+						<Card.Title class="flex items-center gap-2 text-base text-yellow-700 dark:text-yellow-200">
 							<span class="icon-[mdi--alert] size-4"></span>
-							AI Session Required
+							Inference Session Required
 						</Card.Title>
 					</Card.Header>
-					<Card.Content class="text-sm text-yellow-300">
-						You need to create an AI session before connecting robot outputs.
+					<Card.Content class="text-sm text-yellow-700 dark:text-yellow-300">
+						You need to create an Inference Session before connecting robot outputs.
 						The session provides a joint output room for sending AI commands.
 					</Card.Content>
 				</Card.Root>
 			{:else}
 				<!-- Robot Selection and Connection -->
-				<Card.Root class="border-blue-500/30 bg-blue-500/5">
+				<Card.Root class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5">
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-blue-200">
+						<Card.Title class="flex items-center gap-2 text-base text-blue-700 dark:text-blue-200">
 							<span class="icon-[mdi--robot-outline] size-4"></span>
 							Robot Output Connection
 						</Card.Title>
@@ -150,10 +150,10 @@
 					<Card.Content class="space-y-4">
 						<!-- Available Robots -->
 						<div class="space-y-2">
-							<div class="text-sm font-medium text-blue-300">Available Robots:</div>
+							<div class="text-sm font-medium text-blue-700 dark:text-blue-300">Available Robots:</div>
 							<div class="max-h-40 overflow-y-auto space-y-2">
 								{#if robots.length === 0}
-									<div class="text-center py-4 text-sm text-slate-400">
+									<div class="text-center py-4 text-sm text-slate-600 dark:text-slate-400">
 										No robots available. Add robots first.
 									</div>
 								{:else}
@@ -161,21 +161,21 @@
 										<button
 											onclick={() => selectedRobotId = robot.id}
 											class="w-full p-3 rounded border text-left {selectedRobotId === robot.id 
-												? 'border-blue-500 bg-blue-500/20' 
-												: 'border-slate-600 bg-slate-800/50 hover:bg-slate-700/50'}"
+												? 'border-blue-400 bg-blue-100/20 dark:border-blue-500 dark:bg-blue-500/20' 
+												: 'border-slate-300 bg-slate-50/50 hover:bg-slate-100/50 dark:border-slate-600 dark:bg-slate-800/50 dark:hover:bg-slate-700/50'}"
 										>
 											<div class="flex items-center justify-between">
 												<div>
-													<div class="text-xs text-slate-400">
+													<div class="text-xs text-slate-600 dark:text-slate-400">
 														ID: {robot.id}
 													</div>
-													<div class="text-xs text-slate-400">
+													<div class="text-xs text-slate-600 dark:text-slate-400">
 														Consumer: {robot.hasConsumer ? 'Connected' : 'None'}
 													</div>
 												</div>
 												<div class="flex items-center gap-2">
 													{#if robot.hasConsumer}
-														<Badge variant="default" class="bg-green-600 text-xs">
+														<Badge variant="default" class="bg-green-500 text-xs dark:bg-green-600">
 															Active
 														</Badge>
 													{:else}
@@ -193,13 +193,13 @@
 
 						<!-- Connection Status -->
 						{#if selectedRobotId}
-							<div class="rounded-lg border border-blue-500/30 bg-blue-900/20 p-3">
+							<div class="rounded-lg border border-blue-300/30 bg-blue-100/20 p-3 dark:border-blue-500/30 dark:bg-blue-900/20">
 								<div class="flex items-center justify-between">
 									<div>
-										<p class="text-sm font-medium text-blue-300">
+										<p class="text-sm font-medium text-blue-700 dark:text-blue-300">
 											Selected Robot: {selectedRobotId}
 										</p>
-										<p class="text-xs text-blue-400/70">
+										<p class="text-xs text-blue-600/70 dark:text-blue-400/70">
 											{connectedRobotId === selectedRobotId ? 'Connected to AI' : 'Not Connected'}
 										</p>
 									</div>
@@ -209,7 +209,7 @@
 											size="sm"
 											onclick={handleConnectRobotOutput}
 											disabled={isConnecting}
-											class="bg-blue-600 hover:bg-blue-700 text-xs disabled:opacity-50"
+											class="bg-blue-500 hover:bg-blue-600 text-xs disabled:opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700"
 										>
 											{#if isConnecting}
 												<span class="icon-[mdi--loading] animate-spin mr-1 size-3"></span>
@@ -237,20 +237,20 @@
 				</Card.Root>
 
 				<!-- Session Joint Output Details -->
-				<Card.Root class="border-orange-500/30 bg-orange-500/5">
+				<Card.Root class="border-orange-300/30 bg-orange-100/5 dark:border-orange-500/30 dark:bg-orange-500/5">
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-orange-200">
+						<Card.Title class="flex items-center gap-2 text-base text-orange-700 dark:text-orange-200">
 							<span class="icon-[mdi--information] size-4"></span>
-							Data Flow: AI Session → Robot
+							Data Flow: Inference Session → Robot
 						</Card.Title>
 					</Card.Header>
 					<Card.Content>
 						<div class="space-y-2 text-xs">
-							<div class="flex justify-between items-center p-2 rounded bg-slate-800/50">
-								<span class="text-orange-300 font-medium">Joint Output Room:</span>
-								<span class="text-orange-200 font-mono">{compute.sessionData?.joint_output_room_id}</span>
+							<div class="flex justify-between items-center p-2 rounded bg-slate-100/50 dark:bg-slate-800/50">
+								<span class="text-orange-700 font-medium dark:text-orange-300">Joint Output Room:</span>
+								<span class="text-orange-800 font-mono dark:text-orange-200">{compute.sessionData?.joint_output_room_id}</span>
 							</div>
-							<div class="text-slate-400 text-xs">
+							<div class="text-slate-600 text-xs dark:text-slate-400">
 								The inference server will act as a <strong>PRODUCER</strong> and send predicted joint commands to this room for robot execution.
 								The robot receives this data as a CONSUMER.
 								All joint values will be normalized (-100 to +100 for most joints, 0 to 100 for gripper).
@@ -261,15 +261,15 @@
 
 				<!-- Connection Status -->
 				{#if connectedRobotId}
-					<Card.Root class="border-green-500/30 bg-green-500/5">
+					<Card.Root class="border-green-300/30 bg-green-100/5 dark:border-green-500/30 dark:bg-green-500/5">
 						<Card.Header>
-							<Card.Title class="flex items-center gap-2 text-base text-green-200">
+							<Card.Title class="flex items-center gap-2 text-base text-green-700 dark:text-green-200">
 								<span class="icon-[mdi--check-circle] size-4"></span>
 								Active Connection
 							</Card.Title>
 						</Card.Header>
 						<Card.Content>
-							<div class="text-sm text-green-300">
+							<div class="text-sm text-green-700 dark:text-green-300">
 								Robot <span class="font-mono">{connectedRobotId}</span> is now receiving AI commands as a consumer.
 								The robot will execute joint movements based on AI inference results.
 							</div>
@@ -279,7 +279,7 @@
 			{/if}
 
 			<!-- Quick Info -->
-			<div class="rounded border border-slate-700 bg-slate-800/30 p-2 text-xs text-slate-500">
+			<div class="rounded border border-slate-300 bg-slate-100/30 p-2 text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-800/30 dark:text-slate-500">
 				<span class="icon-[mdi--information] mr-1 size-3"></span>
 				Robot output: Inference server acts as PRODUCER sending commands → Robot acts as CONSUMER receiving and executing movements.
 			</div>

src/lib/components/3d/elements/compute/modal/VideoInputConnectionModal.svelte

@@ -32,7 +32,7 @@
 
 	async function handleConnectLocalCamera() {
 		if (!compute.hasSession) {
-			toast.error('No AI session available. Create a session first.');
+			toast.error('No Inference Session available. Create a session first.');
 			return;
 		}
 
@@ -65,7 +65,7 @@
 			// Start streaming
 			await videoProducer.startCamera();
 
-			toast.success(`Camera connected to AI session`, {
+			toast.success(`Camera connected to Inference Session`, {
 				description: `Local camera streaming to ${selectedCameraName} input`
 			});
 
@@ -124,13 +124,13 @@
 		</Dialog.Header>
 
 		<div class="space-y-4">
-			<!-- AI Session Status -->
+			<!-- Inference Session Status -->
 			<div
 				class="flex items-center justify-between rounded-lg border border-purple-500/30 bg-purple-900/20 p-3"
 			>
 				<div class="flex items-center gap-2">
 					<span class="icon-[mdi--brain] size-4 text-purple-400"></span>
-					<span class="text-sm font-medium text-purple-300">AI Session</span>
+					<span class="text-sm font-medium text-purple-300">Inference Session</span>
 				</div>
 				{#if compute.hasSession}
 					<Badge variant="default" class="bg-purple-600 text-xs">
@@ -146,11 +146,11 @@
 					<Card.Header>
 						<Card.Title class="flex items-center gap-2 text-base text-yellow-200">
 							<span class="icon-[mdi--alert] size-4"></span>
-							AI Session Required
+							Inference Session Required
 						</Card.Title>
 					</Card.Header>
 					<Card.Content class="text-sm text-yellow-300">
-						You need to create an AI session before connecting video inputs.
+						You need to create an Inference Session before connecting video inputs.
 						The session defines which camera names are available for connection.
 					</Card.Content>
 				</Card.Root>

src/lib/components/3d/elements/compute/status/ComputeInputBoxUIKit.svelte

@@ -23,7 +23,7 @@
 
 <!--
 @component
-Compact input box showing the status of video and robot inputs for AI sessions.
+Compact input box showing the status of video and robot inputs for Inference Sessions.
 Displays input connection information when session exists or connection prompt when disconnected.
 -->
 

src/lib/components/3d/elements/compute/status/ComputeOutputBoxUIKit.svelte

@@ -28,7 +28,7 @@
 
 <!--
 @component
-Compact output box showing the status of robot outputs for AI sessions.
+Compact output box showing the status of robot outputs for Inference Sessions.
 Displays output connection information when session exists or connection prompt when disconnected.
 -->
 

src/lib/components/3d/elements/compute/status/RobotInputBoxUIKit.svelte

@@ -22,7 +22,7 @@
 
 <!--
 @component
-Compact robot input box showing the status of robot joint states input for AI sessions.
+Compact robot input box showing the status of robot joint states input for Inference Sessions.
 Displays robot connection information when session exists or connection prompt when disconnected.
 -->
 

src/lib/components/3d/elements/compute/status/RobotOutputBoxUIKit.svelte

@@ -16,7 +16,7 @@
 
 <!--
 @component
-Robot output box showing the status of robot joint commands output from AI sessions.
+Robot output box showing the status of robot joint commands output from Inference Sessions.
 Displays robot command output information when session exists or connection prompt when disconnected.
 -->
 

src/lib/components/3d/elements/compute/status/VideoInputBoxUIKit.svelte

@@ -23,7 +23,7 @@
 
 <!--
 @component
-Compact video input box showing the status of camera video streams for AI sessions.
+Compact video input box showing the status of camera video streams for Inference Sessions.
 Displays video connection information when session exists or connection prompt when disconnected.
 -->
 

src/lib/components/3d/elements/robot/modal/InputConnectionModal.svelte

@@ -193,14 +193,14 @@
 
 <Dialog.Root bind:open>
 	<Dialog.Content
-		class="max-h-[85vh] max-w-4xl overflow-hidden border-slate-600 bg-slate-900 text-slate-100"
+		class="max-h-[85vh] max-w-4xl overflow-hidden border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100"
 	>
 		<Dialog.Header class="pb-3">
-			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-100">
-				<span class="icon-[mdi--account-supervisor] size-5 text-green-400"></span>
+			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
+				<span class="icon-[mdi--account-supervisor] size-5 text-green-500 dark:text-green-400"></span>
 				Input Connection - Robot {robot.id}
 			</Dialog.Title>
-			<Dialog.Description class="text-sm text-slate-400">
+			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
 				Configure how this robot receives commands. Choose between direct hardware control or remote collaboration.
 			</Dialog.Description>
 		</Dialog.Header>
@@ -209,10 +209,10 @@
 			<div class="space-y-4 pb-4">
 				<!-- Error display -->
 				{#if error}
-					<Alert.Root class="border-red-500/30 bg-red-900/20">
-						<span class="icon-[mdi--alert-circle] size-4 text-red-400"></span>
-						<Alert.Title class="text-red-300">Connection Error</Alert.Title>
-						<Alert.Description class="text-red-400 text-sm">
+					<Alert.Root class="border-red-300/30 bg-red-100/20 dark:border-red-500/30 dark:bg-red-900/20">
+						<span class="icon-[mdi--alert-circle] size-4 text-red-500 dark:text-red-400"></span>
+						<Alert.Title class="text-red-700 dark:text-red-300">Connection Error</Alert.Title>
+						<Alert.Description class="text-red-600 text-sm dark:text-red-400">
 							{error}
 						</Alert.Description>
 					</Alert.Root>
@@ -220,24 +220,24 @@
 
 			<!-- USB Calibration Panel -->
 			{#if showUSBCalibration}
-				<Card.Root class="border-orange-500/30 bg-orange-900/20">
+				<Card.Root class="border-orange-300/30 bg-orange-100/20 dark:border-orange-500/30 dark:bg-orange-900/20">
 					<Card.Header>
 						<div class="flex justify-between items-center">
-							<Card.Title class="text-lg font-semibold text-orange-200">
+							<Card.Title class="text-lg font-semibold text-orange-700 dark:text-orange-200">
 								Hardware Calibration Required
 							</Card.Title>
 							<button
 								onclick={onCalibrationCancel}
-								class="text-gray-400 hover:text-white"
+								class="text-slate-600 hover:text-slate-900 dark:text-gray-400 dark:hover:text-white"
 							>
 								✕
 							</button>
 						</div>
 					</Card.Header>
 					<Card.Content class="space-y-4">
-						<Alert.Root class="border-orange-500/30 bg-orange-500/10">
-							<span class="icon-[mdi--information] size-4 text-orange-400"></span>
-							<Alert.Description class="text-orange-200 text-sm">
+						<Alert.Root class="border-orange-300/30 bg-orange-100/10 dark:border-orange-500/30 dark:bg-orange-500/10">
+							<span class="icon-[mdi--information] size-4 text-orange-500 dark:text-orange-400"></span>
+							<Alert.Description class="text-orange-700 text-sm dark:text-orange-200">
 								Before connecting to the physical robot, calibration is required to map the servo positions to software values. This ensures accurate control.
 							</Alert.Description>
 						</Alert.Root>
@@ -253,23 +253,23 @@
 			{:else}
 
 			<!-- Current Status Overview -->
-			<Card.Root class="border-green-500/30 bg-green-900/20">
+			<Card.Root class="border-green-300/30 bg-green-100/20 dark:border-green-500/30 dark:bg-green-900/20">
 				<Card.Content class="p-4">
 					<div class="flex items-center justify-between">
 						<div class="flex items-center gap-2">
-							<span class="icon-[mdi--connection] size-4 text-green-400"></span>
-							<span class="text-sm font-medium text-green-300">Current Input Source</span>
+							<span class="icon-[mdi--connection] size-4 text-green-500 dark:text-green-400"></span>
+							<span class="text-sm font-medium text-green-700 dark:text-green-300">Current Input Source</span>
 						</div>
 						{#if robot.hasConsumer}
-							<Badge variant="default" class="bg-green-600 text-xs">
+							<Badge variant="default" class="bg-green-500 text-xs dark:bg-green-600">
 								{robot.consumer?.name || 'Connected'}
 							</Badge>
 						{:else}
-							<Badge variant="secondary" class="text-xs text-slate-400">No Input Connected</Badge>
+							<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400">No Input Connected</Badge>
 						{/if}
 					</div>
 					{#if robot.hasConsumer}
-						<div class="mt-2 text-xs text-green-400/70">
+						<div class="mt-2 text-xs text-green-600/70 dark:text-green-400/70">
 							Status: {robot.consumer?.status.isConnected ? 'Connected' : 'Disconnected'}
 						</div>
 					{/if}
@@ -277,24 +277,24 @@
 			</Card.Root>
 
 			<!-- Local Hardware Connection -->
-			<Card.Root class="border-blue-500/30 bg-blue-500/5">
+			<Card.Root class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5">
 				<Card.Header>
-					<Card.Title class="flex items-center gap-2 text-base text-blue-200">
+					<Card.Title class="flex items-center gap-2 text-base text-blue-700 dark:text-blue-200">
 						<span class="icon-[mdi--usb-port] size-4"></span>
 						Local Hardware (USB)
 					</Card.Title>
-					<Card.Description class="text-xs text-blue-300/70">
+					<Card.Description class="text-xs text-blue-600/70 dark:text-blue-300/70">
 						Read physical robot movements in real-time
 					</Card.Description>
 				</Card.Header>
 				<Card.Content class="space-y-3">
 					{#if robot.hasConsumer && robot.consumer?.name === 'USB Consumer'}
 						<!-- USB Connected State -->
-						<div class="rounded-lg border border-blue-500/30 bg-blue-900/20 p-3">
+						<div class="rounded-lg border border-blue-300/30 bg-blue-100/20 p-3 dark:border-blue-500/30 dark:bg-blue-900/20">
 							<div class="flex items-center justify-between">
 								<div>
-									<p class="text-sm font-medium text-blue-300">Hardware Connected</p>
-									<p class="text-xs text-blue-400/70">Reading physical servo positions</p>
+									<p class="text-sm font-medium text-blue-700 dark:text-blue-300">Hardware Connected</p>
+									<p class="text-xs text-blue-600/70 dark:text-blue-400/70">Reading physical servo positions</p>
 								</div>
 								<Button
 									variant="destructive"
@@ -314,14 +314,14 @@
 							variant="secondary"
 							onclick={connectUSBInput}
 							disabled={isConnecting || robot.hasConsumer}
-							class="w-full bg-blue-600 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
+							class="w-full bg-blue-500 text-sm text-white hover:bg-blue-600 disabled:opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700"
 						>
 							<span class="icon-[mdi--usb] mr-2 size-4"></span>
 							{isConnecting ? 'Connecting...' : 'Connect to Hardware'}
 						</Button>
 						
 						{#if robot.hasConsumer}
-							<p class="text-xs text-slate-500">
+							<p class="text-xs text-slate-600 dark:text-slate-500">
 								Disconnect current input to connect USB hardware
 							</p>
 						{/if}
@@ -330,15 +330,15 @@
 			</Card.Root>
 
 			<!-- Remote Collaboration -->
-			<Card.Root class="border-purple-500/30 bg-purple-500/5">
+			<Card.Root class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5">
 				<Card.Header>
 					<div class="flex items-center justify-between">
 						<div>
-							<Card.Title class="flex items-center gap-2 text-base text-purple-200">
+							<Card.Title class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200">
 								<span class="icon-[mdi--cloud-sync] size-4"></span>
 								Remote Collaboration (Rooms)
 							</Card.Title>
-							<Card.Description class="text-xs text-purple-300/70">
+							<Card.Description class="text-xs text-purple-600/70 dark:text-purple-300/70">
 								Receive commands from AI systems, remote users, or other software
 							</Card.Description>
 						</div>
@@ -347,7 +347,7 @@
 							size="sm"
 							onclick={refreshRooms}
 							disabled={robotManager.roomsLoading || isConnecting}
-							class="h-7 px-2 text-xs text-purple-300 hover:text-purple-200 hover:bg-purple-500/20"
+							class="h-7 px-2 text-xs text-purple-700 hover:text-purple-800 hover:bg-purple-200/20 dark:text-purple-300 dark:hover:text-purple-200 dark:hover:bg-purple-500/20"
 						>
 							{#if robotManager.roomsLoading}
 								<span class="icon-[mdi--loading] animate-spin size-3 mr-1"></span>
@@ -362,11 +362,11 @@
 				<Card.Content class="space-y-4">
 					{#if robot.hasConsumer && robot.consumer?.name?.includes('Remote Consumer')}
 						<!-- Remote Connected State -->
-						<div class="rounded-lg border border-purple-500/30 bg-purple-900/20 p-3">
+						<div class="rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20">
 							<div class="flex items-center justify-between">
 								<div>
-									<p class="text-sm font-medium text-purple-300">Room Connected</p>
-									<p class="text-xs text-purple-400/70">Receiving remote commands</p>
+									<p class="text-sm font-medium text-purple-700 dark:text-purple-300">Room Connected</p>
+									<p class="text-xs text-purple-600/70 dark:text-purple-400/70">Receiving remote commands</p>
 								</div>
 								<Button
 									variant="destructive"
@@ -382,20 +382,20 @@
 						</div>
 					{:else}
 						<!-- Create New Room -->
-						<div class="rounded border-2 border-dashed border-green-500/50 bg-green-500/5 p-3">
+						<div class="rounded border-2 border-dashed border-green-400/50 bg-green-100/5 p-3 dark:border-green-500/50 dark:bg-green-500/5">
 							<div class="space-y-2">
 								<div class="flex items-center gap-2">
-									<span class="icon-[mdi--plus-circle] size-4 text-green-400"></span>
-									<p class="text-sm font-medium text-green-300">Create New Room</p>
+									<span class="icon-[mdi--plus-circle] size-4 text-green-500 dark:text-green-400"></span>
+									<p class="text-sm font-medium text-green-700 dark:text-green-300">Create New Room</p>
 								</div>
-								<p class="text-xs text-green-400/70">
+								<p class="text-xs text-green-600/70 dark:text-green-400/70">
 									Create a room where others can send commands to this robot
 								</p>
 								<input
 									bind:value={customRoomId}
 									placeholder={`Room ID (default: ${robot.id})`}
 									disabled={isConnecting || robot.hasConsumer}
-									class="w-full px-2 py-1 bg-slate-700 border border-slate-600 rounded text-xs text-slate-100 disabled:opacity-50"
+									class="w-full px-2 py-1 bg-slate-50 border border-slate-300 rounded text-xs text-slate-900 disabled:opacity-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
 								/>
 								<div class="flex gap-1">
 									<Button
@@ -403,7 +403,7 @@
 										size="sm"
 										onclick={createRoom}
 										disabled={isConnecting || robot.hasConsumer}
-										class="h-6 px-2 text-xs bg-green-600 hover:bg-green-700 disabled:opacity-50"
+										class="h-6 px-2 text-xs bg-green-500 hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
 									>
 										Create Only
 									</Button>
@@ -412,7 +412,7 @@
 										size="sm"
 										onclick={createRoomAndJoinAsInput}
 										disabled={isConnecting || robot.hasConsumer}
-										class="h-6 px-2 text-xs bg-green-600 hover:bg-green-700 disabled:opacity-50"
+										class="h-6 px-2 text-xs bg-green-500 hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
 									>
 										Create & Join as Input
 									</Button>
@@ -423,26 +423,26 @@
 						<!-- Existing Rooms -->
 						<div class="space-y-2">
 							<div class="flex items-center justify-between">
-								<span class="text-xs font-medium text-purple-300">Join Existing Room:</span>
-								<span class="text-xs text-slate-400">
+								<span class="text-xs font-medium text-purple-700 dark:text-purple-300">Join Existing Room:</span>
+								<span class="text-xs text-slate-600 dark:text-slate-400">
 									{robotManager.rooms.length} room{robotManager.rooms.length !== 1 ? 's' : ''} available
 								</span>
 							</div>
 							
 							<div class="max-h-40 space-y-2 overflow-y-auto">
 								{#if robotManager.rooms.length === 0}
-									<div class="text-center py-3 text-xs text-slate-400">
+									<div class="text-center py-3 text-xs text-slate-600 dark:text-slate-400">
 										{robotManager.roomsLoading ? 'Loading rooms...' : 'No rooms available. Create one to get started.'}
 									</div>
 								{:else}
 									{#each robotManager.rooms as room}
-										<div class="rounded border border-slate-600 bg-slate-800/50 p-2">
+										<div class="rounded border border-slate-300 bg-slate-50/50 p-2 dark:border-slate-600 dark:bg-slate-800/50">
 											<div class="flex items-start justify-between gap-3">
 												<div class="flex-1 min-w-0">
-													<p class="text-xs font-medium text-slate-200 truncate">
+													<p class="text-xs font-medium text-slate-800 truncate dark:text-slate-200">
 														{room.id}
 													</p>
-													<div class="flex gap-3 text-xs text-slate-400">
+													<div class="flex gap-3 text-xs text-slate-600 dark:text-slate-400">
 														<span>{room.has_producer ? '📤 Has Output' : '📥 No Output'}</span>
 														<span>👥 {room.participants?.total || 0} users</span>
 													</div>
@@ -455,7 +455,7 @@
 														joinRoomAsInput();
 													}}
 													disabled={isConnecting || robot.hasConsumer}
-													class="h-6 px-2 text-xs bg-purple-600 hover:bg-purple-700 shrink-0 disabled:opacity-50"
+													class="h-6 px-2 text-xs bg-purple-500 hover:bg-purple-600 shrink-0 disabled:opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700"
 												>
 													<span class="icon-[mdi--login] mr-1 size-3"></span>
 													Join as Input
@@ -468,7 +468,7 @@
 						</div>
 
 						{#if robot.hasConsumer}
-							<p class="text-xs text-slate-500">
+							<p class="text-xs text-slate-600 dark:text-slate-500">
 								Disconnect current input to join a room
 							</p>
 						{/if}
@@ -477,10 +477,10 @@
 			</Card.Root>
 
 			<!-- Help Information -->
-			<Alert.Root class="border-slate-700 bg-slate-800/30">
-				<span class="icon-[mdi--help-circle] size-4 text-slate-400"></span>
-				<Alert.Title class="text-slate-300">Input Sources</Alert.Title>
-				<Alert.Description class="text-slate-400 text-xs">
+			<Alert.Root class="border-slate-300 bg-slate-100/30 dark:border-slate-700 dark:bg-slate-800/30">
+				<span class="icon-[mdi--help-circle] size-4 text-slate-600 dark:text-slate-400"></span>
+				<Alert.Title class="text-slate-700 dark:text-slate-300">Input Sources</Alert.Title>
+				<Alert.Description class="text-slate-600 text-xs dark:text-slate-400">
 					<strong>USB:</strong> Read physical movements • <strong>Remote:</strong> Receive network commands • Only one active at a time
 				</Alert.Description>
 			</Alert.Root>

src/lib/components/3d/elements/robot/modal/ManualControlSheet.svelte

@@ -19,16 +19,16 @@
 	<Sheet.Content
 		trapFocus={false}
 		side="right"
-		class="w-80 gap-0 border-l border-slate-600 bg-gradient-to-b from-slate-700 to-slate-800 p-0 text-white sm:w-96"
+		class="w-80 gap-0 border-l border-slate-300 bg-gradient-to-b from-slate-100 to-slate-200 p-0 text-slate-900 dark:border-slate-600 dark:bg-gradient-to-b dark:from-slate-700 dark:to-slate-800 dark:text-white sm:w-96"
 	>
 		<!-- Header -->
-		<Sheet.Header class="border-b border-slate-600 bg-slate-700/80 p-6 backdrop-blur-sm">
+		<Sheet.Header class="border-b border-slate-300 bg-slate-200/80 p-6 backdrop-blur-sm dark:border-slate-600 dark:bg-slate-700/80">
 			<div class="flex items-center justify-between">
 				<div class="flex items-center gap-3">
-					<span class="icon-[mdi--tune] size-6 text-purple-400"></span>
+					<span class="icon-[mdi--tune] size-6 text-purple-500 dark:text-purple-400"></span>
 					<div>
-						<Sheet.Title class="text-xl font-semibold text-slate-100">Manual Control</Sheet.Title>
-						<p class="mt-1 text-sm text-slate-400">Direct robot joint manipulation</p>
+						<Sheet.Title class="text-xl font-semibold text-slate-900 dark:text-slate-100">Manual Control</Sheet.Title>
+						<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Direct robot joint manipulation</p>
 					</div>
 				</div>
 			</div>
@@ -36,25 +36,25 @@
 
 		{#if robot}
 			<!-- Content -->
-			<div class="scrollbar-thin scrollbar-track-slate-700 scrollbar-thumb-slate-500 flex-1 overflow-y-auto px-4">
+			<div class="scrollbar-thin scrollbar-track-slate-300 scrollbar-thumb-slate-500 flex-1 overflow-y-auto px-4 dark:scrollbar-track-slate-700 dark:scrollbar-thumb-slate-500">
 				<div class="space-y-6 py-4">
 					<!-- Manual Joint Controls -->
 					{#if robot.isManualControlEnabled}
 						<div class="space-y-4">
 							<div class="mb-3 flex items-center gap-3">
-								<span class="icon-[lucide--rotate-3d] size-5 text-purple-400"></span>
-								<h3 class="text-lg font-medium text-slate-100">Joint Controls</h3>
-								<Badge variant="default" class="ml-auto bg-purple-600 text-xs">
+								<span class="icon-[lucide--rotate-3d] size-5 text-purple-500 dark:text-purple-400"></span>
+								<h3 class="text-lg font-medium text-slate-900 dark:text-slate-100">Joint Controls</h3>
+								<Badge variant="default" class="ml-auto bg-purple-500 text-xs dark:bg-purple-600">
 									{robot.jointArray.length}
 								</Badge>
 							</div>
 
-							<p class="text-xs text-slate-400">
+							<p class="text-xs text-slate-600 dark:text-slate-400">
 								Each joint can be moved independently using sliders. Values are normalized percentages.
 							</p>
 
 							{#if robot.jointArray.length === 0}
-								<p class="py-4 text-center text-xs text-slate-500 italic">No joints available</p>
+								<p class="py-4 text-center text-xs text-slate-600 italic dark:text-slate-500">No joints available</p>
 							{:else}
 								<div class="space-y-3">
 									{#each robot.jointArray as joint (joint.name)}
@@ -62,15 +62,15 @@
 										{@const minValue = isGripper ? 0 : -100}
 										{@const maxValue = isGripper ? 100 : 100}
 										
-										<div class="space-y-2 rounded-lg border border-slate-600 bg-slate-800/50 p-3">
+										<div class="space-y-2 rounded-lg border border-slate-300 bg-slate-100/50 p-3 dark:border-slate-600 dark:bg-slate-800/50">
 											<div class="flex items-center justify-between">
-												<span class="text-sm font-medium text-slate-200">{joint.name}</span>
+												<span class="text-sm font-medium text-slate-800 dark:text-slate-200">{joint.name}</span>
 												<div class="flex items-center gap-2 text-xs">
-													<span class="font-mono text-purple-400">
+													<span class="font-mono text-purple-600 dark:text-purple-400">
 														{joint.value.toFixed(1)}{isGripper ? '%' : '%'}
 													</span>
 													{#if joint.limits}
-														<span class="font-mono text-slate-500 text-[10px]">
+														<span class="font-mono text-slate-500 text-[10px] dark:text-slate-500">
 															({joint.limits.lower.toFixed(1)}° to {joint.limits.upper.toFixed(1)}°)
 														</span>
 													{/if}
@@ -87,9 +87,9 @@
 														const val = parseFloat((e.target as HTMLInputElement).value);
 														robot.updateJoint(joint.name, val);
 													}}
-													class="slider h-2 w-full cursor-pointer appearance-none rounded-lg bg-slate-600"
+													class="slider h-2 w-full cursor-pointer appearance-none rounded-lg bg-slate-300 dark:bg-slate-600"
 												/>
-												<div class="flex justify-between text-xs text-slate-500">
+												<div class="flex justify-between text-xs text-slate-600 dark:text-slate-500">
 													<span>{minValue}{isGripper ? '% (closed)' : '%'}</span>
 													<span>{maxValue}{isGripper ? '% (open)' : '%'}</span>
 												</div>
@@ -102,12 +102,12 @@
 					{:else}
 						<div class="space-y-4">
 												<div class="mb-3 flex items-center gap-3">
-						<h3 class="text-lg font-medium text-slate-100">Input Control Active</h3>
+						<h3 class="text-lg font-medium text-slate-900 dark:text-slate-100">Input Control Active</h3>
 					</div>
 
-					<Alert.Root class="border-purple-500/30 bg-purple-500/10">
-						<Alert.Title class="text-sm text-purple-200">Input Control Active</Alert.Title>
-													<Alert.Description class="text-xs text-purple-300">
+					<Alert.Root class="border-purple-300/30 bg-purple-100/10 dark:border-purple-500/30 dark:bg-purple-500/10">
+						<Alert.Title class="text-sm text-purple-700 dark:text-purple-200">Input Control Active</Alert.Title>
+													<Alert.Description class="text-xs text-purple-700 dark:text-purple-300">
 								Robot controlled by: <strong>{robot.consumer?.name || 'External Input'}</strong><br />
 								Disconnect input to enable manual control.
 						</Alert.Description>

src/lib/components/3d/elements/robot/modal/OutputConnectionModal.svelte

@@ -202,14 +202,14 @@
 
 <Dialog.Root bind:open>
 	<Dialog.Content
-		class="max-h-[85vh] max-w-4xl overflow-hidden border-slate-600 bg-slate-900 text-slate-100"
+		class="max-h-[85vh] max-w-4xl overflow-hidden border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100"
 	>
 		<Dialog.Header class="pb-3">
-			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-100">
-				<span class="icon-[mdi--devices] size-5 text-blue-400"></span>
+			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
+				<span class="icon-[mdi--devices] size-5 text-blue-500 dark:text-blue-400"></span>
 				Output Connection - Robot {robot.id}
 			</Dialog.Title>
-			<Dialog.Description class="text-sm text-slate-400">
+			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
 				Configure where this robot sends its movements. Multiple outputs can be active simultaneously.
 			</Dialog.Description>
 		</Dialog.Header>
@@ -218,10 +218,10 @@
 			<div class="space-y-4 pb-4">
 				<!-- Error display -->
 				{#if error}
-					<Alert.Root class="border-red-500/30 bg-red-900/20">
-						<span class="icon-[mdi--alert-circle] size-4 text-red-400"></span>
-						<Alert.Title class="text-red-300">Connection Error</Alert.Title>
-						<Alert.Description class="text-red-400 text-sm">
+					<Alert.Root class="border-red-300/30 bg-red-100/20 dark:border-red-500/30 dark:bg-red-900/20">
+						<span class="icon-[mdi--alert-circle] size-4 text-red-500 dark:text-red-400"></span>
+						<Alert.Title class="text-red-700 dark:text-red-300">Connection Error</Alert.Title>
+						<Alert.Description class="text-red-600 text-sm dark:text-red-400">
 							{error}
 						</Alert.Description>
 					</Alert.Root>
@@ -229,24 +229,24 @@
 
 				<!-- USB Calibration Panel -->
 				{#if showUSBCalibration}
-					<Card.Root class="border-orange-500/30 bg-orange-900/20">
+					<Card.Root class="border-orange-300/30 bg-orange-100/20 dark:border-orange-500/30 dark:bg-orange-900/20">
 						<Card.Header>
 							<div class="flex justify-between items-center">
-								<Card.Title class="text-lg font-semibold text-orange-200">
+								<Card.Title class="text-lg font-semibold text-orange-700 dark:text-orange-200">
 									Hardware Calibration Required
 								</Card.Title>
 								<button
 									onclick={onCalibrationCancel}
-									class="text-gray-400 hover:text-white"
+									class="text-slate-600 hover:text-slate-900 dark:text-gray-400 dark:hover:text-white"
 								>
 									✕
 								</button>
 							</div>
 						</Card.Header>
 						<Card.Content class="space-y-4">
-							<Alert.Root class="border-orange-500/30 bg-orange-500/10">
-								<span class="icon-[mdi--information] size-4 text-orange-400"></span>
-								<Alert.Description class="text-orange-200 text-sm">
+							<Alert.Root class="border-orange-300/30 bg-orange-100/10 dark:border-orange-500/30 dark:bg-orange-500/10">
+								<span class="icon-[mdi--information] size-4 text-orange-500 dark:text-orange-400"></span>
+								<Alert.Description class="text-orange-700 text-sm dark:text-orange-200">
 									Before connecting to the physical robot, calibration is required to map the servo positions to software values. This ensures accurate control.
 								</Alert.Description>
 							</Alert.Root>
@@ -262,14 +262,14 @@
 				{:else}
 
 				<!-- Current Status Overview -->
-				<Card.Root class="border-blue-500/30 bg-blue-900/20">
+				<Card.Root class="border-blue-300/30 bg-blue-100/20 dark:border-blue-500/30 dark:bg-blue-900/20">
 					<Card.Content class="p-4">
 						<div class="flex items-center justify-between">
 							<div class="flex items-center gap-2">
-								<span class="icon-[mdi--broadcast] size-4 text-blue-400"></span>
-								<span class="text-sm font-medium text-blue-300">Active Outputs</span>
+								<span class="icon-[mdi--broadcast] size-4 text-blue-500 dark:text-blue-400"></span>
+								<span class="text-sm font-medium text-blue-700 dark:text-blue-300">Active Outputs</span>
 							</div>
-							<Badge variant="default" class="bg-blue-600 text-xs">
+							<Badge variant="default" class="bg-blue-500 text-xs dark:bg-blue-600">
 								{outputDriverCount} Connected
 							</Badge>
 						</div>
@@ -277,13 +277,13 @@
 				</Card.Root>
 
 				<!-- Local Hardware Connection -->
-				<Card.Root class="border-green-500/30 bg-green-500/5">
+				<Card.Root class="border-green-300/30 bg-green-100/5 dark:border-green-500/30 dark:bg-green-500/5">
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-green-200">
+						<Card.Title class="flex items-center gap-2 text-base text-green-700 dark:text-green-200">
 							<span class="icon-[mdi--usb-port] size-4"></span>
 							Local Hardware (USB)
 						</Card.Title>
-						<Card.Description class="text-xs text-green-300/70">
+						<Card.Description class="text-xs text-green-600/70 dark:text-green-300/70">
 							Send commands directly to physical robot hardware
 						</Card.Description>
 					</Card.Header>
@@ -292,7 +292,7 @@
 							variant="secondary"
 							onclick={connectUSBOutput}
 							disabled={isConnecting}
-							class="w-full bg-green-600 text-sm text-white hover:bg-green-700"
+							class="w-full bg-green-500 text-sm text-white hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
 						>
 							<span class="icon-[mdi--usb] mr-2 size-4"></span>
 							{isConnecting ? 'Connecting...' : 'Add USB Output'}
@@ -301,15 +301,15 @@
 				</Card.Root>
 
 				<!-- Remote Collaboration -->
-				<Card.Root class="border-orange-500/30 bg-orange-500/5">
+				<Card.Root class="border-orange-300/30 bg-orange-100/5 dark:border-orange-500/30 dark:bg-orange-500/5">
 					<Card.Header>
 						<div class="flex items-center justify-between">
 							<div>
-								<Card.Title class="flex items-center gap-2 text-base text-orange-200">
+								<Card.Title class="flex items-center gap-2 text-base text-orange-700 dark:text-orange-200">
 									<span class="icon-[mdi--cloud-sync] size-4"></span>
 									Remote Collaboration (Rooms)
 								</Card.Title>
-								<Card.Description class="text-xs text-orange-300/70">
+								<Card.Description class="text-xs text-orange-600/70 dark:text-orange-300/70">
 									Broadcast robot movements to remote systems and AI
 								</Card.Description>
 							</div>
@@ -318,7 +318,7 @@
 								size="sm"
 								onclick={refreshRooms}
 								disabled={robotManager.roomsLoading || isConnecting}
-								class="h-7 px-2 text-xs text-orange-300 hover:text-orange-200 hover:bg-orange-500/20"
+								class="h-7 px-2 text-xs text-orange-700 hover:text-orange-800 hover:bg-orange-200/20 dark:text-orange-300 dark:hover:text-orange-200 dark:hover:bg-orange-500/20"
 							>
 								{#if robotManager.roomsLoading}
 									<span class="icon-[mdi--loading] animate-spin size-3 mr-1"></span>
@@ -332,20 +332,20 @@
 					</Card.Header>
 					<Card.Content class="space-y-4">
 						<!-- Create New Room -->
-						<div class="rounded border-2 border-dashed border-green-500/50 bg-green-500/5 p-3">
+						<div class="rounded border-2 border-dashed border-green-400/50 bg-green-100/5 p-3 dark:border-green-500/50 dark:bg-green-500/5">
 							<div class="space-y-2">
 								<div class="flex items-center gap-2">
-									<span class="icon-[mdi--plus-circle] size-4 text-green-400"></span>
-									<p class="text-sm font-medium text-green-300">Create New Room</p>
+									<span class="icon-[mdi--plus-circle] size-4 text-green-500 dark:text-green-400"></span>
+									<p class="text-sm font-medium text-green-700 dark:text-green-300">Create New Room</p>
 								</div>
-								<p class="text-xs text-green-400/70">
+								<p class="text-xs text-green-600/70 dark:text-green-400/70">
 									Create a room to broadcast this robot's movements
 								</p>
 								<input
 									bind:value={customRoomId}
 									placeholder={`Room ID (default: ${robot.id})`}
 									disabled={isConnecting}
-									class="w-full px-2 py-1 bg-slate-700 border border-slate-600 rounded text-xs text-slate-100 disabled:opacity-50"
+									class="w-full px-2 py-1 bg-slate-50 border border-slate-300 rounded text-xs text-slate-900 disabled:opacity-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
 								/>
 								<div class="flex gap-1">
 									<Button
@@ -353,7 +353,7 @@
 										size="sm"
 										onclick={createRoom}
 										disabled={isConnecting}
-										class="h-6 px-2 text-xs bg-green-600 hover:bg-green-700"
+										class="h-6 px-2 text-xs bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
 									>
 										Create Only
 									</Button>
@@ -362,7 +362,7 @@
 										size="sm"
 										onclick={createRoomAndJoinAsOutput}
 										disabled={isConnecting}
-										class="h-6 px-2 text-xs bg-green-600 hover:bg-green-700"
+										class="h-6 px-2 text-xs bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
 									>
 										Create & Join as Output
 									</Button>
@@ -373,26 +373,26 @@
 						<!-- Existing Rooms -->
 						<div class="space-y-2">
 							<div class="flex items-center justify-between">
-								<span class="text-xs font-medium text-orange-300">Join Existing Room:</span>
-								<span class="text-xs text-slate-400">
+								<span class="text-xs font-medium text-orange-700 dark:text-orange-300">Join Existing Room:</span>
+								<span class="text-xs text-slate-600 dark:text-slate-400">
 									{robotManager.rooms.length} room{robotManager.rooms.length !== 1 ? 's' : ''} available
 								</span>
 							</div>
 							
 							<div class="max-h-40 space-y-2 overflow-y-auto">
 								{#if robotManager.rooms.length === 0}
-									<div class="text-center py-3 text-xs text-slate-400">
+									<div class="text-center py-3 text-xs text-slate-600 dark:text-slate-400">
 										{robotManager.roomsLoading ? 'Loading rooms...' : 'No rooms available. Create one to get started.'}
 									</div>
 								{:else}
 									{#each robotManager.rooms as room}
-										<div class="rounded border border-slate-600 bg-slate-800/50 p-2">
+										<div class="rounded border border-slate-300 bg-slate-50/50 p-2 dark:border-slate-600 dark:bg-slate-800/50">
 											<div class="flex items-start justify-between gap-3">
 												<div class="flex-1 min-w-0">
-													<p class="text-xs font-medium text-slate-200 truncate">
+													<p class="text-xs font-medium text-slate-800 truncate dark:text-slate-200">
 														{room.id}
 													</p>
-													<div class="flex gap-3 text-xs text-slate-400">
+													<div class="flex gap-3 text-xs text-slate-600 dark:text-slate-400">
 														<span>{room.has_producer ? '🔴 Occupied' : '🟢 Available'}</span>
 														<span>👥 {room.participants?.total || 0} users</span>
 													</div>
@@ -406,7 +406,7 @@
 															joinRoomAsOutput();
 														}}
 														disabled={isConnecting}
-														class="h-6 px-2 text-xs bg-orange-600 hover:bg-orange-700 shrink-0"
+														class="h-6 px-2 text-xs bg-orange-500 hover:bg-orange-600 shrink-0 dark:bg-orange-600 dark:hover:bg-orange-700"
 													>
 														<span class="icon-[mdi--login] mr-1 size-3"></span>
 														Join as Output
@@ -432,9 +432,9 @@
 
 				<!-- Connected Outputs -->
 				{#if producers.length > 0}
-					<Card.Root class="border-blue-500/30 bg-blue-500/5">
+					<Card.Root class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5">
 						<Card.Header>
-							<Card.Title class="flex items-center gap-2 text-base text-blue-200">
+							<Card.Title class="flex items-center gap-2 text-base text-blue-700 dark:text-blue-200">
 								<span class="icon-[mdi--connection] size-4"></span>
 								Connected Outputs
 							</Card.Title>
@@ -442,12 +442,12 @@
 						<Card.Content>
 							<div class="max-h-32 space-y-2 overflow-y-auto">
 								{#each producers as producer}
-									<div class="flex items-center justify-between rounded-md bg-slate-700/50 p-2">
+									<div class="flex items-center justify-between rounded-md bg-slate-100/50 p-2 dark:bg-slate-700/50">
 										<div class="flex items-center gap-2">
 											<span 
-												class="size-2 rounded-full {producer.status.isConnected ? 'bg-green-400' : 'bg-red-400'}"
+												class="size-2 rounded-full {producer.status.isConnected ? 'bg-green-500 dark:bg-green-400' : 'bg-red-500 dark:bg-red-400'}"
 											></span>
-											<span class="text-sm text-slate-300">{producer.name}</span>
+											<span class="text-sm text-slate-700 dark:text-slate-300">{producer.name}</span>
 											<Badge variant="secondary" class="text-xs">{producer.id.slice(0, 12)}</Badge>
 										</div>
 										<Button
@@ -467,10 +467,10 @@
 				{/if}
 
 				<!-- Help Information -->
-				<Alert.Root class="border-slate-700 bg-slate-800/30">
-					<span class="icon-[mdi--help-circle] size-4 text-slate-400"></span>
-					<Alert.Title class="text-slate-300">Output Sources</Alert.Title>
-					<Alert.Description class="text-slate-400 text-xs">
+				<Alert.Root class="border-slate-300 bg-slate-100/30 dark:border-slate-700 dark:bg-slate-800/30">
+					<span class="icon-[mdi--help-circle] size-4 text-slate-600 dark:text-slate-400"></span>
+					<Alert.Title class="text-slate-700 dark:text-slate-300">Output Sources</Alert.Title>
+					<Alert.Description class="text-slate-600 text-xs dark:text-slate-400">
 						<strong>USB:</strong> Control physical hardware • <strong>Remote:</strong> Broadcast to network • Multiple outputs can be active
 					</Alert.Description>
 				</Alert.Root>

src/lib/components/3d/elements/video/modal/VideoInputConnectionModal.svelte

@@ -166,14 +166,14 @@
 
 <Dialog.Root bind:open>
 	<Dialog.Content
-		class="max-h-[85vh] max-w-4xl overflow-hidden border-slate-600 bg-slate-900 text-slate-100"
+		class="max-h-[85vh] max-w-4xl overflow-hidden border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100"
 	>
 		<Dialog.Header class="pb-3">
-			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-100">
-				<span class="icon-[mdi--video-input-component] size-5 text-green-400"></span>
+			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
+				<span class="icon-[mdi--video-input-component] size-5 text-green-500 dark:text-green-400"></span>
 				Video Input - {video?.name || 'No Video Selected'}
 			</Dialog.Title>
-			<Dialog.Description class="text-sm text-slate-400">
+			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
 				Configure video input source: local camera for recording or remote streams from rooms
 			</Dialog.Description>
 		</Dialog.Header>
@@ -182,32 +182,32 @@
 			<div class="space-y-4 pb-4">
 				<!-- Error display -->
 				{#if error}
-					<Alert.Root class="border-red-500/30 bg-red-900/20">
-						<span class="icon-[mdi--alert-circle] size-4 text-red-400"></span>
-						<Alert.Title class="text-red-300">Connection Error</Alert.Title>
-						<Alert.Description class="text-red-400 text-sm">
+					<Alert.Root class="border-red-300/30 bg-red-100/20 dark:border-red-500/30 dark:bg-red-900/20">
+						<span class="icon-[mdi--alert-circle] size-4 text-red-500 dark:text-red-400"></span>
+						<Alert.Title class="text-red-700 dark:text-red-300">Connection Error</Alert.Title>
+						<Alert.Description class="text-red-600 text-sm dark:text-red-400">
 							{error}
 						</Alert.Description>
 					</Alert.Root>
 				{/if}
 			<!-- Current Status Overview -->
-			<Card.Root class="border-green-500/30 bg-green-900/20">
+			<Card.Root class="border-green-300/30 bg-green-100/20 dark:border-green-500/30 dark:bg-green-900/20">
 				<Card.Content class="p-4">
 					<div class="flex items-center justify-between">
 						<div class="flex items-center gap-2">
-							<span class="icon-[mdi--video-input-component] size-4 text-green-400"></span>
-							<span class="text-sm font-medium text-green-300">Current Video Input</span>
+							<span class="icon-[mdi--video-input-component] size-4 text-green-500 dark:text-green-400"></span>
+							<span class="text-sm font-medium text-green-700 dark:text-green-300">Current Video Input</span>
 						</div>
 						{#if video?.hasInput}
-							<Badge variant="default" class="bg-green-600 text-xs">
+							<Badge variant="default" class="bg-green-500 text-xs dark:bg-green-600">
 								{video.input.type === 'local-camera' ? 'Local Camera' : 'Remote Stream'}
 							</Badge>
 						{:else}
-							<Badge variant="secondary" class="text-xs text-slate-400">No Input Connected</Badge>
+							<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400">No Input Connected</Badge>
 						{/if}
 					</div>
 					{#if video?.hasInput}
-						<div class="mt-2 text-xs text-green-400/70">
+						<div class="mt-2 text-xs text-green-600/70 dark:text-green-400/70">
 							{#if video.input.roomId}
 								Room: {video.input.roomId}
 							{:else}
@@ -220,30 +220,30 @@
 
 			<!-- Current Input Details -->
 			{#if video?.hasInput}
-				<Card.Root class="border-green-500/30 bg-green-500/5">
+				<Card.Root class="border-green-300/30 bg-green-100/5 dark:border-green-500/30 dark:bg-green-500/5">
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-green-200">
+						<Card.Title class="flex items-center gap-2 text-base text-green-700 dark:text-green-200">
 							<span class="icon-[mdi--video] size-4"></span>
 							Current Input
 						</Card.Title>
 					</Card.Header>
 					<Card.Content>
-						<div class="rounded-lg border border-green-500/30 bg-green-900/20 p-3">
+						<div class="rounded-lg border border-green-300/30 bg-green-100/20 p-3 dark:border-green-500/30 dark:bg-green-900/20">
 							<div class="flex items-center justify-between">
 								<div>
-									<p class="text-sm font-medium text-green-300">
+									<p class="text-sm font-medium text-green-700 dark:text-green-300">
 										{video.input.type === 'local-camera' ? 'Local Camera' : 'Remote Stream'}
 									</p>
 									{#if video.input.roomId}
-										<p class="text-xs text-green-400/70">
+										<p class="text-xs text-green-600/70 dark:text-green-400/70">
 											Room: {video.input.roomId}
 										</p>
 									{/if}
 									{#if video.input.stream}
-										<p class="text-xs text-green-400/70">
+										<p class="text-xs text-green-600/70 dark:text-green-400/70">
 											Video: {video.input.stream.getVideoTracks().length} tracks
 										</p>
-										<p class="text-xs text-green-400/70">
+										<p class="text-xs text-green-600/70 dark:text-green-400/70">
 											Audio: {video.input.stream.getAudioTracks().length} tracks
 										</p>
 									{/if}
@@ -264,24 +264,24 @@
 			{/if}
 
 			<!-- Local Camera -->
-			<Card.Root class="border-blue-500/30 bg-blue-500/5">
+			<Card.Root class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5">
 				<Card.Header>
-					<Card.Title class="flex items-center gap-2 text-base text-blue-200">
+					<Card.Title class="flex items-center gap-2 text-base text-blue-700 dark:text-blue-200">
 						<span class="icon-[mdi--camera] size-4"></span>
 						Local Camera
 					</Card.Title>
-					<Card.Description class="text-xs text-blue-300/70">
+					<Card.Description class="text-xs text-blue-600/70 dark:text-blue-300/70">
 						Use your device camera for direct video capture and recording
 					</Card.Description>
 				</Card.Header>
 				<Card.Content class="space-y-3">
 					{#if video?.hasInput && video.input.type === 'local-camera'}
 						<!-- Camera Connected State -->
-						<div class="rounded-lg border border-blue-500/30 bg-blue-900/20 p-3">
+						<div class="rounded-lg border border-blue-300/30 bg-blue-100/20 p-3 dark:border-blue-500/30 dark:bg-blue-900/20">
 							<div class="flex items-center justify-between">
 								<div>
-									<p class="text-sm font-medium text-blue-300">Camera Connected</p>
-									<p class="text-xs text-blue-400/70">Local device camera active</p>
+									<p class="text-sm font-medium text-blue-700 dark:text-blue-300">Camera Connected</p>
+									<p class="text-xs text-blue-600/70 dark:text-blue-400/70">Local device camera active</p>
 								</div>
 								<Button
 									variant="destructive"
@@ -301,14 +301,14 @@
 							variant="secondary"
 							onclick={handleConnectCamera}
 							disabled={isConnecting || video?.hasInput}
-							class="w-full bg-blue-600 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
+							class="w-full bg-blue-500 text-sm text-white hover:bg-blue-600 disabled:opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700"
 						>
 							<span class="icon-[mdi--camera] mr-2 size-4"></span>
 							{isConnecting ? 'Connecting...' : 'Connect to Camera'}
 						</Button>
 						
 						{#if video?.hasInput}
-							<p class="text-xs text-slate-500">
+							<p class="text-xs text-slate-600 dark:text-slate-500">
 								Disconnect current input to connect camera
 							</p>
 						{/if}
@@ -317,15 +317,15 @@
 			</Card.Root>
 
 			<!-- Remote Collaboration -->
-			<Card.Root class="border-purple-500/30 bg-purple-500/5">
+			<Card.Root class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5">
 				<Card.Header>
 					<div class="flex items-center justify-between">
 						<div>
-							<Card.Title class="flex items-center gap-2 text-base text-purple-200">
+							<Card.Title class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200">
 								<span class="icon-[mdi--cloud-download] size-4"></span>
 								Remote Collaboration (Rooms)
 							</Card.Title>
-							<Card.Description class="text-xs text-purple-300/70">
+							<Card.Description class="text-xs text-purple-600/70 dark:text-purple-300/70">
 								Receive video streams from remote cameras or AI systems
 							</Card.Description>
 						</div>
@@ -334,7 +334,7 @@
 							size="sm"
 							onclick={refreshRooms}
 							disabled={videoManager.roomsLoading || isConnecting}
-							class="h-7 px-2 text-xs text-purple-300 hover:text-purple-200 hover:bg-purple-500/20"
+							class="h-7 px-2 text-xs text-purple-700 hover:text-purple-800 hover:bg-purple-200/20 dark:text-purple-300 dark:hover:text-purple-200 dark:hover:bg-purple-500/20"
 						>
 							{#if videoManager.roomsLoading}
 								<span class="icon-[mdi--loading] animate-spin size-3 mr-1"></span>
@@ -349,11 +349,11 @@
 				<Card.Content class="space-y-4">
 					{#if video?.hasInput && video.input.type !== 'local-camera'}
 						<!-- Remote Connected State -->
-						<div class="rounded-lg border border-purple-500/30 bg-purple-900/20 p-3">
+						<div class="rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20">
 							<div class="flex items-center justify-between">
 								<div>
-									<p class="text-sm font-medium text-purple-300">Room Connected</p>
-									<p class="text-xs text-purple-400/70">Receiving remote video stream</p>
+									<p class="text-sm font-medium text-purple-700 dark:text-purple-300">Room Connected</p>
+									<p class="text-xs text-purple-600/70 dark:text-purple-400/70">Receiving remote video stream</p>
 								</div>
 								<Button
 									variant="destructive"
@@ -369,20 +369,20 @@
 						</div>
 					{:else}
 						<!-- Create New Room -->
-						<div class="rounded border-2 border-dashed border-green-500/50 bg-green-500/5 p-3">
+						<div class="rounded border-2 border-dashed border-green-400/50 bg-green-100/5 p-3 dark:border-green-500/50 dark:bg-green-500/5">
 							<div class="space-y-2">
 								<div class="flex items-center gap-2">
-									<span class="icon-[mdi--plus-circle] size-4 text-green-400"></span>
-									<p class="text-sm font-medium text-green-300">Create New Room</p>
+									<span class="icon-[mdi--plus-circle] size-4 text-green-500 dark:text-green-400"></span>
+									<p class="text-sm font-medium text-green-700 dark:text-green-300">Create New Room</p>
 								</div>
-								<p class="text-xs text-green-400/70">
+								<p class="text-xs text-green-600/70 dark:text-green-400/70">
 									Create a room to receive video from others
 								</p>
 								<input
 									bind:value={customRoomId}
 									placeholder={`Room ID (default: ${video.id})`}
 									disabled={isConnecting || video?.hasInput}
-									class="w-full px-2 py-1 bg-slate-700 border border-slate-600 rounded text-xs text-slate-100 disabled:opacity-50"
+									class="w-full px-2 py-1 bg-slate-50 border border-slate-300 rounded text-xs text-slate-900 disabled:opacity-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
 								/>
 								<div class="flex gap-1">
 									<Button
@@ -390,7 +390,7 @@
 										size="sm"
 										onclick={createRoom}
 										disabled={isConnecting || video?.hasInput}
-										class="h-6 px-2 text-xs bg-green-600 hover:bg-green-700 disabled:opacity-50"
+										class="h-6 px-2 text-xs bg-green-500 hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
 									>
 										Create Only
 									</Button>
@@ -399,7 +399,7 @@
 										size="sm"
 										onclick={createRoomAndConnect}
 										disabled={isConnecting || video?.hasInput}
-										class="h-6 px-2 text-xs bg-green-600 hover:bg-green-700 disabled:opacity-50"
+										class="h-6 px-2 text-xs bg-green-500 hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
 									>
 										Create & Connect
 									</Button>
@@ -410,26 +410,26 @@
 						<!-- Existing Rooms -->
 						<div class="space-y-2">
 							<div class="flex items-center justify-between">
-								<span class="text-xs font-medium text-purple-300">Join Existing Room:</span>
-								<span class="text-xs text-slate-400">
+								<span class="text-xs font-medium text-purple-700 dark:text-purple-300">Join Existing Room:</span>
+								<span class="text-xs text-slate-600 dark:text-slate-400">
 									{videoManager.rooms.length} room{videoManager.rooms.length !== 1 ? 's' : ''} available
 								</span>
 							</div>
 							
 							<div class="max-h-40 space-y-2 overflow-y-auto">
 								{#if videoManager.rooms.length === 0}
-									<div class="text-center py-3 text-xs text-slate-400">
+									<div class="text-center py-3 text-xs text-slate-600 dark:text-slate-400">
 										{videoManager.roomsLoading ? 'Loading rooms...' : 'No rooms available. Create one to get started.'}
 									</div>
 								{:else}
 									{#each videoManager.rooms as room}
-										<div class="rounded border border-slate-600 bg-slate-800/50 p-2">
+										<div class="rounded border border-slate-300 bg-slate-50/50 p-2 dark:border-slate-600 dark:bg-slate-800/50">
 											<div class="flex items-start justify-between gap-3">
 												<div class="flex-1 min-w-0">
-													<p class="text-xs font-medium text-slate-200 truncate">
+													<p class="text-xs font-medium text-slate-800 truncate dark:text-slate-200">
 														{room.id}
 													</p>
-													<div class="flex gap-3 text-xs text-slate-400">
+													<div class="flex gap-3 text-xs text-slate-600 dark:text-slate-400">
 														<span>{room.participants?.producer ? '📹 Has Output' : '📭 No Output'}</span>
 														<span>👥 {room.participants?.consumers?.length || 0} inputs</span>
 													</div>
@@ -440,7 +440,7 @@
 														size="sm"
 														onclick={() => handleConnectToRoom(room.id)}
 														disabled={isConnecting || video?.hasInput}
-														class="h-6 px-2 text-xs bg-purple-600 hover:bg-purple-700 shrink-0 disabled:opacity-50"
+														class="h-6 px-2 text-xs bg-purple-500 hover:bg-purple-600 shrink-0 disabled:opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700"
 													>
 														<span class="icon-[mdi--download] mr-1 size-3"></span>
 														Join as Input
@@ -463,7 +463,7 @@
 						</div>
 
 						{#if video?.hasInput}
-							<p class="text-xs text-slate-500">
+							<p class="text-xs text-slate-600 dark:text-slate-500">
 								Disconnect current input to join a room
 							</p>
 						{/if}
@@ -472,10 +472,10 @@
 			</Card.Root>
 
 			<!-- Help Information -->
-			<Alert.Root class="border-slate-700 bg-slate-800/30">
-				<span class="icon-[mdi--help-circle] size-4 text-slate-400"></span>
-				<Alert.Title class="text-slate-300">Video Input Sources</Alert.Title>
-				<Alert.Description class="text-slate-400 text-xs">
+			<Alert.Root class="border-slate-300 bg-slate-100/30 dark:border-slate-700 dark:bg-slate-800/30">
+				<span class="icon-[mdi--help-circle] size-4 text-slate-600 dark:text-slate-400"></span>
+				<Alert.Title class="text-slate-700 dark:text-slate-300">Video Input Sources</Alert.Title>
+				<Alert.Description class="text-slate-600 text-xs dark:text-slate-400">
 					<strong>Camera:</strong> Local device camera • <strong>Remote:</strong> Video streams from rooms • Only one active at a time
 				</Alert.Description>
 			</Alert.Root>

src/lib/components/3d/elements/video/modal/VideoOutputConnectionModal.svelte

@@ -126,15 +126,15 @@
 
 <Dialog.Root bind:open>
 	<Dialog.Content
-		class="max-h-[85vh] max-w-4xl overflow-hidden border-slate-600 bg-slate-900 text-slate-100"
+		class="max-h-[85vh] max-w-4xl overflow-hidden border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100"
 	>
 		<Dialog.Header class="pb-3">
-			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-100">
-				<span class="icon-[mdi--video] size-5 text-blue-400"></span>
+			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
+				<span class="icon-[mdi--video-wireless-outline] size-5 text-orange-500 dark:text-orange-400"></span>
 				Video Output - {video?.name || 'No Video Selected'}
 			</Dialog.Title>
-			<Dialog.Description class="text-sm text-slate-400">
-				Broadcast your local camera to remote viewers in rooms
+			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
+				Configure video output: local recording or remote broadcast to rooms
 			</Dialog.Description>
 		</Dialog.Header>
 
@@ -142,102 +142,67 @@
 			<div class="space-y-4 pb-4">
 				<!-- Error display -->
 				{#if error}
-					<Alert.Root class="border-red-500/30 bg-red-900/20">
-						<span class="icon-[mdi--alert-circle] size-4 text-red-400"></span>
-						<Alert.Title class="text-red-300">Broadcasting Error</Alert.Title>
-						<Alert.Description class="text-red-400 text-sm">
+					<Alert.Root class="border-red-300/30 bg-red-100/20 dark:border-red-500/30 dark:bg-red-900/20">
+						<span class="icon-[mdi--alert-circle] size-4 text-red-500 dark:text-red-400"></span>
+						<Alert.Title class="text-red-700 dark:text-red-300">Connection Error</Alert.Title>
+						<Alert.Description class="text-red-600 text-sm dark:text-red-400">
 							{error}
 						</Alert.Description>
 					</Alert.Root>
 				{/if}
+
 			<!-- Current Status Overview -->
-			<Card.Root class="border-blue-500/30 bg-blue-900/20">
+			<Card.Root class="border-orange-300/30 bg-orange-100/20 dark:border-orange-500/30 dark:bg-orange-900/20">
 				<Card.Content class="p-4">
 					<div class="flex items-center justify-between">
 						<div class="flex items-center gap-2">
-							<span class="icon-[mdi--video] size-4 text-blue-400"></span>
-							<span class="text-sm font-medium text-blue-300">Current Video Output</span>
+							<span class="icon-[mdi--video-wireless-outline] size-4 text-orange-500 dark:text-orange-400"></span>
+							<span class="text-sm font-medium text-orange-700 dark:text-orange-300">Current Video Output</span>
 						</div>
 						{#if video?.hasOutput}
-							<Badge variant="default" class="bg-blue-600 text-xs">
-								Broadcasting
+							<Badge variant="default" class="bg-orange-500 text-xs dark:bg-orange-600">
+								{video.output.type === 'recording' ? 'Recording' : 'Remote Broadcast'}
 							</Badge>
 						{:else}
-							<Badge variant="secondary" class="text-xs text-slate-400">Not Broadcasting</Badge>
+							<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400">No Output Active</Badge>
 						{/if}
 					</div>
 					{#if video?.hasOutput}
-						<div class="mt-2 text-xs text-blue-400/70">
+						<div class="mt-2 text-xs text-orange-600/70 dark:text-orange-400/70">
 							{#if video.output.roomId}
-								Room: {video.output.roomId}
+								Broadcasting to Room: {video.output.roomId}
 							{:else}
-								Broadcasting to server
+								Recording to local storage
 							{/if}
 						</div>
 					{/if}
 				</Card.Content>
 			</Card.Root>
 
-			<!-- Output Requirements -->
-			{#if !video?.canOutput}
-				<Card.Root class="border-yellow-500/30 bg-yellow-500/5">
-					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-yellow-200">
-							<span class="icon-[mdi--alert] size-4"></span>
-							Requirements
-						</Card.Title>
-					</Card.Header>
-					<Card.Content>
-						<div class="space-y-2 text-sm text-yellow-300">
-							{#if !video?.hasInput}
-								<div class="flex items-center gap-2">
-									<span class="icon-[mdi--close-circle] size-3 text-red-400"></span>
-									No video input connected
-								</div>
-							{:else if video.input.type !== 'local-camera'}
-								<div class="flex items-center gap-2">
-									<span class="icon-[mdi--close-circle] size-3 text-red-400"></span>
-									Input must be local camera (cannot re-broadcast remote streams)
-								</div>
-							{/if}
-							<div class="mt-2 text-xs text-yellow-400/70">
-								To enable output, first connect to your local camera in the Video Input modal.
-							</div>
-						</div>
-					</Card.Content>
-				</Card.Root>
-			{/if}
-
 			<!-- Current Output Details -->
 			{#if video?.hasOutput}
-				<Card.Root class="border-blue-500/30 bg-blue-500/5">
+				<Card.Root class="border-orange-300/30 bg-orange-100/5 dark:border-orange-500/30 dark:bg-orange-500/5">
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-blue-200">
-							<span class="icon-[mdi--broadcast] size-4"></span>
-							Broadcasting
+						<Card.Title class="flex items-center gap-2 text-base text-orange-700 dark:text-orange-200">
+							<span class="icon-[mdi--video-wireless] size-4"></span>
+							Current Output
 						</Card.Title>
 					</Card.Header>
 					<Card.Content>
-						<div class="rounded-lg border border-blue-500/30 bg-blue-900/20 p-3">
+						<div class="rounded-lg border border-orange-300/30 bg-orange-100/20 p-3 dark:border-orange-500/30 dark:bg-orange-900/20">
 							<div class="flex items-center justify-between">
 								<div>
-									<p class="text-sm font-medium text-blue-300">
-										Streaming to Server
+									<p class="text-sm font-medium text-orange-700 dark:text-orange-300">
+										{video.output.type === 'recording' ? 'Local Recording' : 'Remote Broadcast'}
 									</p>
 									{#if video.output.roomId}
-										<p class="text-xs text-blue-400/70">
-											Room ID: {video.output.roomId}
+										<p class="text-xs text-orange-600/70 dark:text-orange-400/70">
+											Room: {video.output.roomId}
 										</p>
 									{/if}
-									<p class="text-xs text-blue-400/70">
-										Source: Local Camera
-									</p>
-									{#if video.input.stream}
-										<p class="text-xs text-blue-400/70">
-											Video: {video.input.stream.getVideoTracks().length} tracks
-										</p>
-										<p class="text-xs text-blue-400/70">
-											Audio: {video.input.stream.getAudioTracks().length} tracks
+									{#if video.output.stream}
+										<p class="text-xs text-orange-600/70 dark:text-orange-400/70">
+											Status: Active • {video.output.stream.getVideoTracks().length} video tracks
 										</p>
 									{/if}
 								</div>
@@ -247,7 +212,7 @@
 									onclick={handleStopOutput}
 									class="h-7 px-2 text-xs"
 								>
-									<span class="icon-[mdi--stop] mr-1 size-3"></span>
+									<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
 									Stop
 								</Button>
 							</div>
@@ -256,17 +221,70 @@
 				</Card.Root>
 			{/if}
 
-			<!-- Remote Broadcasting -->
-			<Card.Root class="border-orange-500/30 bg-orange-500/5">
+			<!-- Local Recording -->
+			<Card.Root class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5">
+				<Card.Header>
+					<Card.Title class="flex items-center gap-2 text-base text-blue-700 dark:text-blue-200">
+						<span class="icon-[mdi--record-rec] size-4"></span>
+						Local Recording
+					</Card.Title>
+					<Card.Description class="text-xs text-blue-600/70 dark:text-blue-300/70">
+						Record video directly to your device for later use
+					</Card.Description>
+				</Card.Header>
+				<Card.Content class="space-y-3">
+					{#if video?.hasOutput && video.output.type === 'recording'}
+						<!-- Recording Active State -->
+						<div class="rounded-lg border border-blue-300/30 bg-blue-100/20 p-3 dark:border-blue-500/30 dark:bg-blue-900/20">
+							<div class="flex items-center justify-between">
+								<div>
+									<p class="text-sm font-medium text-blue-700 dark:text-blue-300">Recording Active</p>
+									<p class="text-xs text-blue-600/70 dark:text-blue-400/70">Saving to local device</p>
+								</div>
+								<Button
+									variant="destructive"
+									size="sm"
+									onclick={handleStopOutput}
+									disabled={isConnecting}
+									class="h-7 px-2 text-xs"
+								>
+									<span class="icon-[mdi--stop] mr-1 size-3"></span>
+									{isConnecting ? 'Stopping...' : 'Stop Recording'}
+								</Button>
+							</div>
+						</div>
+					{:else}
+						<!-- Recording Start Button -->
+						<Button
+							variant="secondary"
+							onclick={handleStartRecording}
+							disabled={isConnecting || video?.hasOutput}
+							class="w-full bg-blue-500 text-sm text-white hover:bg-blue-600 disabled:opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700"
+						>
+							<span class="icon-[mdi--record] mr-2 size-4"></span>
+							{isConnecting ? 'Starting...' : 'Start Recording'}
+						</Button>
+						
+						{#if video?.hasOutput}
+							<p class="text-xs text-slate-600 dark:text-slate-500">
+								Stop current output to start recording
+							</p>
+						{/if}
+					{/if}
+				</Card.Content>
+			</Card.Root>
+
+			<!-- Remote Collaboration -->
+			<Card.Root class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5">
 				<Card.Header>
 					<div class="flex items-center justify-between">
 						<div>
-							<Card.Title class="flex items-center gap-2 text-base text-orange-200">
-								<span class="icon-[mdi--broadcast] size-4"></span>
-								Remote Broadcasting (Rooms)
+							<Card.Title class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200">
+								<span class="icon-[mdi--cloud-upload] size-4"></span>
+								Remote Collaboration (Rooms)
 							</Card.Title>
-							<Card.Description class="text-xs text-orange-300/70">
-								Broadcast your camera feed to remote viewers in rooms
+							<Card.Description class="text-xs text-purple-600/70 dark:text-purple-300/70">
+								Broadcast video stream to remote systems and users
 							</Card.Description>
 						</div>
 						<Button
@@ -274,7 +292,7 @@
 							size="sm"
 							onclick={refreshRooms}
 							disabled={videoManager.roomsLoading || isConnecting}
-							class="h-7 px-2 text-xs text-orange-300 hover:text-orange-200 hover:bg-orange-500/20"
+							class="h-7 px-2 text-xs text-purple-700 hover:text-purple-800 hover:bg-purple-200/20 dark:text-purple-300 dark:hover:text-purple-200 dark:hover:bg-purple-500/20"
 						>
 							{#if videoManager.roomsLoading}
 								<span class="icon-[mdi--loading] animate-spin size-3 mr-1"></span>
@@ -287,13 +305,13 @@
 					</div>
 				</Card.Header>
 				<Card.Content class="space-y-4">
-					{#if video?.hasOutput}
-						<!-- Broadcasting State -->
-						<div class="rounded-lg border border-orange-500/30 bg-orange-900/20 p-3">
+					{#if video?.hasOutput && video.output.type !== 'recording'}
+						<!-- Remote Connected State -->
+						<div class="rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20">
 							<div class="flex items-center justify-between">
 								<div>
-									<p class="text-sm font-medium text-orange-300">Broadcasting Active</p>
-									<p class="text-xs text-orange-400/70">Sending video to remote viewers</p>
+									<p class="text-sm font-medium text-purple-700 dark:text-purple-300">Broadcasting to Room</p>
+									<p class="text-xs text-purple-600/70 dark:text-purple-400/70">Video stream active</p>
 								</div>
 								<Button
 									variant="destructive"
@@ -302,27 +320,27 @@
 									disabled={isConnecting}
 									class="h-7 px-2 text-xs"
 								>
-									<span class="icon-[mdi--stop] mr-1 size-3"></span>
-									{isConnecting ? 'Stopping...' : 'Stop'}
+									<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
+									{isConnecting ? 'Stopping...' : 'Stop Broadcast'}
 								</Button>
 							</div>
 						</div>
-					{:else if video?.canOutput}
+					{:else}
 						<!-- Create New Room -->
-						<div class="rounded border-2 border-dashed border-green-500/50 bg-green-500/5 p-3">
+						<div class="rounded border-2 border-dashed border-green-400/50 bg-green-100/5 p-3 dark:border-green-500/50 dark:bg-green-500/5">
 							<div class="space-y-2">
 								<div class="flex items-center gap-2">
-									<span class="icon-[mdi--plus-circle] size-4 text-green-400"></span>
-									<p class="text-sm font-medium text-green-300">Create New Room</p>
+									<span class="icon-[mdi--plus-circle] size-4 text-green-500 dark:text-green-400"></span>
+									<p class="text-sm font-medium text-green-700 dark:text-green-300">Create New Room</p>
 								</div>
-								<p class="text-xs text-green-400/70">
-									Create a room to broadcast your camera feed
+								<p class="text-xs text-green-600/70 dark:text-green-400/70">
+									Create a room to broadcast your video
 								</p>
 								<input
 									bind:value={customRoomId}
 									placeholder={`Room ID (default: ${video.id})`}
 									disabled={isConnecting || video?.hasOutput}
-									class="w-full px-2 py-1 bg-slate-700 border border-slate-600 rounded text-xs text-slate-100 disabled:opacity-50"
+									class="w-full px-2 py-1 bg-slate-50 border border-slate-300 rounded text-xs text-slate-900 disabled:opacity-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
 								/>
 								<div class="flex gap-1">
 									<Button
@@ -330,7 +348,7 @@
 										size="sm"
 										onclick={createRoom}
 										disabled={isConnecting || video?.hasOutput}
-										class="h-6 px-2 text-xs bg-green-600 hover:bg-green-700 disabled:opacity-50"
+										class="h-6 px-2 text-xs bg-green-500 hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
 									>
 										Create Only
 									</Button>
@@ -339,9 +357,9 @@
 										size="sm"
 										onclick={createRoomAndStartOutput}
 										disabled={isConnecting || video?.hasOutput}
-										class="h-6 px-2 text-xs bg-green-600 hover:bg-green-700 disabled:opacity-50"
+										class="h-6 px-2 text-xs bg-green-500 hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
 									>
-										Create & Start
+										Create & Broadcast
 									</Button>
 								</div>
 							</div>
@@ -350,28 +368,28 @@
 						<!-- Existing Rooms -->
 						<div class="space-y-2">
 							<div class="flex items-center justify-between">
-								<span class="text-xs font-medium text-orange-300">Join Existing Room:</span>
-								<span class="text-xs text-slate-400">
+								<span class="text-xs font-medium text-purple-700 dark:text-purple-300">Join Existing Room:</span>
+								<span class="text-xs text-slate-600 dark:text-slate-400">
 									{videoManager.rooms.length} room{videoManager.rooms.length !== 1 ? 's' : ''} available
 								</span>
 							</div>
 							
 							<div class="max-h-40 space-y-2 overflow-y-auto">
 								{#if videoManager.rooms.length === 0}
-									<div class="text-center py-3 text-xs text-slate-400">
+									<div class="text-center py-3 text-xs text-slate-600 dark:text-slate-400">
 										{videoManager.roomsLoading ? 'Loading rooms...' : 'No rooms available. Create one to get started.'}
 									</div>
 								{:else}
 									{#each videoManager.rooms as room}
-										<div class="rounded border border-slate-600 bg-slate-800/50 p-2">
+										<div class="rounded border border-slate-300 bg-slate-50/50 p-2 dark:border-slate-600 dark:bg-slate-800/50">
 											<div class="flex items-start justify-between gap-3">
 												<div class="flex-1 min-w-0">
-													<p class="text-xs font-medium text-slate-200 truncate">
+													<p class="text-xs font-medium text-slate-800 truncate dark:text-slate-200">
 														{room.id}
 													</p>
-													<div class="flex gap-3 text-xs text-slate-400">
-														<span>{room.participants?.producer ? '🔴 Occupied' : '🟢 Available'}</span>
-														<span>👥 {room.participants?.consumers?.length || 0} viewers</span>
+													<div class="flex gap-3 text-xs text-slate-600 dark:text-slate-400">
+														<span>{room.participants?.producer ? '🔴 Has Output' : '🟢 Available'}</span>
+														<span>👥 {room.participants?.consumers?.length || 0} inputs</span>
 													</div>
 												</div>
 												{#if !room.participants?.producer}
@@ -380,9 +398,9 @@
 														size="sm"
 														onclick={() => handleStartOutputToRoom(room.id)}
 														disabled={isConnecting || video?.hasOutput}
-														class="h-6 px-2 text-xs bg-orange-600 hover:bg-orange-700 shrink-0 disabled:opacity-50"
+														class="h-6 px-2 text-xs bg-purple-500 hover:bg-purple-600 shrink-0 disabled:opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700"
 													>
-														<span class="icon-[mdi--broadcast] mr-1 size-3"></span>
+														<span class="icon-[mdi--upload] mr-1 size-3"></span>
 														Join as Output
 													</Button>
 												{:else}
@@ -392,7 +410,7 @@
 														disabled
 														class="text-xs opacity-50 shrink-0"
 													>
-														Occupied
+														Has Output
 													</Button>
 												{/if}
 											</div>
@@ -403,27 +421,20 @@
 						</div>
 
 						{#if video?.hasOutput}
-							<p class="text-xs text-slate-500">
-								Stop current broadcast to join a different room
+							<p class="text-xs text-slate-600 dark:text-slate-500">
+								Stop current output to join a room
 							</p>
 						{/if}
-					{:else}
-						<!-- Cannot output -->
-						<div class="space-y-3">
-							<div class="text-center text-sm text-slate-500">
-								Connect to local camera first to enable broadcasting
-							</div>
-						</div>
 					{/if}
 				</Card.Content>
 			</Card.Root>
 
 			<!-- Help Information -->
-			<Alert.Root class="border-slate-700 bg-slate-800/30">
-				<span class="icon-[mdi--help-circle] size-4 text-slate-400"></span>
-				<Alert.Title class="text-slate-300">Video Broadcasting</Alert.Title>
-				<Alert.Description class="text-slate-400 text-xs">
-					<strong>Requirements:</strong> Local camera input only • <strong>Remote streams:</strong> Cannot be re-broadcasted • Only one output per room
+			<Alert.Root class="border-slate-300 bg-slate-100/30 dark:border-slate-700 dark:bg-slate-800/30">
+				<span class="icon-[mdi--help-circle] size-4 text-slate-600 dark:text-slate-400"></span>
+				<Alert.Title class="text-slate-700 dark:text-slate-300">Video Output Options</Alert.Title>
+				<Alert.Description class="text-slate-600 text-xs dark:text-slate-400">
+					<strong>Recording:</strong> Save locally • <strong>Remote:</strong> Broadcast to rooms • Only one active at a time
 				</Alert.Description>
 			</Alert.Root>
 			</div>

src/lib/components/interface/overlay/AddAIButton.svelte

@@ -77,7 +77,7 @@
 	variant="default"
 	size="sm"
 	onclick={quickAddAI}
-	class="group rounded-r-none border-0 bg-purple-600 text-white transition-all duration-200 hover:bg-purple-500"
+	class="group rounded-r-none border-0 bg-purple-500 text-white transition-all duration-200 hover:bg-purple-400 dark:bg-purple-600 dark:hover:bg-purple-500"
 >
 	<span
 		class={[
@@ -97,8 +97,9 @@
 				variant="default"
 				size="sm"
 				class={cn(
-					"rounded-l-none border-0 border-l border-purple-500/30 bg-purple-600 px-2 text-white transition-all duration-200 hover:bg-purple-500",
-					open && "bg-purple-700 shadow-inner"
+					"rounded-l-none border-0 border-l border-purple-400/30 bg-purple-500 px-2 text-white transition-all duration-200 hover:bg-purple-400",
+					"dark:border-purple-500/30 dark:bg-purple-600 dark:hover:bg-purple-500",
+					open && "bg-purple-600 shadow-inner dark:bg-purple-700"
 				)}
 			>
 				<span
@@ -113,12 +114,12 @@
 	</DropdownMenu.Trigger>
 
 	<DropdownMenu.Content
-		class="w-56 border-purple-500/30 bg-purple-600 backdrop-blur-sm"
+		class="w-56 border-purple-400/30 bg-purple-500 backdrop-blur-sm dark:border-purple-500/30 dark:bg-purple-600"
 		align="center"
 	>
 		<DropdownMenu.Group>
 			<DropdownMenu.GroupHeading
-				class="text-xs font-semibold tracking-wider text-purple-200 uppercase"
+				class="text-xs font-semibold tracking-wider text-purple-100 uppercase dark:text-purple-200"
 			>
 				AI Types
 			</DropdownMenu.GroupHeading>
@@ -126,8 +127,8 @@
 			{#each aiOptions as ai}
 				<DropdownMenu.Item
 					class={[
-						"group group cursor-pointer bg-purple-600 text-white transition-all duration-200",
-						"data-highlighted:bg-purple-700"
+						"group group cursor-pointer bg-purple-500 text-white transition-all duration-200",
+						"data-highlighted:bg-purple-600 dark:bg-purple-600 dark:data-highlighted:bg-purple-700"
 					]}
 					onclick={async () => await addAI(ai.id)}
 					disabled={!ai.enabled}
@@ -135,14 +136,14 @@
 					<span
 						class={[
 							ai.icon,
-							"mr-3 size-4 text-purple-200 transition-colors duration-200"
+							"mr-3 size-4 text-purple-100 transition-colors duration-200 dark:text-purple-200"
 						]}
 					></span>
 					<div class="flex flex-1 flex-col">
 						<span class="font-medium text-white transition-colors duration-200"
 							>{formatAIType(ai.id)}</span
 						>
-						<span class="text-xs text-purple-200 transition-colors duration-200">
+						<span class="text-xs text-purple-100 transition-colors duration-200 dark:text-purple-200">
 							{getAIDescription(ai.id)}
 						</span>
 					</div>

src/lib/components/interface/overlay/AddRobotButton.svelte

@@ -55,7 +55,7 @@
 	variant="default"
 	size="sm"
 	onclick={quickAddSO100}
-	class="group rounded-r-none border-0 bg-emerald-600 text-white transition-all duration-200 hover:bg-emerald-500"
+	class="group rounded-r-none border-0 bg-emerald-500 text-white transition-all duration-200 hover:bg-emerald-400 dark:bg-emerald-600 dark:hover:bg-emerald-500"
 >
 	<span
 		class={[
@@ -75,8 +75,9 @@
 				variant="default"
 				size="sm"
 				class={cn(
-					"rounded-l-none border-0 border-l border-emerald-500/30 bg-emerald-600 px-2 text-white transition-all duration-200 hover:bg-emerald-500",
-					open && "bg-emerald-700 shadow-inner"
+					"rounded-l-none border-0 border-l border-emerald-400/30 bg-emerald-500 px-2 text-white transition-all duration-200 hover:bg-emerald-400",
+					"dark:border-emerald-500/30 dark:bg-emerald-600 dark:hover:bg-emerald-500",
+					open && "bg-emerald-600 shadow-inner dark:bg-emerald-700"
 				)}
 			>
 				<span
@@ -91,12 +92,12 @@
 	</DropdownMenu.Trigger>
 
 	<DropdownMenu.Content
-		class="w-56 border-emerald-500/30 bg-emerald-600 backdrop-blur-sm"
+		class="w-56 border-emerald-400/30 bg-emerald-500 backdrop-blur-sm dark:border-emerald-500/30 dark:bg-emerald-600"
 		align="center"
 	>
 		<DropdownMenu.Group>
 			<DropdownMenu.GroupHeading
-				class="text-xs font-semibold tracking-wider text-emerald-200 uppercase"
+				class="text-xs font-semibold tracking-wider text-emerald-100 uppercase dark:text-emerald-200"
 			>
 				Robot Types
 			</DropdownMenu.GroupHeading>
@@ -104,29 +105,29 @@
 			{#each robotTypes as robotType}
 				<DropdownMenu.Item
 					class={[
-						"group group cursor-pointer bg-emerald-600 text-white transition-all duration-200",
-						"data-highlighted:bg-emerald-700 "
+						"group group cursor-pointer bg-emerald-500 text-white transition-all duration-200",
+						"data-highlighted:bg-emerald-600 dark:bg-emerald-600 dark:data-highlighted:bg-emerald-700"
 					]}
 					onclick={async () => await addRobot(robotType)}
 				>
 					<span
 						class={[
 							robotType === "so-arm100" ? "icon-[ix--robotic-arm]" : "icon-[mdi--robot-industrial]",
-							"mr-3 size-4 text-emerald-200  transition-colors duration-200"
+							"mr-3 size-4 text-emerald-100 transition-colors duration-200 dark:text-emerald-200"
 						]}
 					></span>
 					<div class="flex flex-1 flex-col">
 						<span class="font-medium text-white transition-colors duration-200"
 							>{robotType.replace(/-/g, " ").toUpperCase()}</span
 						>
-						<span class="text-xs text-emerald-200 transition-colors duration-200">
+						<span class="text-xs text-emerald-100 transition-colors duration-200 dark:text-emerald-200">
 							{robotType === "so-arm100" ? "6-DOF Robotic Arm" : "Industrial Robot"}
 						</span>
 					</div>
 					{#if robotType === "so-arm100"}
 						<Badge
 							variant="secondary"
-							class="ml-2 bg-emerald-700 text-xs text-emerald-100 group-data-highlighted:bg-emerald-400 group-data-highlighted:text-emerald-900"
+							class="ml-2 bg-emerald-600 text-xs text-emerald-100 group-data-highlighted:bg-emerald-300 group-data-highlighted:text-emerald-900 dark:bg-emerald-700 dark:text-emerald-100 dark:group-data-highlighted:bg-emerald-400 dark:group-data-highlighted:text-emerald-900"
 						>
 							Default
 						</Badge>

src/lib/components/interface/overlay/AddSensorButton.svelte

@@ -86,7 +86,7 @@
 	variant="default"
 	size="sm"
 	onclick={quickAddCamera}
-	class="group rounded-r-none border-0 bg-blue-600 text-white transition-all duration-200 hover:bg-blue-500"
+	class="group rounded-r-none border-0 bg-blue-500 text-white transition-all duration-200 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500"
 >
 	<span
 		class={[
@@ -106,8 +106,9 @@
 				variant="default"
 				size="sm"
 				class={cn(
-					"rounded-l-none border-0 border-l border-blue-500/30 bg-blue-600 px-2 text-white transition-all duration-200 hover:bg-blue-500",
-					open && "bg-blue-700 shadow-inner"
+					"rounded-l-none border-0 border-l border-blue-400/30 bg-blue-500 px-2 text-white transition-all duration-200 hover:bg-blue-400",
+					"dark:border-blue-500/30 dark:bg-blue-600 dark:hover:bg-blue-500",
+					open && "bg-blue-600 shadow-inner dark:bg-blue-700"
 				)}
 			>
 				<span
@@ -122,12 +123,12 @@
 	</DropdownMenu.Trigger>
 
 	<DropdownMenu.Content
-		class="w-56 border-blue-500/30 bg-blue-600 backdrop-blur-sm"
+		class="w-56 border-blue-400/30 bg-blue-500 backdrop-blur-sm dark:border-blue-500/30 dark:bg-blue-600"
 		align="center"
 	>
 		<DropdownMenu.Group>
 			<DropdownMenu.GroupHeading
-				class="text-xs font-semibold tracking-wider text-blue-200 uppercase"
+				class="text-xs font-semibold tracking-wider text-blue-100 uppercase dark:text-blue-200"
 			>
 				Sensor Types
 			</DropdownMenu.GroupHeading>
@@ -135,8 +136,8 @@
 			{#each sensorConfigs as sensor}
 				<DropdownMenu.Item
 					class={[
-						"group group cursor-pointer bg-blue-600 text-white transition-all duration-200",
-						"data-highlighted:bg-blue-700"
+						"group group cursor-pointer bg-blue-500 text-white transition-all duration-200",
+						"data-highlighted:bg-blue-600 dark:bg-blue-600 dark:data-highlighted:bg-blue-700"
 					]}
 					disabled={!sensor.enabled}
 					onclick={async () => await addSensor(sensor.id)}
@@ -144,21 +145,21 @@
 					<span
 						class={[
 							sensor.icon,
-							"mr-3 size-4 text-blue-200 transition-colors duration-200"
+							"mr-3 size-4 text-blue-100 transition-colors duration-200 dark:text-blue-200"
 						]}
 					></span>
 					<div class="flex flex-1 flex-col">
 						<span class="font-medium text-white transition-colors duration-200"
 							>{sensor.label}</span
 						>
-						<span class="text-xs text-blue-200 transition-colors duration-200">
+						<span class="text-xs text-blue-100 transition-colors duration-200 dark:text-blue-200">
 							{sensor.description}
 						</span>
 					</div>
 					{#if sensor.isDefault}
 						<Badge
 							variant="secondary"
-							class="ml-2 bg-blue-700 text-xs text-blue-100 group-data-highlighted:bg-blue-400 group-data-highlighted:text-blue-900"
+							class="ml-2 bg-blue-600 text-xs text-blue-100 group-data-highlighted:bg-blue-300 group-data-highlighted:text-blue-900 dark:bg-blue-700 dark:text-blue-100 dark:group-data-highlighted:bg-blue-400 dark:group-data-highlighted:text-blue-900"
 						>
 							Default
 						</Badge>

src/lib/components/interface/overlay/Overlay.svelte

@@ -4,31 +4,38 @@
 	import AddAIButton from "@/components/interface/overlay/AddAIButton.svelte";
 	import SettingsButton from "@/components/interface/overlay/SettingsButton.svelte";
 	import SettingsSheet from "@/components/interface/overlay/SettingsSheet.svelte";
+	import WorkspaceIdButton from "@/components/interface/overlay/WorkspaceIdButton.svelte";
 
 	interface Props {
+		workspaceId: string;
 		addRobotDropdownMenuOpen?: boolean;
 		addSensorDropdownMenuOpen?: boolean;
 		addAIDropdownMenuOpen?: boolean;
 		settingsOpen?: boolean;
+		workspaceIdMenuOpen?: boolean;
 	}
 
 	let {
+		workspaceId,
 		addRobotDropdownMenuOpen = $bindable(false),
 		addSensorDropdownMenuOpen = $bindable(false),
 		addAIDropdownMenuOpen = $bindable(false),
-		settingsOpen = $bindable(false)
+		settingsOpen = $bindable(false),
+		workspaceIdMenuOpen = $bindable(false)
 	}: Props = $props();
+
+
 </script>
 
 <div class="select-none">
 	<!-- Button Bar Container -->
 	<div class="fixed top-4 left-4 z-50 flex gap-2 select-none">
 		<!-- Add Robot Button Group -->
-		<div class="flex items-center justify-center gap-2 overflow-hidden rounded-lg shadow-lg">
+		<div class="flex items-center justify-center gap-2 overflow-hidden rounded-lg ">
 			<!-- Logo/Favicon -->
-			<div class="flex items-center justify-center">
+			<div class="flex items-center justify-center ">
 				<!-- From /favicon_1024.png -->
-				<img src="/favicon_1024.png" alt="Logo" draggable="false" class="h-10 w-10 invert" />
+				<img src="/favicon_1024.png" alt="Logo" draggable="false" class="h-10 w-10 filter dark:invert invert-0" />
 			</div>
 			<!-- Add robot button and dropdown menu (Top Left) -->
 			<div class="flex items-center justify-center">
@@ -37,7 +44,7 @@
 		</div>
 
 		<!-- Add Sensor Button Group -->
-		<div class="flex items-center justify-center overflow-hidden rounded-lg shadow-lg">
+		<div class="flex items-center justify-center overflow-hidden rounded-lg ">
 			<!-- Add sensor button and dropdown menu -->
 			<div class="flex items-center justify-center">
 				<AddSensorButton bind:open={addSensorDropdownMenuOpen} />
@@ -45,7 +52,7 @@
 		</div>
 
 		<!-- Add AI Button Group -->
-		<div class="flex items-center justify-center overflow-hidden rounded-lg shadow-lg">
+		<div class="flex items-center justify-center overflow-hidden rounded-lg ">
 			<!-- Add AI button and dropdown menu -->
 			<div class="flex items-center justify-center">
 				<AddAIButton bind:open={addAIDropdownMenuOpen} />
@@ -53,7 +60,10 @@
 		</div>
 	</div>
 
-	<div class="fixed top-4 right-4 z-50">
+	<div class="fixed top-4 right-4 z-50 flex gap-2">
+		<!-- Workspace ID Button -->
+		<WorkspaceIdButton {workspaceId} bind:open={workspaceIdMenuOpen} />
+
 		<!-- Settings Button and Sheet (Top Right, Left Side) -->
 		<SettingsButton bind:open={settingsOpen} />
 	</div>

src/lib/components/interface/overlay/SettingsButton.svelte

@@ -19,7 +19,7 @@
 	variant="default"
 	size="sm"
 	onclick={() => (open = !open)}
-	class="group w-32 border-0 bg-orange-600 text-white transition-all duration-200 hover:bg-orange-500"
+	class="group w-32 border-0 bg-orange-500 text-white transition-all duration-200 hover:bg-orange-400 dark:bg-orange-600 dark:hover:bg-orange-500"
 >
 	<span
 		class={[

src/lib/components/interface/overlay/SettingsSheet.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import * as Sheet from "@/components/ui/sheet";
 	import { Separator } from "@/components/ui/separator";
+	import { setMode, mode } from "mode-watcher";
 	import { Switch } from "@/components/ui/switch";
 	import { Label } from "@/components/ui/label";
 	import { Input } from "@/components/ui/input";
@@ -16,14 +17,12 @@
 	let { open = $bindable(false) }: Props = $props();
 
 	interface LocalSettings {
-		darkMode: boolean;
 		showFPS: boolean;
 		renderQuality: number;
 		animationSpeed: number;
 	}
 
 	let localSettings = $state<LocalSettings>({
-		darkMode: true,
 		showFPS: false,
 		renderQuality: 75,
 		animationSpeed: 1
@@ -89,16 +88,16 @@
 <Sheet.Root bind:open>
 	<Sheet.Content
 		side="left"
-		class="w-80 gap-0 border-r border-slate-600 bg-gradient-to-b from-slate-700 to-slate-800 p-0 text-white sm:w-96"
+		class="w-80 gap-0 border-r border-slate-300 bg-gradient-to-b from-slate-100 to-slate-200 p-0 text-slate-900 dark:border-slate-600 dark:bg-gradient-to-b dark:from-slate-700 dark:to-slate-800 dark:text-white sm:w-96"
 	>
 		<!-- Header -->
-		<Sheet.Header class="border-b border-slate-600 bg-slate-700/80 p-6 backdrop-blur-sm">
+		<Sheet.Header class="border-b border-slate-300 bg-slate-200/80 p-6 backdrop-blur-sm dark:border-slate-600 dark:bg-slate-700/80">
 			<div class="flex items-center justify-between">
 				<div class="flex items-center gap-3">
-					<span class="icon-[mdi--cog] size-6 text-orange-400"></span>
+					<span class="icon-[mdi--cog] size-6 text-orange-500 dark:text-orange-400"></span>
 					<div>
-						<Sheet.Title class="text-xl font-semibold text-slate-100">Robot Settings</Sheet.Title>
-						<p class="mt-1 text-sm text-slate-400">Configure application preferences</p>
+						<Sheet.Title class="text-xl font-semibold text-slate-900 dark:text-slate-100">Robot Settings</Sheet.Title>
+						<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Configure application preferences</p>
 					</div>
 				</div>
 			</div>
@@ -106,21 +105,21 @@
 
 		<!-- Content -->
 		<div
-			class="scrollbar-thin scrollbar-track-slate-700 scrollbar-thumb-slate-500 flex-1 overflow-y-auto px-4"
+			class="scrollbar-thin scrollbar-track-slate-300 scrollbar-thumb-slate-400 dark:scrollbar-track-slate-700 dark:scrollbar-thumb-slate-500 flex-1 overflow-y-auto px-4"
 		>
 			<div class="space-y-6 py-4">
 				<!-- Server Configuration -->
 				<div class="space-y-4">
 					<div class="mb-3 flex items-center gap-3">
-						<span class="icon-[mdi--server] size-5 text-blue-400"></span>
-						<h3 class="text-lg font-medium text-slate-100">Server Configuration</h3>
+						<span class="icon-[mdi--server] size-5 text-blue-500 dark:text-blue-400"></span>
+						<h3 class="text-lg font-medium text-slate-900 dark:text-slate-100">Server Configuration</h3>
 					</div>
 
 					<div class="space-y-4">
 						<div class="space-y-3">
 							<div class="space-y-1">
-								<Label class="text-sm font-medium text-slate-200">Inference Server URL</Label>
-								<p class="text-xs text-slate-400">
+								<Label class="text-sm font-medium text-slate-800 dark:text-slate-200">Inference Server URL</Label>
+								<p class="text-xs text-slate-600 dark:text-slate-400">
 									URL for the remote AI inference server that runs ACT models and manages robot sessions
 								</p>
 							</div>
@@ -128,14 +127,14 @@
 								<Input
 									bind:value={settings.inferenceServerUrl}
 									placeholder="http://localhost:8001"
-									class="flex-1 bg-slate-800 border-slate-600 text-slate-100"
+									class="flex-1 bg-slate-100 border-slate-300 text-slate-900 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100"
 								/>
 								<Button
 									variant="outline"
 									size="sm"
 									onclick={checkInferenceServerConnection}
 									disabled={isCheckingInferenceConnection}
-									class="border-slate-600 text-slate-200 hover:bg-slate-700"
+									class="border-slate-300 text-slate-700 hover:bg-slate-200 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700"
 								>
 									{#if isCheckingInferenceConnection}
 										<span class="icon-[mdi--loading] animate-spin mr-1 size-4"></span>
@@ -148,22 +147,22 @@
 							</div>
 							<div class="flex items-center gap-2">
 								{#if inferenceConnectionStatus === 'connected'}
-									<span class="icon-[mdi--check-circle] size-4 text-green-400"></span>
-									<span class="text-xs text-green-400">Connected to inference server</span>
+									<span class="icon-[mdi--check-circle] size-4 text-green-500 dark:text-green-400"></span>
+									<span class="text-xs text-green-600 dark:text-green-400">Connected to inference server</span>
 								{:else if inferenceConnectionStatus === 'disconnected'}
-									<span class="icon-[mdi--close-circle] size-4 text-red-400"></span>
-									<span class="text-xs text-red-400">Cannot connect to inference server</span>
+									<span class="icon-[mdi--close-circle] size-4 text-red-500 dark:text-red-400"></span>
+									<span class="text-xs text-red-600 dark:text-red-400">Cannot connect to inference server</span>
 								{:else}
-									<span class="icon-[mdi--help-circle] size-4 text-slate-400"></span>
-									<span class="text-xs text-slate-400">Connection status unknown</span>
+									<span class="icon-[mdi--help-circle] size-4 text-slate-500 dark:text-slate-400"></span>
+									<span class="text-xs text-slate-600 dark:text-slate-400">Connection status unknown</span>
 								{/if}
 							</div>
 						</div>
 
 						<div class="space-y-3">
 							<div class="space-y-1">
-								<Label class="text-sm font-medium text-slate-200">Transport Server URL</Label>
-								<p class="text-xs text-slate-400">
+								<Label class="text-sm font-medium text-slate-800 dark:text-slate-200">Transport Server URL</Label>
+								<p class="text-xs text-slate-600 dark:text-slate-400">
 									URL for the transport server that manages communication rooms and routes video streams and robot data using consumer/producer system
 								</p>
 							</div>
@@ -171,14 +170,14 @@
 								<Input
 									bind:value={settings.transportServerUrl}
 									placeholder="http://localhost:8000"
-									class="flex-1 bg-slate-800 border-slate-600 text-slate-100"
+									class="flex-1 bg-slate-100 border-slate-300 text-slate-900 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100"
 								/>
 								<Button
 									variant="outline"
 									size="sm"
 									onclick={checkTransportServerConnection}
 									disabled={isCheckingTransportConnection}
-									class="border-slate-600 text-slate-200 hover:bg-slate-700"
+									class="border-slate-300 text-slate-700 hover:bg-slate-200 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700"
 								>
 									{#if isCheckingTransportConnection}
 										<span class="icon-[mdi--loading] animate-spin mr-1 size-4"></span>
@@ -191,50 +190,53 @@
 							</div>
 							<div class="flex items-center gap-2">
 								{#if transportConnectionStatus === 'connected'}
-									<span class="icon-[mdi--check-circle] size-4 text-green-400"></span>
-									<span class="text-xs text-green-400">Connected to transport server</span>
+									<span class="icon-[mdi--check-circle] size-4 text-green-500 dark:text-green-400"></span>
+									<span class="text-xs text-green-600 dark:text-green-400">Connected to transport server</span>
 								{:else if transportConnectionStatus === 'disconnected'}
-									<span class="icon-[mdi--close-circle] size-4 text-red-400"></span>
-									<span class="text-xs text-red-400">Cannot connect to transport server</span>
+									<span class="icon-[mdi--close-circle] size-4 text-red-500 dark:text-red-400"></span>
+									<span class="text-xs text-red-600 dark:text-red-400">Cannot connect to transport server</span>
 								{:else}
-									<span class="icon-[mdi--help-circle] size-4 text-slate-400"></span>
-									<span class="text-xs text-slate-400">Connection status unknown</span>
+									<span class="icon-[mdi--help-circle] size-4 text-slate-500 dark:text-slate-400"></span>
+									<span class="text-xs text-slate-600 dark:text-slate-400">Connection status unknown</span>
 								{/if}
 							</div>
 						</div>
 					</div>
 				</div>
 
-				<Separator class="bg-slate-600" />
+				<Separator class="bg-slate-300 dark:bg-slate-600" />
 
 				<!-- Application Settings -->
 				<div class="space-y-4">
 					<div class="mb-3 flex items-center gap-3">
-						<span class="icon-[mdi--tune] size-5 text-orange-400"></span>
-						<h3 class="text-lg font-medium text-slate-100">Application Settings</h3>
+						<span class="icon-[mdi--tune] size-5 text-orange-500 dark:text-orange-400"></span>
+						<h3 class="text-lg font-medium text-slate-900 dark:text-slate-100">Application Settings</h3>
 					</div>
 
-					<!-- <div class="space-y-4">
+					<div class="space-y-4">
 						<div class="flex items-center justify-between">
 							<div class="space-y-1">
-								<Label class="text-sm font-medium text-slate-200">Dark Mode</Label>
-								<p class="text-xs text-slate-400">Use dark theme for the interface</p>
+								<Label class="text-sm font-medium text-slate-800 dark:text-slate-200">Dark Mode</Label>
+								<p class="text-xs text-slate-600 dark:text-slate-400">Use dark theme for the interface</p>
 							</div>
-							<Switch bind:checked={localSettings.darkMode} />
+							<Switch 
+								checked={mode.current === 'dark'} 
+								onCheckedChange={(checked) => setMode(checked ? 'dark' : 'light')}
+							/>
 						</div>
 
-						<div class="flex items-center justify-between">
+						<!-- <div class="flex items-center justify-between">
 							<div class="space-y-1">
-								<Label class="text-sm font-medium text-slate-200">Show FPS</Label>
-								<p class="text-xs text-slate-400">Display frame rate counter</p>
+								<Label class="text-sm font-medium text-slate-800 dark:text-slate-200">Show FPS</Label>
+								<p class="text-xs text-slate-600 dark:text-slate-400">Display frame rate counter</p>
 							</div>
 							<Switch bind:checked={localSettings.showFPS} />
 						</div>
 
 						<div class="space-y-3">
 							<div class="space-y-1">
-								<Label class="text-sm font-medium text-slate-200">Render Quality</Label>
-								<p class="text-xs text-slate-400">
+								<Label class="text-sm font-medium text-slate-800 dark:text-slate-200">Render Quality</Label>
+								<p class="text-xs text-slate-600 dark:text-slate-400">
 									Adjust 3D rendering quality ({localSettings.renderQuality}%)
 								</p>
 							</div>
@@ -244,7 +246,7 @@
 								max="100"
 								step="5"
 								bind:value={localSettings.renderQuality}
-								class="slider h-2 w-full cursor-pointer appearance-none rounded-lg bg-slate-600"
+								class="slider h-2 w-full cursor-pointer appearance-none rounded-lg bg-slate-300 dark:bg-slate-600"
 							/>
 							<div class="flex justify-between text-xs text-slate-500">
 								<span>25%</span>
@@ -252,11 +254,10 @@
 							</div>
 						</div>
 
-
 						<div class="space-y-3">
 							<div class="space-y-1">
-								<Label class="text-sm font-medium text-slate-200">Animation Speed</Label>
-								<p class="text-xs text-slate-400">
+								<Label class="text-sm font-medium text-slate-800 dark:text-slate-200">Animation Speed</Label>
+								<p class="text-xs text-slate-600 dark:text-slate-400">
 									Robot movement animation speed ({localSettings.animationSpeed}x)
 								</p>
 							</div>
@@ -266,29 +267,29 @@
 								max="3"
 								step="0.1"
 								bind:value={localSettings.animationSpeed}
-								class="slider h-2 w-full cursor-pointer appearance-none rounded-lg bg-slate-600"
+								class="slider h-2 w-full cursor-pointer appearance-none rounded-lg bg-slate-300 dark:bg-slate-600"
 							/>
 							<div class="flex justify-between text-xs text-slate-500">
 								<span>0.1x</span>
 								<span>3x</span>
 							</div>
-						</div>
-					</div> -->
+						</div> -->
+					</div>
 				</div>
 
-				<Separator class="bg-slate-600" />
+				<Separator class="bg-slate-300 dark:bg-slate-600" />
 
 				<!-- About Section -->
 				<div class="space-y-4">
 					<div class="mb-3 flex items-center gap-3">
-						<span class="icon-[mdi--information-outline] size-5 text-blue-400"></span>
-						<h3 class="text-lg font-medium text-slate-100">About</h3>
+						<span class="icon-[mdi--information-outline] size-5 text-blue-500 dark:text-blue-400"></span>
+						<h3 class="text-lg font-medium text-slate-900 dark:text-slate-100">About</h3>
 					</div>
 
 					<div class="space-y-4">
 						<div class="space-y-2">
-							<h4 class="text-sm font-medium text-slate-200">Acknowledgements</h4>
-							<p class="text-xs leading-relaxed text-slate-400">
+							<h4 class="text-sm font-medium text-slate-800 dark:text-slate-200">Acknowledgements</h4>
+							<p class="text-xs leading-relaxed text-slate-600 dark:text-slate-400">
 								This application is built with amazing open-source technologies and communities.
 							</p>
 						</div>
@@ -299,12 +300,12 @@
 								href="https://github.com/huggingface/lerobot"
 								target="_blank"
 								rel="noopener noreferrer"
-								class="flex items-center gap-3 rounded-lg border border-slate-600 bg-slate-800/50 p-3 transition-colors duration-200 hover:bg-slate-700/50"
+								class="flex items-center gap-3 rounded-lg border border-slate-300 bg-slate-100/50 p-3 transition-colors duration-200 hover:bg-slate-200/50 dark:border-slate-600 dark:bg-slate-800/50 dark:hover:bg-slate-700/50"
 							>
-								<span class="icon-[mdi--robot] size-5 text-yellow-400"></span>
+								<span class="icon-[mdi--robot] size-5 text-yellow-500 dark:text-yellow-400"></span>
 								<div class="flex-1">
-									<div class="text-sm font-medium text-slate-200">Hugging Face LeRobot</div>
-									<p class="text-xs text-slate-400">Robotics AI framework and models</p>
+									<div class="text-sm font-medium text-slate-800 dark:text-slate-200">Hugging Face LeRobot</div>
+									<p class="text-xs text-slate-600 dark:text-slate-400">Robotics AI framework and models</p>
 								</div>
 							</a>
 
@@ -313,12 +314,12 @@
 								href="https://threlte.xyz"
 								target="_blank"
 								rel="noopener noreferrer"
-								class="flex items-center gap-3 rounded-lg border border-slate-600 bg-slate-800/50 p-3 transition-colors duration-200 hover:bg-slate-700/50"
+								class="flex items-center gap-3 rounded-lg border border-slate-300 bg-slate-100/50 p-3 transition-colors duration-200 hover:bg-slate-200/50 dark:border-slate-600 dark:bg-slate-800/50 dark:hover:bg-slate-700/50"
 							>
-								<span class="icon-[mdi--cube-outline] size-5 text-orange-400"></span>
+								<span class="icon-[mdi--cube-outline] size-5 text-orange-500 dark:text-orange-400"></span>
 								<div class="flex-1">
-									<div class="text-sm font-medium text-slate-200">Threlte</div>
-									<p class="text-xs text-slate-400">3D graphics library for Svelte</p>
+									<div class="text-sm font-medium text-slate-800 dark:text-slate-200">Threlte</div>
+									<p class="text-xs text-slate-600 dark:text-slate-400">3D graphics library for Svelte</p>
 								</div>
 							</a>
 
@@ -327,12 +328,16 @@
 								href="https://bambot.org"
 								target="_blank"
 								rel="noopener noreferrer"
-								class="flex items-center gap-3 rounded-lg border border-slate-600 bg-slate-800/50 p-3 transition-colors duration-200 hover:bg-slate-700/50"
+								class="flex items-center gap-3 rounded-lg border border-slate-300 bg-slate-100/50 p-3 transition-colors duration-200 hover:bg-slate-200/50 dark:border-slate-600 dark:bg-slate-800/50 dark:hover:bg-slate-700/50"
 							>
-								<span class="icon-[mdi--memory] size-5 text-green-400"></span>
+								<span class="icon-[mdi--memory] size-5 text-green-500 dark:text-green-400"></span>
 								<div class="flex-1">
-									<div class="text-sm font-medium text-slate-200">bambot.org feetech.js</div>
-									<p class="text-xs text-slate-400">Servo motor control library</p>
+									<div class="text-sm font-medium text-slate-800 dark:text-slate-200">bambot.org feetech.js</div>
+									<p class="text-xs text-slate-600 dark:text-slate-400">
+										Amazing project by Tim Qian (https://x.com/tim_qian).
+										Most of the USB control part (feetech.js) comes from this project.
+										Thanks to Tim for sharing his work!
+									</p>
 								</div>
 							</a>
 
@@ -341,12 +346,12 @@
 								href="https://github.com/brean/urdf-viewer"
 								target="_blank"
 								rel="noopener noreferrer"
-								class="flex items-center gap-3 rounded-lg border border-slate-600 bg-slate-800/50 p-3 transition-colors duration-200 hover:bg-slate-700/50"
+								class="flex items-center gap-3 rounded-lg border border-slate-300 bg-slate-100/50 p-3 transition-colors duration-200 hover:bg-slate-200/50 dark:border-slate-600 dark:bg-slate-800/50 dark:hover:bg-slate-700/50"
 							>
-								<span class="icon-[mdi--cube-outline] size-5 text-orange-400"></span>
+								<span class="icon-[mdi--cube-outline] size-5 text-orange-500 dark:text-orange-400"></span>
 								<div class="flex-1">
-									<div class="text-sm font-medium text-slate-200">URDF Viewer</div>
-									<p class="text-xs text-slate-400">
+									<div class="text-sm font-medium text-slate-800 dark:text-slate-200">URDF Viewer</div>
+									<p class="text-xs text-slate-600 dark:text-slate-400">
 										Nice component for viewing URDF models with Threlte
 									</p>
 								</div>

src/lib/elements/compute/README.md

@@ -26,7 +26,7 @@ import { remoteComputeManager } from '$lib/elements/compute/';
 // Create a new compute instance
 const compute = remoteComputeManager.createCompute('my-compute', 'ACT Model');
 
-// Create an AI session
+// Create an Inference Session
 await remoteComputeManager.createSession(compute.id, {
   sessionId: 'my-session',
   policyPath: './checkpoints/act_so101_beyond',
@@ -73,7 +73,7 @@ The system integrates with the AI server backend (`backend/ai-server/`) which pr
 ### Modal Dialog
 
 `AISessionConnectionModal.svelte` provides a comprehensive interface for:
-- Creating new AI sessions with configurable parameters
+- Creating new Inference Sessions with configurable parameters
 - Managing existing sessions (start, stop, delete)
 - Viewing session status and connection details
 - Real-time session monitoring
@@ -99,7 +99,7 @@ The status system shows input/output connections:
 // 1. Create a compute instance
 const compute = remoteComputeManager.createCompute();
 
-// 2. Configure and create AI session
+// 2. Configure and create Inference Session
 await remoteComputeManager.createSession(compute.id, {
   sessionId: 'robot-control-01',
   policyPath: './checkpoints/act_so101_beyond',

src/lib/elements/compute/RemoteComputeManager.svelte.ts

@@ -136,7 +136,7 @@ export class RemoteComputeManager {
   }
 
   /**
-   * Create an AI session
+   * Create an Inference Session
    */
   async createSession(computeId: string, config: AISessionConfig): Promise<{ success: boolean; error?: string; data?: AISessionResponse }> {
     const compute = this.getCompute(computeId);

src/lib/elements/robot/Robot.svelte.ts

@@ -257,7 +257,7 @@ export class Robot implements Positionable {
     return this._setConsumer(config, false);
   }
 
-  // Join existing room as consumer (for AI session integration)
+  // Join existing room as consumer (for Inference Session integration)
   async joinAsConsumer(config: RemoteDriverConfig): Promise<string> {
     if (config.type !== 'remote') {
       throw new Error('joinAsConsumer only supports remote drivers');
@@ -308,7 +308,7 @@ export class Robot implements Positionable {
     return this._addProducer(config, false);
   }
 
-  // Join existing room as producer (for AI session integration)
+  // Join existing room as producer (for Inference Session integration)
   async joinAsProducer(config: RemoteDriverConfig): Promise<string> {
     if (config.type !== 'remote') {
       throw new Error('joinAsProducer only supports remote drivers');

src/lib/elements/robot/drivers/RemoteConsumer.ts

@@ -88,7 +88,7 @@ export class RemoteConsumer implements Consumer {
       
       let roomData;
       if (joinExistingRoom) {
-        // Join existing room (for AI session integration)
+        // Join existing room (for Inference Session integration)
         roomData = { workspaceId: this.workspaceId, roomId: this.config.robotId };
         console.log(`[RemoteConsumer] Joining existing room ${this.config.robotId} in workspace ${this.workspaceId}`);
       } else {

src/lib/elements/robot/drivers/RemoteProducer.ts

@@ -62,7 +62,7 @@ export class RemoteProducer implements Producer {
 
       let roomData;
       if (joinExistingRoom) {
-        // Join existing room (for AI session integration)
+        // Join existing room (for Inference Session integration)
         roomData = { workspaceId: this.workspaceId, roomId: this.config.robotId };
         console.log(`[RemoteProducer] Joining existing room ${this.config.robotId} in workspace ${this.workspaceId}`);
       } else {

src/lib/runes/settings.svelte.ts

@@ -9,7 +9,7 @@ export const settings: Settings = $state({
 	// inferenceServerUrl: 'http://localhost:8001',
 	// transportServerUrl: 'http://localhost:8000'
 	// inferenceServerUrl: 'https://blanchon-robothub-inferenceserver.hf.space/api',
-	// transportServerUrl: 'https://blanchon-robothub-transportserver.hf.space/api'
+	// transportServerUrl: 'https://blanchon-robothub-transport-server.hf.space/api'
 	inferenceServerUrl: env.PUBLIC_INFERENCE_SERVER_URL ?? 'http://localhost:8001',
 	transportServerUrl: env.PUBLIC_TRANSPORT_SERVER_URL ?? 'http://localhost:8000'
 });

src/routes/+layout.svelte

@@ -1,37 +1,38 @@
 <script lang="ts">
-	import Overlay from "@/components/interface/overlay/Overlay.svelte";
+	import { ModeWatcher } from "mode-watcher";
 	import "../app.css";
 	import { Toaster } from "@/components/ui/sonner";
 
 	let { children } = $props();
 </script>
 
-<div class="fixed inset-0 -z-20 h-[100dvh] w-screen bg-[#192437]">
+<div class="fixed inset-0 -z-20 h-[100dvh] w-screen bg-slate-200 dark:bg-[#192437]">
 	{@render children()}
 </div>
 
+<ModeWatcher defaultMode="dark" track={false} />
+
 <Toaster
 	richColors
 	position="bottom-right"
 	toastOptions={{
 		unstyled: true,
 		classes: {
-			toast: "rounded-lg shadow-xl p-4 flex items-start gap-3 min-w-[300px] max-w-[450px] border",
+			toast: "rounded-lg shadow-xl p-4 flex items-start gap-3 min-w-[300px] max-w-[450px] border bg-white border-slate-200 text-slate-900 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-100",
 			title: "font-medium text-sm leading-tight",
 			description: "text-sm mt-1 leading-relaxed opacity-90",
 			actionButton:
-				"bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded-md text-xs font-medium transition-colors duration-200 ml-auto",
+				"bg-blue-500 hover:bg-blue-600 text-white px-3 py-1.5 rounded-md text-xs font-medium transition-colors duration-200 ml-auto dark:bg-blue-600 dark:hover:bg-blue-700",
 			cancelButton:
-				"bg-slate-700 hover:bg-slate-600 text-slate-300 px-3 py-1.5 rounded-md text-xs font-medium transition-colors duration-200",
+				"bg-slate-200 hover:bg-slate-300 text-slate-700 px-3 py-1.5 rounded-md text-xs font-medium transition-colors duration-200 dark:bg-slate-700 dark:hover:bg-slate-600 dark:text-slate-300",
 			closeButton:
-				"text-current opacity-70 hover:opacity-100 transition-opacity duration-200 p-1 rounded-md hover:bg-white/10",
-			success: "!bg-green-950 border-green-700 !text-green-200",
-			error: "!bg-red-950 border-red-700 !text-red-200",
-			warning: "!bg-yellow-950 border-yellow-700 !text-yellow-200",
-			info: "!bg-blue-950 border-blue-700 !text-blue-200",
-			loading: "!bg-slate-900 border-slate-700 !text-slate-200"
+				"text-current opacity-70 hover:opacity-100 transition-opacity duration-200 p-1 rounded-md hover:bg-slate-100 dark:hover:bg-white/10",
+			success: "!bg-green-50 !border-green-200 !text-green-800 dark:!bg-green-950 dark:!border-green-700 dark:!text-green-200",
+			error: "!bg-red-50 !border-red-200 !text-red-800 dark:!bg-red-950 dark:!border-red-700 dark:!text-red-200",
+			warning: "!bg-yellow-50 !border-yellow-200 !text-yellow-800 dark:!bg-yellow-950 dark:!border-yellow-700 dark:!text-yellow-200",
+			info: "!bg-blue-50 !border-blue-200 !text-blue-800 dark:!bg-blue-950 dark:!border-blue-700 dark:!text-blue-200",
+			loading: "!bg-slate-50 !border-slate-200 !text-slate-800 dark:!bg-slate-900 dark:!border-slate-700 dark:!text-slate-200"
 		}
 	}}
 />
 
-<Overlay /> 

src/routes/+page.svelte

@@ -4,12 +4,11 @@
 	import Videos from "@/components/3d/elements/video/Videos.svelte";
 	import { PerfMonitor } from "@threlte/extras";
 	import { T, Canvas } from "@threlte/core";
-	import Floor from '@/components/3d/Floor.svelte'
+	import Floor from "@/components/3d/Floor.svelte";
 	import { Gizmo, OrbitControls } from "@threlte/extras";
 	import { dev } from "$app/environment";
-	import { page } from "$app/stores";
-	import { goto } from "$app/navigation";
 	import { onMount } from "svelte";
+	import Overlay from "@/components/interface/overlay/Overlay.svelte";
 
 	let workspaceId = $state("");
 
@@ -27,55 +26,58 @@
 </script>
 
 {#if workspaceId}
-<Canvas>
-	<T.Scene>
-		<T.PerspectiveCamera position.x={-15} position.y={15} position.z={15} fov={20} makeDefault>
-			<OrbitControls
-				enableDamping
-				dampingFactor={0.05}
-				enableZoom
-				minDistance={15}
-				maxDistance={40}
-				minPolarAngle={Math.PI / 6}
-				maxPolarAngle={Math.PI / 2}
-				target={[0, 1, 0]}
-			>
-				<Gizmo />
-			</OrbitControls>
-		</T.PerspectiveCamera>
+	<Overlay {workspaceId} />
+	<Canvas>
+		<T.Scene>
+			<T.PerspectiveCamera position.x={-15} position.y={15} position.z={15} fov={20} makeDefault>
+				<OrbitControls
+					enableDamping
+					dampingFactor={0.05}
+					enableZoom
+					minDistance={15}
+					maxDistance={40}
+					minPolarAngle={Math.PI / 6}
+					maxPolarAngle={Math.PI / 2}
+					target={[0, 1, 0]}
+				>
+					<Gizmo />
+				</OrbitControls>
+			</T.PerspectiveCamera>
 
-		<!-- Lighting setup -->
-		<T.AmbientLight intensity={0.4} />
-		<T.DirectionalLight
-			position={[2, 20, 5]}
-			intensity={1}
-			castShadow
-			shadow.mapSize.width={1024}
-			shadow.mapSize.height={1024}
-		/>
-		<T.DirectionalLight
+			<!-- Lighting setup -->
+			<T.AmbientLight intensity={0.4} />
+			<T.DirectionalLight
+				position={[2, 20, 5]}
+				intensity={5}
+				castShadow
+				shadow.mapSize.width={1024}
+				shadow.mapSize.height={1024}
+			/>
+			<!-- <T.DirectionalLight
 			position={[-2, 20, -5]}
 			intensity={1}
 			castShadow
 			shadow.mapSize.width={1024}
 			shadow.mapSize.height={1024}
-		/>
+		/> -->
 
-		<Floor />
+			<Floor />
 
-		<!-- Robot component now gets robots from robotManager -->
-		<Robots {workspaceId} />
+			<!-- Robot component now gets robots from robotManager -->
+			<Robots {workspaceId} />
 
-		<Videos {workspaceId} />
+			<Videos {workspaceId} />
 
-		<Computes {workspaceId} />
-	</T.Scene>
-	{#if dev}
-		<PerfMonitor anchorX="right" anchorY="bottom" logsPerSecond={30} />
-	{/if}
-</Canvas>
+			<Computes {workspaceId} />
+		</T.Scene>
+		{#if dev}
+			<PerfMonitor anchorX="right" anchorY="bottom" logsPerSecond={30} />
+		{/if}
+	</Canvas>
 {:else}
-<div class="flex items-center justify-center h-screen">
-	<div class="text-white">Loading workspace...</div>
-</div>
-{/if} 
+	<div class="flex h-screen items-center justify-center">
+		<div class="text-slate-900 dark:text-white">
+			Loading
+		</div>
+	</div>
+{/if}

static-server.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env bun
 
 // Simple static file server for Svelte build output
-import { resolve, join } from "path";
+import { join } from "path";
 
 const PORT = process.env.PORT || 3000;
 const BUILD_DIR = "./build";