feat: enhance sidebar and theme utilities for improved UI consistency

- Updated the Sidebar component styles to utilize theme-based classes for better visual consistency.
- Added new utility functions to retrieve and convert theme colors for use in components, enhancing theming capabilities.
- Improved layout logic to ensure the default theme is applied correctly based on user preferences and document readiness.

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

@@ -18,19 +18,30 @@
 
   // 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();
-    }
+    if (typeof document === 'undefined') return;
+    
+    const htmlElement = document.documentElement;
+    
+    // Aguardar um pouco para garantir que o DOM está pronto
+    const timeoutId = setTimeout(() => {
+      if (currentUser?.data?.temaPreferido) {
+        // Usuário logado com tema preferido - aplicar tema salvo
+        aplicarTema(currentUser.data.temaPreferido);
+      } else if (currentUser !== undefined) {
+        // Se a query terminou (mesmo que não haja usuário), aplicar tema padrão
+        if (!htmlElement.getAttribute('data-theme')) {
+          aplicarTemaPadrao();
+        }
+      }
+    }, 50);
+
+    return () => clearTimeout(timeoutId);
   });
 
   // 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
+      // Se não há tema aplicado ainda, aplicar o padrão imediatamente
       const htmlElement = document.documentElement;
       if (!htmlElement.getAttribute('data-theme')) {
         aplicarTemaPadrao();