fix(dashboard): stop rendering mode-watcher init script as visible page text (#740)

createInitialModeExpression returns bare JS, not a script tag. Injecting it
via {@html} in svelte:head printed setInitialMode source on customer org
sites. Let ModeWatcher inject the script correctly instead.

Co-authored-by: Cursor Agent <[email protected]>
Co-authored-by: Rotimi Best <[email protected]>

apps/dashboard/src/lib/features/app/app-mode-watcher.svelte

@@ -1,19 +1,8 @@
 <script lang="ts">
   import { browser } from '$app/environment';
-  import {
+  import { ModeWatcher, setMode, systemPrefersMode, userPrefersMode } from '@cio/ui/base/dark-mode';
-    ModeWatcher,
-    createInitialModeExpression,
-    setMode,
-    systemPrefersMode,
-    userPrefersMode
-  } from '@cio/ui/base/dark-mode';
 
-  import { MODE_STORAGE_KEY, readStoredColorMode } from '$lib/utils/functions/color-mode';
+  import { readStoredColorMode } from '$lib/utils/functions/color-mode';
-
-  const initialModeScript = createInitialModeExpression({
-    defaultMode: 'light',
-    modeStorageKey: MODE_STORAGE_KEY
-  });
 
   $effect(() => {
     if (!browser) {
@@ -29,9 +18,4 @@
   });
 </script>
 
-<svelte:head>
+<ModeWatcher defaultMode="light" />
-  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-  {@html initialModeScript}
-</svelte:head>
-
-<ModeWatcher defaultMode="light" disableHeadScriptInjection />