Make engine background color driven by theme setting (#1842)

* Bump ts lib

* Make engine background color driven by theme setting

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Force snapshots to dark mode, fix theme init

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Don't assume we have engineCommandManager in CameraControls,
because for some reason it's being loaded before engineConnection in test environments?

* Merge branch 'main' into change-bg-color

* Replace optional chaining with this.engineCommandManager

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Okay now all snapshot tests are actually in dark mode

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* trigger ci

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Kurt Hutten Irev-Dev <k.hutten@protonmail.ch>

src/components/SettingsAuthProvider.tsx

@@ -11,7 +11,7 @@ import {
   validateSettings,
 } from 'lib/settings/settingsUtils'
 import { toast } from 'react-hot-toast'
-import { setThemeClass, Themes } from 'lib/theme'
+import { getThemeColorForEngine, setThemeClass, Themes } from 'lib/theme'
 import {
   AnyStateMachine,
   ContextFrom,
@@ -22,7 +22,8 @@ import {
 import { isTauri } from 'lib/isTauri'
 import { settingsCommandBarConfig } from 'lib/commandBarConfigs/settingsCommandConfig'
 import { authCommandBarConfig } from 'lib/commandBarConfigs/authCommandConfig'
-import { kclManager, sceneInfra } from 'lib/singletons'
+import { kclManager, sceneInfra, engineCommandManager } from 'lib/singletons'
+import { v4 as uuidv4 } from 'uuid'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -95,6 +96,16 @@ export const SettingsAuthProviderBase = ({
               : context.baseUnit
           sceneInfra.baseUnit = newBaseUnit
         },
+        setEngineTheme: (context) => {
+          engineCommandManager.sendSceneCommand({
+            cmd_id: uuidv4(),
+            type: 'modeling_cmd_req',
+            cmd: {
+              type: 'set_background_color',
+              color: getThemeColorForEngine(context.theme),
+            },
+          })
+        },
         toastSuccess: (context, event) => {
           const truncatedNewValue =
             'data' in event && event.data instanceof Object