Adds option to change theme

app2/src/lib/components/Visualization.svelte

@@ -2,7 +2,7 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { BufferGeometry, Line, LineBasicMaterial, Vector3, type NormalBufferAttributes } from 'three';
 	import uzip from 'uzip';
-	import { model } from '$lib/stores';
+	import { model, servoAnglesOut } from '$lib/stores';
 	import { footColor, isEmbeddedApp, toeWorldPositions } from '$lib/utilities';
 	import { fileService } from '$lib/services';
 	import { servoAngles, mpu, jointNames } from '$lib/stores';
@@ -71,7 +71,7 @@
 
 	const updateAngles = (name: string, angle: number) => {
 		modelTargetAngles[$jointNames.indexOf(name)] = angle * (180 / Math.PI);
-        servoAngles.set(modelTargetAngles)
+        servoAnglesOut.set(modelTargetAngles)
 	};
 
 	const createScene = async () => {

app2/src/lib/stores/socket-store.ts

@@ -2,6 +2,9 @@ import { writable, type Writable } from 'svelte/store';
 import { type angles } from '$lib/models';
 
 export const isConnected = writable(false);
+export const servoAnglesOut: Writable<number[]> = writable([
+	0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
+]);
 export const servoAngles: Writable<number[]> = writable([
 	0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
 ]);

app2/src/routes/+layout.svelte

@@ -15,7 +15,7 @@
 	import Statusbar from './statusbar.svelte';
 	import Login from './login.svelte';
 	import { get, type Writable } from 'svelte/store';
-	import { isConnected, mode, outControllerData, servoAngles, socketData } from '$lib/stores';
+	import { isConnected, mode, outControllerData, servoAngles, servoAnglesOut, socketData } from '$lib/stores';
 	import { throttler } from '$lib/utilities';
 
 	export let data: LayoutData;
@@ -30,7 +30,7 @@
         connectToSocket()
         addPublisher(outControllerData, "controller")
         addPublisher(mode as unknown as Writable<WebsocketOutData>, "mode")
-        addPublisher(servoAngles as unknown as Writable<WebsocketOutData>, "angles")
+        addPublisher(servoAnglesOut as unknown as Writable<WebsocketOutData>, "angles")
 	});
 
     const connectToSocket = () => {

app2/src/routes/statusbar.svelte

@@ -11,6 +11,8 @@
 	import RssiIndicator from '$lib/components/RSSIIndicator.svelte';
 	import BatteryIndicator from '$lib/components/BatteryIndicator.svelte';
 	import UpdateIndicator from '$lib/components/UpdateIndicator.svelte';
+    import MdiWeatherSunny from '~icons/mdi/weather-sunny';
+    import MdiMoonAndStars from '~icons/mdi/moon-and-stars';
 
 	async function postSleep() {
 		const response = await fetch('/rest/sleep', {
@@ -48,6 +50,13 @@
 	<div class="indicator flex-none">
 		<UpdateIndicator />
 	</div>
+    <div class="flex-none">
+        <label class="swap swap-rotate">
+            <input type="checkbox" value="light" class="theme-controller"/>
+            <MdiWeatherSunny class="swap-off h-7 w-7"/>
+            <MdiMoonAndStars class="swap-on h-7 w-7"/>
+        </label>
+    </div>
 	<div class="flex-none">
 		{#if $telemetry.rssi.disconnected}
 			<WiFiOff class="h-7 w-7" />