Pular para o Conteúdo

Playground Visual de Temas

Escolha o Tema Perfeito para o Seu Próximo Projeto!

Flexibilidade excepcional na criação de temas.

Aqui, você pode visualizar os temas pré-construídos. Sinta-se à vontade para explorar, alternar entre os modos claro e escuro para cada um e ver qual estilo melhor se adapta ao seu projeto. Quando encontrar um que goste, copie seu código CSS e cole-o em seu projeto para aplicar o tema instantaneamente. É uma maneira direta de colocar a base visual do seu projeto em funcionamento rapidamente.

Paleta de Cores

primary
primary-content
secondary
secondary-content
accent
accent-content
neutral
neutral-content
base-100
base-200
base-300
base-content
info
info-content
success
success-content
warning
warning-content
error
error-content
Additional Variables
--prbc
Mix of primary & base-content
--subc
Mix of success & base-content
--wabc
Mix of warning & base-content
--erbc
Mix of error & base-content

Amostra de Componente

Button
Badge (sm)
neutral
primary
secondary
accent
ghost
Toggle
Checkbox
Key +Ctrl+Z Shift+Alt+

Gostou do que viu?

Em src/styles/global.css, substitua os temas claro e escuro atuais pelo seguinte trecho de código: