Fix SSR Build Failure: Add Browser Detection for Document Access

src/lib/stores.ts

@@ -13,7 +13,6 @@ export const currentLabStepIndex = writable(0);
 export const currentSession: Writable<Session> = writable();
 export const layout = writable("");
 export const transitionKey = writable("");
-export const storeTheme = localStorageStore("storeTheme", "tutors");
 export const storePreview = localStorageStore("storePreview", false);
 export const onlineStatus = localStorageStore("onlineStatus", true);
 export const authenticating: Writable<boolean> = writable(false);
@@ -26,3 +25,10 @@ export const coursesOnlineList = writable<LoEvent[]>([]);
 
 export const allStudentsOnline = writable(0);
 export const allStudentsOnlineList = writable<LoEvent[]>([]);
+
+let initialTheme = "tutors"; // Default value
+export const setInitialTheme = (theme: string) => {
+    initialTheme = theme;
+};
+
+export const storeTheme = localStorageStore("storeTheme", initialTheme);

src/lib/ui/themes/menu/ThemeButton.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-  import { storeTheme } from "$lib/stores";
+  import { storeTheme, setInitialTheme } from "$lib/stores";
   export let themeName = "";
 
   function setTheme() {
-    storeTheme.set(themeName);
+    console.log(`Setting theme to: ${themeName}`);
+    setInitialTheme(themeName);  // Ensure the initial theme is set
+    storeTheme.set(themeName);   // Update the store
   }
 </script>
 

src/lib/ui/themes/styles/icon-lib.ts

@@ -1,12 +1,13 @@
+import { browser } from "$app/environment";
 import { storeTheme } from "$lib/stores";
 import type { IconType } from "$lib/services/models/lo-types";
 import { FluentIconLib } from "../icons/fluent-icons";
 import { HeroIconLib } from "../icons/hero-icons";
 
-let StandardIconLib = FluentIconLib;
+let StandardIconLib: any = FluentIconLib;
 export const themes = ["tutors", "dyslexia", "skeleton", "seafoam", "vintage"];
 
-export const themeIcons = {
+export const themeIcons: Record<string, any> = {
   tutors: FluentIconLib,
   dyslexia: FluentIconLib,
   skeleton: HeroIconLib,
@@ -17,15 +18,23 @@ export const themeIcons = {
 let currentTheme = "tutors";
 storeTheme.subscribe((current) => {
   currentTheme = current;
-  StandardIconLib = themeIcons[current];
+  StandardIconLib = themeIcons[current] || FluentIconLib;
+});
+
+// Subscribe to the theme store and update the body class
+storeTheme.subscribe((value) => {
+  console.log(`Theme changed to: ${value}`);
+  if (browser) {
+    document.body.className = `theme-${value}`;
+  }
 });
 
 export function setIconLib(iconLib: any) {
   StandardIconLib = iconLib;
 }
 
 export function getIcon(type: string): IconType {
-  return StandardIconLib[type];
+  return StandardIconLib[type] || StandardIconLib.default;
 }
 
 export const currentIconLib: any = StandardIconLib;