Gerador de temas
Crie o tema da sua marca em 30 segundos. Escolha as cores, veja componentes reais mudarem e copie o CSS — ou o provider do React Native. O link guarda tudo, é só compartilhar.
Sua marca
Cada ajuste aparece na prévia na hora.
Vira o valor de data-theme: minúsculas, números e hífens.
Puxa a primária e o acento do tema escolhido.
Botões, foco, links e destaques.
Badges, chamadas e o fim do gradiente.
Prévia ao vivo
data-theme="minha-marca"Sua marca em cada componente
Tudo aqui é Aura UI de verdade, lendo as variáveis que você está gerando.
Convide seu time
Plano Pro · 3 de 5 vagas
R$ 48,2 mil
Tema aplicado
Contraste (WCAG AA)
Medido no modo claro. O texto sobre as cores (branco ou escuro) é escolhido sozinho.
- Passa (mínimo 4,5:1)
Texto sobre o primário
4,55:1 · texto branco, AA pede 4,5:1
- Passa (mínimo 4,5:1)
Texto sobre o acento
6,33:1 · texto escuro, AA pede 4,5:1
- Passa (mínimo 3:1)
Primário sobre o fundo
4,55:1 · bordas, foco e ícones pedem 3:1
Exporte o tema
Cole o CSS no globals.css, depois dos imports do Aura, e aplique com data-theme. Os detalhes estão em Temas e modo escuro.
/* globals.css — depois dos imports do Aura */[data-theme="minha-marca"] { --aura-primary: 251.8 100% 67.1%; --aura-primary-foreground: 0 0% 100%; --aura-accent: 349 100% 67.8%; --aura-accent-foreground: 232 31% 8%; --aura-ring: 251.8 100% 67.1%; --aura-radius: 0.875rem; --aura-gradient-primary: linear-gradient(135deg, #7857ff 0%, #ff5b79 100%); --aura-gradient-accent: linear-gradient(135deg, #ff5b79 0%, #ffaa5b 100%); --aura-gradient-aurora: linear-gradient(135deg, #3100fa 0%, #7857ff 35%, #ff5b79 70%, #ffb7c4 100%); --aura-glow-primary: 0 0 30px -5px rgba(120, 87, 255, 0.55); --aura-glow-accent: 0 0 30px -5px rgba(255, 91, 121, 0.55);}Prefere partir de algo pronto? Veja os 33 temas na galeria de temas. Para entender como data-theme e a classe .dark se combinam, leia Temas e modo escuro.