> ## Documentation Index
> Fetch the complete documentation index at: https://docs.skillfactory.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalização Visual

> Configure a identidade visual da plataforma com cores, temas e branding

## Aparência da plataforma

Deixe a plataforma com a identidade visual da sua instituição. Você pode personalizar cores, logo, favicon e tema completo.

## Branding

### Imagens

Faça upload das imagens da sua marca em **Admin → Configurações → aba Personalização**:

| Imagem                  | Especificações                     | Onde aparece                    |
| ----------------------- | ---------------------------------- | ------------------------------- |
| **Logo**                | PNG, até 200px de largura, max 2MB | Cabeçalho, emails, certificados |
| **Favicon**             | PNG, 196x196px ideal, max 500KB    | Aba do navegador                |
| **Background de login** | PNG/JPEG, 1600x900px, max 5MB      | Tela de login                   |

<Info>
  Cada imagem inclui preview antes de salvar. As imagens são armazenadas no Supabase Storage com cache de 1 hora.
</Info>

## Sistema de temas

A plataforma utiliza um sistema de temas baseado em CSS variables que controla cores, sombras, tipografia e espaçamentos.

### Configuração do tema

O tema é armazenado como JSON e inclui:

* **Preset** - Tema base selecionado (ex: default, vercel)
* **Cor primária (light)** - Cor principal no modo claro
* **Cor primária (dark)** - Cor principal no modo escuro
* **Variáveis CSS** - Conjunto completo de tokens de design para cada modo

### Variáveis disponíveis

O tema controla as seguintes variáveis:

<Tabs>
  <Tab title="Cores">
    * **Primary** - Cor de destaque principal
    * **Secondary** - Cor secundária
    * **Accent** - Cor de acento
    * **Background** - Cor de fundo
    * **Foreground** - Cor de texto
    * **Card** - Cor de fundo de cards
    * **Muted** - Cor para elementos sutis
    * **Border** - Cor de bordas
    * **Destructive** - Cor para ações destrutivas
    * **Chart 1-5** - Cores para gráficos
  </Tab>

  <Tab title="Sombras e tipografia">
    * **Sombras** - Níveis de sm até 2xl
    * **Fontes** - Sans, serif e mono
    * **Espaçamento** - Radius, spacing, letter-spacing
  </Tab>
</Tabs>

### Modo claro e escuro

Cada variável pode ter valores diferentes para modo claro e escuro. A plataforma respeita a preferência do sistema operacional do usuário.

## Domínio personalizado

Configure um domínio próprio para dar uma identidade profissional à sua plataforma.

### Como configurar

<Steps>
  <Step title="Registre seu domínio">
    Registre um domínio ou subdomínio (ex: `ead.suaempresa.com.br`) no seu provedor de DNS.
  </Step>

  <Step title="Adicione na plataforma">
    Admin → Configurações → insira o domínio no campo correspondente.
  </Step>

  <Step title="Configure o DNS">
    Crie um registro **CNAME** apontando para o domínio alvo fornecido pela plataforma.
  </Step>

  <Step title="Valide">
    Clique em "Validar" para verificar a configuração. O sistema faz uma consulta DNS para confirmar o CNAME.
  </Step>

  <Step title="SSL automático">
    Após a validação, o certificado SSL é gerado automaticamente. Sua plataforma ficará acessível via HTTPS no domínio personalizado.
  </Step>
</Steps>

<Warning>
  A propagação do DNS pode levar até 48 horas. Durante esse período, o domínio pode não funcionar corretamente.
</Warning>

### Remover domínio

Para remover o domínio personalizado, acesse as configurações e clique em "Remover domínio". A plataforma voltará a usar o subdomínio padrão.

## Preview do tema

O painel de aparência inclui um preview completo que mostra como os componentes ficam com o tema selecionado:

* Botões (primário, secundário, destrutivo)
* Badges e indicadores
* Inputs e formulários
* Cards e containers
* Barras de progresso
* Tooltips e menus

## Próximos passos

<CardGroup cols={2}>
  <Card title="Configurações gerais" icon="gear" href="/pt-br/admin/platform-settings">
    Configure nome, email e senha padrão
  </Card>

  <Card title="Templates de email" icon="envelope-open-text" href="/pt-br/admin/email-templates">
    Personalize os emails com sua marca
  </Card>
</CardGroup>