Teste um tema customizado

Clique abaixo e escolha um tema para ver como ele se comporta.

Personalizando Tokens com CSS

Você pode sobrescrever os tokens diretamente utilizando variáveis CSS no seu arquivo globals.css ou similar:

:root {
  --color-primary: 35, 189, 109;
  --color-background: 245, 245, 250;
  --radius: 1rem;
}

Importante
As variáveis de cor devem ser passadas como valores RGB separados por vírgula, sem o prefixo rgb. O Tailwind faz o parsing automaticamente com rgba(var(--color-primary)), por exemplo.

Para temas escuros, utilize a classe .dark:

.dark {
  --color-background: 05, 08, 11;
  --color-primary: 22, 163, 74;
}

Extendendo a Configuração do Tailwind

Você pode reaproveitar a base de estilos da Convert extendendo o preset em seu tailwind.config.ts:

import preset from "@convertcompany/ui/preset";
import type { Config } from "tailwindcss";

const config: Config = {
  presets: [preset],
  theme: {
    extend: {
      ...preset.theme,
      colors: {
        brand: {
          DEFAULT: "#1e40af",
          light: "#3b82f6",
        },
      },
    },
  },
};

export default config;

Importante
O uso do ...preset.theme garante que as customizações não sobrescrevam a base da Convert, mas a estendam corretamente.

Considerações Finais

• Prefira customizar via variáveis CSS sempre que possível, pois isso permite alternar entre temas facilmente.
• Ao customizar o tema via tailwind.config.ts, mantenha a estrutura do preset para garantir compatibilidade com os componentes Convert.
• Consulte a documentação de Tokens de Design para ver todos os tokens disponíveis.