feat: add theme selection functionality and update theme management in the application, including new themes and improved persistence handling

2025-12-13 17:09:15 -03:00
parent c068715fc1
commit 9e45a43910
8 changed files with 407 additions and 396 deletions
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import '../app.css';
+	import { onMount } from 'svelte';
 	import { createSvelteAuthClient } from '@mmailaender/convex-better-auth-svelte/svelte';
 	import { authClient } from '$lib/auth';
 	// Importar polyfill ANTES de qualquer outro código que possa usar Jitsi
@@ -7,6 +8,7 @@
 	import { useQuery } from 'convex-svelte';
 	import { api } from '@sgse-app/backend/convex/_generated/api';
 	import { aplicarTema, aplicarTemaPadrao } from '$lib/utils/temas';
+	import { themeChange } from 'theme-change';

 	const { children } = $props();

@@ -15,6 +17,36 @@
 	// Buscar usuário atual para aplicar tema
 	const currentUser = useQuery(api.auth.getCurrentUser, {});

+	function obterTemaPersistido(): string | null {
+		if (typeof window === 'undefined') return null;
+		try {
+			const tema = window.localStorage.getItem('theme');
+			return tema && tema.trim() ? tema : null;
+		} catch {
+			return null;
+		}
+	}
+
+	function aplicarTemaDaisyUI(tema: string): void {
+		if (typeof document === 'undefined') return;
+		const htmlElement = document.documentElement;
+		htmlElement.setAttribute('data-theme', tema);
+		// Evita que `body[data-theme]` sobrescreva o tema do `<html>`
+		if (document.body) document.body.removeAttribute('data-theme');
+	}
+
+	onMount(() => {
+		// Habilita `data-set-theme` e `data-choose-theme` e persiste em localStorage ("theme")
+		// Em Svelte, precisamos passar `false` para não depender de `DOMContentLoaded`
+		themeChange(false);
+
+		// Garante que o tema persistido no device tenha prioridade
+		const temaPersistido = obterTemaPersistido();
+		if (temaPersistido) {
+			aplicarTemaDaisyUI(temaPersistido);
+		}
+	});
+
 	// Aplicar tema quando o usuário for carregado
 	$effect(() => {
 		if (typeof document === 'undefined') return;
@@ -23,6 +55,13 @@

 		// Aguardar um pouco para garantir que o DOM está pronto
 		const timeoutId = setTimeout(() => {
+			const temaPersistido = obterTemaPersistido();
+			if (temaPersistido) {
+				// Prioridade do device (localStorage) mesmo para usuários logados
+				aplicarTemaDaisyUI(temaPersistido);
+				return;
+			}
+
 			if (currentUser?.data?.temaPreferido) {
 				// Usuário logado com tema preferido - aplicar tema salvo
 				aplicarTema(currentUser.data.temaPreferido);
@@ -40,6 +79,12 @@
 	// Aplicar tema padrão imediatamente ao carregar (antes de verificar usuário)
 	$effect(() => {
 		if (typeof document !== 'undefined') {
+			const temaPersistido = obterTemaPersistido();
+			if (temaPersistido) {
+				aplicarTemaDaisyUI(temaPersistido);
+				return;
+			}
+
 			// Se não há tema aplicado ainda, aplicar o padrão imediatamente
 			const htmlElement = document.documentElement;
 			if (!htmlElement.getAttribute('data-theme')) {