> ## 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.

# Visual Customization

> Configure the platform's visual identity with colors, themes, and branding

## Platform appearance

Customize the platform to match your institution's visual identity. You can personalize colors, logo, favicon, and the full theme.

## Branding

### Images

Upload your brand images in **Admin → Settings → Customization tab**:

| Image                | Specifications                  | Where it appears             |
| -------------------- | ------------------------------- | ---------------------------- |
| **Logo**             | PNG, up to 200px wide, max 2MB  | Header, emails, certificates |
| **Favicon**          | PNG, 196x196px ideal, max 500KB | Browser tab                  |
| **Login background** | PNG/JPEG, 1600x900px, max 5MB   | Login screen                 |

<Info>
  Each image includes a preview before saving. Images are stored in Supabase Storage with a 1-hour cache.
</Info>

## Theme system

The platform uses a CSS variables-based theme system that controls colors, shadows, typography, and spacing.

### Theme configuration

The theme is stored as JSON and includes:

* **Preset** - Selected base theme (e.g., default, vercel)
* **Primary color (light)** - Main color in light mode
* **Primary color (dark)** - Main color in dark mode
* **CSS Variables** - Complete set of design tokens for each mode

### Available variables

The theme controls the following variables:

<Tabs>
  <Tab title="Colors">
    * **Primary** - Main accent color
    * **Secondary** - Secondary color
    * **Accent** - Accent color
    * **Background** - Background color
    * **Foreground** - Text color
    * **Card** - Card background color
    * **Muted** - Color for subtle elements
    * **Border** - Border color
    * **Destructive** - Color for destructive actions
    * **Chart 1-5** - Chart colors
  </Tab>

  <Tab title="Shadows and typography">
    * **Shadows** - Levels from sm to 2xl
    * **Fonts** - Sans, serif, and mono
    * **Spacing** - Radius, spacing, letter-spacing
  </Tab>
</Tabs>

### Light and dark mode

Each variable can have different values for light and dark mode. The platform respects the user's operating system preference.

## Custom domain

Set up a custom domain to give your platform a professional identity.

### How to configure

<Steps>
  <Step title="Register your domain">
    Register a domain or subdomain (e.g., `lms.yourcompany.com`) with your DNS provider.
  </Step>

  <Step title="Add it to the platform">
    Admin → Settings → enter the domain in the corresponding field.
  </Step>

  <Step title="Configure DNS">
    Create a **CNAME** record pointing to the target domain provided by the platform.
  </Step>

  <Step title="Validate">
    Click "Validate" to verify the configuration. The system performs a DNS lookup to confirm the CNAME.
  </Step>

  <Step title="Automatic SSL">
    After validation, the SSL certificate is generated automatically. Your platform will be accessible via HTTPS on the custom domain.
  </Step>
</Steps>

<Warning>
  DNS propagation can take up to 48 hours. During this period, the domain may not work correctly.
</Warning>

### Remove domain

To remove the custom domain, go to settings and click "Remove domain". The platform will revert to the default subdomain.

## Theme preview

The appearance panel includes a full preview showing how components look with the selected theme:

* Buttons (primary, secondary, destructive)
* Badges and indicators
* Inputs and forms
* Cards and containers
* Progress bars
* Tooltips and menus

## Next steps

<CardGroup cols={2}>
  <Card title="General settings" icon="gear" href="/en/admin/platform-settings">
    Configure name, email, and default password
  </Card>

  <Card title="Email templates" icon="envelope-open-text" href="/en/admin/email-templates">
    Customize emails with your branding
  </Card>
</CardGroup>