From 222b098a355fab49c930f4a8bbba7796cb4532ca Mon Sep 17 00:00:00 2001
From: gabrielb <gabriel18lb@outlook.com>
Date: Wed, 20 May 2026 21:46:30 -0300
Subject: [PATCH] =?UTF-8?q?feat(acessibilidade):=20melhorar=20a=20gest?=
 =?UTF-8?q?=C3=A3o=20do=20tema=20escuro=20e=20otimizar=20a=20leitura=20do?=
 =?UTF-8?q?=20localStorage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/AccessibilityWidget.vue | 30 +++++++++++++++++--
 src/pages/servicos/certidao.vue               |  6 ++--
 src/pages/servicos/iptu.vue                   |  6 ++--
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/components/common/AccessibilityWidget.vue b/src/components/common/AccessibilityWidget.vue
index e673b71..a4e4dd1 100644
--- a/src/components/common/AccessibilityWidget.vue
+++ b/src/components/common/AccessibilityWidget.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch, onMounted, onUnmounted } from 'vue'
 
 const aberto = ref(false)
 const nivelFonte = ref(0)
@@ -18,16 +18,38 @@ function applyFonte(nivel) {
     if (nivel === 2) document.documentElement.classList.add('a11y-font-xl')
 }
 
+let darkMediaQuery = null
+let systemThemeChanging = false
+
+function onSystemThemeChange(e) {
+    if (localStorage.getItem('a11y-escuro') === null) {
+        systemThemeChanging = true
+        modoEscuro.value = e.matches
+        systemThemeChanging = false
+    }
+}
+
 // Toda leitura de localStorage e DOM precisa estar dentro de onMounted —
 // caso contrário o componente quebra no SSR.
 onMounted(() => {
     nivelFonte.value = Number(localStorage.getItem('a11y-fonte') || 0)
     altoContraste.value = localStorage.getItem('a11y-contraste') === '1'
-    modoEscuro.value = localStorage.getItem('a11y-escuro') === '1'
+
+    const storedDark = localStorage.getItem('a11y-escuro')
+    modoEscuro.value = storedDark !== null
+        ? storedDark === '1'
+        : window.matchMedia('(prefers-color-scheme: dark)').matches
 
     applyFonte(nivelFonte.value)
     document.documentElement.classList.toggle('a11y-contrast', altoContraste.value)
     document.documentElement.classList.toggle('app-dark', modoEscuro.value)
+
+    darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    darkMediaQuery.addEventListener('change', onSystemThemeChange)
+})
+
+onUnmounted(() => {
+    darkMediaQuery?.removeEventListener('change', onSystemThemeChange)
 })
 
 watch(nivelFonte, (val) => {
@@ -45,7 +67,9 @@ watch(altoContraste, (val) => {
 watch(modoEscuro, (val) => {
     if (!import.meta.client) return
     document.documentElement.classList.toggle('app-dark', val)
-    localStorage.setItem('a11y-escuro', val ? '1' : '0')
+    if (!systemThemeChanging) {
+        localStorage.setItem('a11y-escuro', val ? '1' : '0')
+    }
 })
 </script>
 
diff --git a/src/pages/servicos/certidao.vue b/src/pages/servicos/certidao.vue
index 8c842ae..9572eb0 100644
--- a/src/pages/servicos/certidao.vue
+++ b/src/pages/servicos/certidao.vue
@@ -105,9 +105,9 @@ function reiniciar() {
                     :disabled="isAuthenticated"
                     @keyup.enter="consultar"
                 />
-                <p v-if="isAuthenticated" class="mt-1.5 text-xs text-slate-500 dark:text-slate-400 flex items-center gap-1.5">
-                    <i class="pi pi-info-circle text-xs text-primary" aria-hidden="true" />
-                    Logado como <strong class="text-slate-700 dark:text-slate-200">{{ nomeUsuario }}</strong> — documento bloqueado para segurança.
+                <p v-if="isAuthenticated" class="mt-1.5 text-xs text-slate-500 dark:text-slate-400 flex items-start gap-1.5">
+                    <i class="pi pi-info-circle text-xs text-primary mt-0.5 shrink-0" aria-hidden="true" />
+                    <span>Logado como <strong class="text-slate-700 dark:text-slate-200">{{ nomeUsuario }}</strong> — documento bloqueado para segurança.</span>
                 </p>
             </div>
 
diff --git a/src/pages/servicos/iptu.vue b/src/pages/servicos/iptu.vue
index ab68407..23fc7e4 100644
--- a/src/pages/servicos/iptu.vue
+++ b/src/pages/servicos/iptu.vue
@@ -164,9 +164,9 @@ function formatarMoeda(valor) {
                     size="large"
                     @keyup.enter="consultar"
                 />
-                <p v-if="modoConsulta === 'documento' && isAuthenticated" class="mt-1.5 text-xs text-slate-500 dark:text-slate-400 flex items-center gap-1.5">
-                    <i class="pi pi-info-circle text-xs text-primary" aria-hidden="true" />
-                    Logado como <strong class="text-slate-700 dark:text-slate-200">{{ nomeUsuario }}</strong> — documento bloqueado para segurança.
+                <p v-if="modoConsulta === 'documento' && isAuthenticated" class="mt-1.5 text-xs text-slate-500 dark:text-slate-400 flex items-start gap-1.5">
+                    <i class="pi pi-info-circle text-xs text-primary mt-0.5 shrink-0" aria-hidden="true" />
+                    <span>Logado como <strong class="text-slate-700 dark:text-slate-200">{{ nomeUsuario }}</strong> — documento bloqueado para segurança.</span>
                 </p>
             </div>