Skip to main content

​
CSS Customizado

O SDK usa CSS variables para temas. Você pode customizar as cores sobrescrevendo as variáveis: 
/* 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: 
// O modo escuro é aplicado automaticamente
<TriglitProvider config={{ apiKey: 'pk_...' }}>
  {/* Componentes em modo escuro */}
</TriglitProvider>
Para usar modo claro, você pode sobrescrever as classes: 
<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: 
<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: 
<WorkflowEditor 
  workflowId="wf_123"
  className="min-h-screen bg-gray-50"
/>