SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
killer-cf
2025-12-13 17:09:15 -03:00
parent c068715fc1
commit 9e45a43910
8 changed files with 407 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/web/src/lib/components/Header.svelte
View File

@@ -35,6 +35,23 @@
</div>
<div class="flex items-center gap-2">
<select
class="select select-sm bg-base-100 border-base-300 w-40"
aria-label="Selecionar tema"
data-choose-theme
>
<option value="aqua">Aqua</option>
<option value="sgse-blue">Azul</option>
<option value="sgse-green">Verde</option>
<option value="sgse-orange">Laranja</option>
<option value="sgse-red">Vermelho</option>
<option value="sgse-pink">Rosa</option>
<option value="sgse-teal">Verde-água</option>
<option value="sgse-corporate">Corporativo</option>
<option value="light">Claro</option>
<option value="dark">Escuro</option>
</select>
{#if right}
{@render right()}
{/if}

34
apps/web/src/lib/utils/temas.ts
View File

@@ -153,20 +153,15 @@ export function aplicarTema(temaId: TemaId | string | null | undefined): void {
const nomeDaisyUI = obterNomeDaisyUI(temaId || 'purple');
const htmlElement = document.documentElement;
const bodyElement = document.body;
if (htmlElement) {
// Remover todos os atributos data-theme existentes primeiro
htmlElement.removeAttribute('data-theme');
if (bodyElement) {
bodyElement.removeAttribute('data-theme');
}
// Evita que `body[data-theme]` sobrescreva o tema do `<html>`
if (document.body) document.body.removeAttribute('data-theme');
// Aplicar o novo tema
htmlElement.setAttribute('data-theme', nomeDaisyUI);
if (bodyElement) {
bodyElement.setAttribute('data-theme', nomeDaisyUI);
}
// Forçar reflow para garantir que o CSS seja aplicado
void htmlElement.offsetHeight;
@@ -230,20 +225,21 @@ export function obterCoresDoTema(): {
}
const htmlElement = document.documentElement;
const getComputedStyle = (varName: string): string => {
return getComputedStyle(htmlElement).getPropertyValue(varName).trim() || '';
const readCssVar = (varName: string): string => {
return window.getComputedStyle(htmlElement).getPropertyValue(varName).trim() || '';
};
// Tentar obter variáveis CSS do DaisyUI
const primary = getComputedStyle('--p') || '#667eea';
const success = getComputedStyle('--suc') || '#10b981';
const error = getComputedStyle('--er') || '#ef4444';
const warning = getComputedStyle('--wa') || '#f59e0b';
const info = getComputedStyle('--in') || '#3b82f6';
const baseContent = getComputedStyle('--bc') || '#1f2937';
const base100 = getComputedStyle('--b1') || '#ffffff';
const base200 = getComputedStyle('--b2') || '#f3f4f6';
const base300 = getComputedStyle('--b3') || '#e5e7eb';
// DaisyUI v5: variáveis `--color-*`
// Fallback para v4/legado: variáveis curtas `--p`, `--suc`, etc.
const primary = readCssVar('--color-primary') || readCssVar('--p') || '#667eea';
const success = readCssVar('--color-success') || readCssVar('--suc') || '#10b981';
const error = readCssVar('--color-error') || readCssVar('--er') || '#ef4444';
const warning = readCssVar('--color-warning') || readCssVar('--wa') || '#f59e0b';
const info = readCssVar('--color-info') || readCssVar('--in') || '#3b82f6';
const baseContent = readCssVar('--color-base-content') || readCssVar('--bc') || '#1f2937';
const base100 = readCssVar('--color-base-100') || readCssVar('--b1') || '#ffffff';
const base200 = readCssVar('--color-base-200') || readCssVar('--b2') || '#f3f4f6';
const base300 = readCssVar('--color-base-300') || readCssVar('--b3') || '#e5e7eb';
return {
primary: primary || '#667eea',