O painel de administração do Hedhog é totalmente personalizável via configurações — cores, logo, favicon, nome do app e tipografia — sem necessidade de rebuild. Esta é uma das receitas mais completamente implementadas do Hedhog: toda configuração abaixo é real, ligada a apps/admin/src/components/provider/theme-provider.tsx, e tem efeito imediato.

No admin, tudo isso fica em Settings → Configurations → Appearance — não há um grupo literalmente chamado "Theme", embora toda chave de configuração abaixo tenha o prefixo theme-.

Status: ✅ Totalmente implementado — toda configuração abaixo é real e tem efeito no próximo carregamento da página.

1. Vá em Settings → Configurations → Appearance
2. Defina theme-primary-light e theme-primary-dark (e os outros pares de cores) para as cores hexadecimais da sua marca
3. Faça upload do seu logo/favicon via Armazenamento de Arquivos, depois cole as URLs resultantes em image-url/icon-url
4. Faça um hard-refresh no admin e confirme que as novas cores e o logo realmente aparecem

1. As configurações de tema são armazenadas como linhas na tabela setting, sob o grupo de configuração Appearance
2. No carregamento, o ThemeProvider do admin as lê (com cache em localStorage sob a chave settings) e injeta um bloco <style> diretamente no documento — cada configuração de cor se torna uma propriedade CSS customizada como --primary, escrita como !important para sobrescrever os padrões do Tailwind
3. As cores são aplicadas como strings hex brutas, não convertidas para HSL — se um valor não for uma string #rrggbb válida, essa regra é silenciosamente ignorada e o padrão do Tailwind aparece no lugar
4. O Hedhog rastreia as variantes clara e escura de toda cor de forma independente — não há uma única cor de origem que seja auto-escurecida; você define ambas explicitamente
5. theme-mode controla claro/escuro/sistema, e uma sobreposição por usuário é armazenada no lado do cliente em localStorage sob theme — então um usuário individual pode alternar para o modo escuro sem mudar o padrão do sistema para todos os outros

Toda cor abaixo existe duas vezes — uma com sufixo -light e outra com sufixo -dark — em Settings → Configurations → Appearance. O Hedhog não gera uma a partir da outra; se você definir apenas a variante clara, o modo escuro recorre aos padrões do Tailwind para aquele token.

Todos os valores precisam ser hex de 6 dígitos (#1e40af), sem canal alfa. --primary-light também é reutilizada para --bprogress-color (a barra de carregamento no topo da página), então a cor da sua marca aparece lá também, sem uma configuração separada.

Estes são consumidos diretamente pelos componentes de estrutura/layout do admin, e não pela lógica de injeção de CSS do ThemeProvider — fazer upload de novos arquivos para image-url/icon-url funciona da mesma forma que qualquer outro upload de arquivo (veja Armazenamento de Arquivos): faça o upload primeiro, depois cole a URL resultante na configuração.

Salvar qualquer configuração em Settings → Configurations → Appearance tem efeito no próximo carregamento de página para aquele navegador, já que o ThemeProvider lê das configurações em cache no localStorage e as reaplica via um useEffect na montagem, não via um push ao vivo por socket. Se um colega de equipe não vê sua mudança, diga a ele para fazer um hard-refresh em vez de presumir que a configuração não foi salva.

---

• Faça um hard-refresh no admin após salvar uma cor e confirme que a nova cor realmente aparece — não apenas que a configuração foi salva com sucesso
• Alterne o modo escuro e confirme que as variantes -dark também aparecem, em vez de recorrer aos padrões do Tailwind

---