Tudo o que quer saber antes de instalar.
Uma análise detalhada de como o DataFirefly Dark Mode: modo escuro com deteção do navegador e preferência do cliente para Shopware 6.7 funciona, porque o construímos assim e o raciocínio por trás das funcionalidades acima.
Porquê um modo escuro no Shopware 6.7
O Shopware 6.7 não oferece modo escuro nativo no storefront. Ora, desde 2023 o modo escuro do sistema está massivamente adotado: o iOS muda automaticamente ao fim do dia com o True Tone, o macOS e o Windows têm as suas definições de luminosidade automática, e os utilizadores mais avançados mantêm o ecrã em escuro 60 a 80 % do tempo. Uma loja sem modo escuro atira a estes visitantes um clarão branco agressivo a cada carregamento de página, particularmente incómodo à noite e em telemóvel. É um sinal de qualidade ao contrário: o seu site não acompanha os hábitos de 2026. O DfDarkMode preenche essa lacuna com uma implementação limpa, anti-FOUC e respeitadora da preferência do cliente.
O anti-FOUC: o pormenor que separa um modo escuro profissional de um improviso
FOUC quer dizer Flash of Unstyled Content, aquele quarto de segundo em que a página aparece em branco antes de o JavaScript aplicar o tema escuro. A maioria das extensões de modo escuro deixa esse clarão porque aplica o tema por JavaScript no DOMContentLoaded, o que acontece depois da primeira renderização do navegador. O DfDarkMode resolve o problema com um script inline minimalista colocado diretamente no head do base layout: esse script lê o cookie de preferência (de forma síncrona, cerca de 10 linhas de JS) e coloca o atributo data-bs-theme no elemento raiz ANTES de o navegador fazer a primeira renderização. O resultado é zero clarão branco, mesmo no primeiro carregamento e mesmo em modo escuro forçado. Os utilizadores nunca veem a loja num falso modo claro.
3 estados e persistência completa
O botão no cabeçalho alterna entre Auto, Claro e Escuro. O Auto segue o prefers-color-scheme do navegador em tempo real através de um MediaQuery listener: quando o sistema do visitante passa a escuro às 18h, o storefront muda de imediato, sem recarregar a página. O Claro e o Escuro forçam o modo independentemente da preferência do navegador. A preferência é guardada de forma diferente consoante o estado: visitantes anónimos por cookie df-dark-mode com validade de 1 ano, clientes com sessão iniciada por campo próprio de cliente df_dark_mode_preference criado automaticamente na instalação. A página de perfil do cliente contém um cartão de seleção para alterar a preferência diretamente a partir da área de cliente. No início de sessão, o cookie é sincronizado com o valor do campo próprio, pelo que um cliente que definiu a preferência no telemóvel reencontra a mesma definição no computador.
Compatibilidade com o data-bs-theme do Bootstrap: zero CSS a escrever
O Bootstrap 5.3+ introduziu a convenção data-bs-theme="dark" como norma para o modo escuro. Se o seu tema Shopware já usa regras CSS direcionadas pelo seletor [data-bs-theme="dark"], o que acontece na maioria dos temas premium de 2025 em diante, o DfDarkMode é imediatamente compatível: instala, ativa e funciona. Se o seu tema ainda não tem estilos escuros, pode usar as variáveis nativas do Bootstrap (--bs-body-bg, --bs-body-color e outras, que têm valores escuros diferentes automaticamente), ou acrescentar as suas próprias regras ao seu ritmo. O DfDarkMode não toca no seu CSS, limita-se a colocar um atributo no elemento raiz da página.
Arquitetura Shopware limpa e normalizada
A extensão segue rigorosamente as convenções do Shopware 6.7: autoload PSR-4 sob o namespace Df/DarkMode, classe Plugin com ciclo de vida install, update e uninstall, campo próprio de cliente criado através do repositório DAL normal, rota AJAX declarada pelos atributos PHP 8 do componente Symfony Routing, serviços injetados por services.xml, subscribers ligados a kernel.event_subscriber. A desinstalação respeita a flag keepUserData do contexto do Shopware: se o administrador marcar Manter os dados do utilizador, os campos próprios e as preferências dos clientes ficam; caso contrário, tudo é eliminado corretamente. Não é necessária qualquer migração de esquema própria (apenas campos próprios). Código-fonte não cifrado, com licença MIT, auditável.
Personalização e evento JS para integrações
Por predefinição, o botão é inserido no bloco base_header_actions_wishlist do base layout. Para o mover, basta sobrepor o base.html.twig e colocar o include do componente dark-mode-toggle noutro bloco (pesquisa, conta, próprio, e outros), com exemplo completo no README. Do lado do JS, a extensão emite um evento df-dark-mode-changed no documento a cada alteração, com event.detail.preference (auto, light, dark) e event.detail.resolvedTheme (light ou dark calculado). É prático para sincronizar outro componente (gráfico Recharts, iframe externo, embed do Calendly e outros) com o tema atual.
Ainda não existem avaliações.