Tema shadcn/ui
Gere um tema completo para shadcn/ui com variáveis de cor para os modos claro e escuro, prontas para colar no seu CSS e ter componentes coerentes e acessíveis.
Base
Primary
Secondary
Muted & Accent
Destructive
Borders & Input
Pré-visualização
Pré-visualização dos componentes
Card content
Muted text example
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 4%;
--card: 0 0% 100%;
--card-foreground: 0 0% 4%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 4%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96%;
--muted-foreground: 0 0% 45%;
--accent: 0 0% 96%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 90%;
--input: 0 0% 90%;
--ring: 0 0% 9%;
--radius: 0.5rem;
}
}Gere um tema completo para shadcn/ui com variáveis de cor para os modos claro e escuro, prontas para colar no seu CSS e ter componentes coerentes e acessíveis.
Tema shadcn/ui apresenta apenas os controlos e resultados ligados à sua função. As opções disponíveis dependem da ferramenta e da entrada.
Formatos suportados
Como funciona
Passo 1
Abra Tema shadcn/ui e prepare a entrada solicitada pela interface
Passo 2
Ajuste os controlos visíveis para o resultado pretendido
Passo 3
Verifique o resultado antes de copiar, exportar ou reutilizar
Erros comuns a evitar
- Não considere suportado um formato ou opção que não apareça na interface.
- Confira os valores antes de os reutilizar numa identidade, interface ou ficheiro final.
- Quando o resultado for usado em texto ou componentes de interface, verifique também o contraste.
Dicas de especialistas
- Guarde o valor de origem com o resultado para comparar variantes.
- Use os formatos realmente apresentados pela ferramenta em vez de estimar conversões.
- Em telemóvel e tablet, permita que textos e controlos quebrem linha.
Tratamento de dados
O tratamento depende da função usada. Consentimento, analítica e funcionalidades de conta do site são serviços separados da operação de cor.
O que esta ferramenta faz
Gere um tema completo para shadcn/ui com variáveis de cor para os modos claro e escuro, prontas para colar no seu CSS e ter componentes coerentes e acessíveis. Tema shadcn/ui concentra-se nesta tarefa e não pressupõe funções que não aparecem na interface. Use os controlos disponíveis para obter o resultado necessário e confirme os valores apresentados antes de os levar para outra ferramenta, folha de estilos, ficheiro de design ou documento.
Preparar uma entrada adequada
Comece pela entrada pedida por Tema shadcn/ui: cor, valor, imagem ou definição conforme o ecrã. Os formatos indicados nesta página são CSS, Tailwind, HSL, shadcn/ui. Se um formato ou opção não aparecer na interface, não o considere suportado por esta função específica.
Ler e verificar o resultado
Leia o resultado no contexto da operação realizada. Compare-o com o valor de origem e reveja os controlos que influenciaram o cálculo. Para trabalho visual importante, confirme também o resultado na interface real onde será usado em vez de confiar apenas no código.
Utilização em telemóvel e tablet
Tema shadcn/ui usa o layout responsivo do site. Títulos, subtítulos, breadcrumbs e controlos podem quebrar linha em ecrãs estreitos para evitar cortar traduções longas. Mesmo assim, confirme o resultado final no dispositivo e no contexto onde pretende utilizá-lo.
Reutilizar o resultado no projeto
Depois de verificar o resultado, utilize apenas as ações realmente oferecidas por Tema shadcn/ui, como copiar ou exportar quando disponíveis. Guarde o valor de origem se precisar de reproduzir a definição e, em interfaces, documente também o papel da cor e o contraste necessário.
Ferramentas relacionadas
Guias e tutoriais
Aprenda a usar nossas ferramentas com nossos guias detalhados.
shadcn-theme: guia prático de developer
Guia localizado para usar shadcn-theme, entender boas práticas de developer e evitar erros comuns.
shadcn-theme: guia prático de developer
Guia localizado para usar shadcn-theme, entender boas práticas de developer e evitar erros comuns.
shadcn-theme: guia prático de developer
Guia localizado para usar shadcn-theme, entender boas práticas de developer e evitar erros comuns.
Perguntas frequentes
Aprenda a usar nossas ferramentas com nossos guias detalhados.