feat: implement theme customization and user preferences

- Added support for user-selected themes, allowing users to customize the appearance of the application.
- Introduced a new `temaPreferido` field in the user schema to store the preferred theme.
- Updated various components to apply the selected theme dynamically based on user preferences.
- Enhanced the UI to include a theme selection interface, enabling users to preview and save their theme choices.
- Implemented a polyfill for BlobBuilder to ensure compatibility across browsers, improving the functionality of the application.

apps/web/src/routes/+layout.svelte

@@ -5,10 +5,38 @@
   import { authClient } from "$lib/auth";
   // Importar polyfill ANTES de qualquer outro código que possa usar Jitsi
   import "$lib/utils/jitsiPolyfill";
+  import { useQuery } from "convex-svelte";
+  import { api } from "@sgse-app/backend/convex/_generated/api";
+  import { aplicarTema, aplicarTemaPadrao } from "$lib/utils/temas";
 
   const { children } = $props();
 
   createSvelteAuthClient({ authClient });
+
+  // Buscar usuário atual para aplicar tema
+  const currentUser = useQuery(api.auth.getCurrentUser, {});
+
+  // Aplicar tema quando o usuário for carregado
+  $effect(() => {
+    if (currentUser?.data?.temaPreferido) {
+      // Usuário logado com tema preferido - aplicar tema salvo
+      aplicarTema(currentUser.data.temaPreferido);
+    } else if (currentUser?.data === null || (currentUser !== undefined && !currentUser.data)) {
+      // Usuário não está logado - aplicar tema padrão (roxo)
+      aplicarTemaPadrao();
+    }
+  });
+
+  // Aplicar tema padrão imediatamente ao carregar (antes de verificar usuário)
+  $effect(() => {
+    if (typeof document !== 'undefined') {
+      // Se não há tema aplicado ainda, aplicar o padrão
+      const htmlElement = document.documentElement;
+      if (!htmlElement.getAttribute('data-theme')) {
+        aplicarTemaPadrao();
+      }
+    }
+  });
 </script>
 
 <div>