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

# Estilização

> Customize a aparência dos componentes

## CSS Customizado

O SDK usa CSS variables para temas. Você pode customizar as cores sobrescrevendo as variáveis:

```css theme={null}
/* No seu arquivo CSS global */
.triglit-root {
  --primary: oklch(0.274 0.006 286.033);
  --primary-foreground: oklch(0.985 0 0);
  --background: oklch(1 0 0);
  --foreground: oklch(0.21 0.006 285.885);
  /* ... outras variáveis */
}
```

## Modo Escuro

O SDK suporta modo escuro automaticamente. O provider adiciona a classe `dark` ao elemento raiz:

```tsx theme={null}
// O modo escuro é aplicado automaticamente
<TriglitProvider config={{ apiKey: 'pk_...' }}>
  {/* Componentes em modo escuro */}
</TriglitProvider>
```

Para usar modo claro, você pode sobrescrever as classes:

```tsx theme={null}
<TriglitProvider config={{ apiKey: 'pk_...' }}>
  <div className="triglit-root"> {/* Remove a classe dark */}
    <WorkflowEditor workflowId="wf_123" />
  </div>
</TriglitProvider>
```

## Prefixo de Classes

O SDK usa o prefixo `tg:` para classes Tailwind para evitar conflitos. Você pode usar essas classes em seus componentes:

```tsx theme={null}
<div className="tg:bg-primary tg:text-primary-foreground tg:p-4">
  Conteúdo estilizado
</div>
```

## Customização de Componentes

Você pode customizar componentes individuais usando `className`:

```tsx theme={null}
<WorkflowEditor 
  workflowId="wf_123"
  className="min-h-screen bg-gray-50"
/>
```