From 7392be04d744697990309ec1967c3094d89faff3 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 12 Jul 2026 18:28:35 +0100
Subject: [PATCH] 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 <cursoragent@cursor.com>
Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>
---
 .../lib/features/app/app-mode-watcher.svelte  | 22 +++----------------
 1 file changed, 3 insertions(+), 19 deletions(-)

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