Customização - Tema, Layouts e Branding

Resumo

Controle total da identidade visual da plataforma/whitelabel: cores (tokens), tipografia, layouts, header, footer, sidebar, logo, favicon, dark mode, tokens de design, toggles de features visuais e configuração dedicada de plugins visuais (ex.: SMM).

Para quem é (papel/role)

• super-admin - tema global e defaults.
• tenant-admin - personaliza dentro das opções liberadas.

O que você pode fazer

Tema e tokens

• Tokens de cor: primárias, secundárias, superfície, texto, bordas.
• Tipografia: família, escalas, line-height, pesos.
• Espaçamento e radius: escala 4px, border-radius padronizado.
• Sombras e transições.
• Dark mode: paleta dedicada.
• Editor de tokens ao vivo.

Branding

• Logo claro/escuro.
• Favicon.
• Nome comercial e slogan.
• Cores primárias do whitelabel.

Cores

• Paleta de cores do tenant.
• Variações (50-900) geradas automaticamente.

Layouts

• Selecionar layout: admin, público, checkout.
• Configurar variações por área.

Header

• Configurar header global: menu, atalhos, busca, notificações.

Footer

• Colunas, links, textos legais, redes sociais.

Sidebar

• Itens e ordem do menu lateral.
• Agrupamentos.

Components

• Configurações globais de componentes ui-*.

CSS

• CSS customizado (restrito).

Toggles

• Habilitar/desabilitar elementos visuais: breadcrumb, avatar, tooltips, etc.

SMM Config

• Configuração dedicada do plugin SMM (vitrine, preços, métodos).

Guide, Docs, Features

• Guia de estilo, documentação e features visuais.

Como acessar

1. /admin.
2. Settings → Customização ou /admin/settings/customization.

Tutoriais

Aplicar cores do whitelabel

1. Acesse /admin/settings/customization/colors.
2. Informe a cor primária e secundária em HEX.
3. O sistema gera toda a escala (50-900).
4. Salve e veja a preview ao vivo.

Trocar logo e favicon

1. /admin/settings/customization/branding.
2. Faça upload de logo claro, logo escuro e favicon.
3. Salve. As mudanças aparecem em todas as páginas públicas/admin.

Reorganizar a sidebar

1. /admin/settings/customization/sidebar.
2. Arraste itens para reordenar ou renomeie.
3. Salve.

Habilitar dark mode como padrão

1. /admin/settings/customization/theme.
2. Selecione Dark como preferência inicial.
3. Salve. Usuários podem sobrescrever nas preferências pessoais.

Integrações

• ThemeService - fonte única de tokens; tudo consome via var(--*).
• Whitelabel - tenant tem tema próprio (gestao-de-tenants-whitelabel.md).
• Frontend público - aplica tema ao visitante (frontend-menu-paginas.md).

Perguntas frequentes

Posso usar CSS inline em módulos? Não. É proibido por CLAUDE.md. Use tokens e classes ui-*.

Mudanças de cor exigem deploy? Não. São persistidas no banco e aplicadas via ThemeService imediatamente.

Logo aceita SVG? Sim, preferencialmente SVG otimizado.

Posso ter logos diferentes por plano? Não diretamente; a logo é por tenant.

Dark mode tem cores diferentes por token? Sim, cada token tem variante .dark.

Posso customizar componentes ui-*? Apenas via tokens. Não sobrescrever com CSS solto.

Há limite de upload para logo? Sim, conforme política global em platform-feature-flags.md.

Limitações, políticas e avisos

• CSS customizado só por super-admin e em escopo controlado.
• Tokens hardcoded fora do design system são proibidos.
• Usuário final nunca altera tema da plataforma (só preferência pessoal dentro do liberado).
• Logo deve atender contraste mínimo WCAG AA.

Relacionados

• tenants-whitelabel-management.md
• frontend-menu-pages.md
• platform-feature-flags.md