Guia de mapeamento de tema shadcn
Gere uma paleta na ferramenta principal e atribua suas cores manualmente às variáveis semânticas do projeto shadcn. Este guia ajuda a planejar esse mapeamento.
Este guia explica o processo. Use a ferramenta indicada abaixo para gerar cores e exportar arquivos.
O que você encontra nesta página
- Copie os valores da paleta e associe-os manualmente às funções semânticas do seu projeto.
- Separe cores neutras e cores de marca para manter a consistência dos componentes.
- Verifique o contraste dos pares primary/foreground e destructive/foreground antes de publicar.
Indicado para
- Aplicações React
- Bibliotecas de componentes
- Variáveis CSS
Como usar
Posso usar esta página com o gerador principal?
Sim. Comece aqui, abra a ferramenta principal do Chromoforge com a mesma cor base e exporte a paleta.
Quais variáveis um tema shadcn costuma usar?
Confira as funções usadas pelo seu projeto: background e foreground; card, popover, primary, secondary, muted, accent e destructive com seus respectivos textos; além de border, input e ring. Preencher as funções necessárias ajuda a manter os componentes consistentes nos dois temas.
As variáveis shadcn devem ter canais HSL ou cores completas?
Siga a sintaxe do projeto. Se ele usa hsl(var(--primary)), espera canais HSL; se usa var(--primary), espera um valor de cor completo. Adapte o valor do inspetor à convenção usada. A exportação contém variáveis da paleta; as funções shadcn precisam ser atribuídas manualmente.