Gerador de tema shadcn/ui: variáveis CSS em OKLCH | We.Inc
Escolha matiz, croma e raio da sua marca e receba todas as variáveis CSS do shadcn/ui para o modo claro e o escuro em OKLCH, com pré-visualização ao vivo e checagem de contraste.
Os componentes do shadcn/ui leem as cores de variáveis CSS como --primary, --muted e --border, escritas em OKLCH. Escolha aqui matiz, croma, luminosidade, tom dos cinzas e raio dos cantos, confira a pré-visualização clara e escura ao vivo com as taxas de contraste e depois cole os blocos :root e .dark gerados na sua folha de estilo global.
Pares de variáveis que todo tema shadcn/ui define
Superfície
Texto sobre ela
Usado por
--background
--foreground
Corpo da página
--card / --popover
--card-foreground / --popover-foreground
Cards, menus, diálogos
--primary
--primary-foreground
Botões padrão, estados ativos
--secondary / --muted
--secondary-foreground / --muted-foreground
Botões discretos, dicas, legendas
--accent
--accent-foreground
Itens de menu com hover
A documentação de temas define cerca de trinta variáveis, e editá-las à mão é lento, porque mudar a cor primária também muda qual cor de texto continua legível sobre ela. Este gerador deriva o conjunto inteiro a partir de poucas escolhas, escolhe um foreground legível para cada superfície e sinaliza qualquer par que fique abaixo das metas de contraste mais comuns.
Comece por um preset ou defina matiz, croma e luminosidade da cor primária com os controles. A amostra mostra a cor e avisa se ela fica fora do intervalo sRGB.
Aumente o tom dos cinzas para dar a fundos, bordas e textos discretos um toque do matiz da marca. Zero os mantém em neutro puro.
Alterne a pré-visualização entre claro e escuro e leia a tabela de contraste para o texto em cada superfície.
Copie o CSS e substitua os blocos :root e .dark correspondentes no seu globals.css. Mantenha o bloco @theme inline existente, que mapeia essas variáveis para os utilitários do Tailwind.
Mantenha o croma da cor primária moderado, entre 0.12 e 0.2, para interfaces que as pessoas usam o dia inteiro. Croma muito alto fica gritante em botões grandes.
O tema escuro aumenta um pouco a luminosidade da cor primária, porque a mesma cor parece mais apagada sobre um fundo escuro.
Busque pelo menos 4.5:1 entre o texto do corpo e o fundo, e confira o texto discreto separadamente, porque ele é mais claro de propósito.
Se adicionar uma cor própria, como um aviso, defina-a nos dois blocos e adicione uma entrada --color-warning ao @theme inline, como mostra a documentação de temas.
Perguntas frequentes
Por que OKLCH em vez de HSL?
A luminosidade do OKLCH acompanha o quanto uma cor parece clara, então duas cores com o mesmo L parecem igualmente claras mesmo com matizes diferentes. Isso facilita criar conjuntos claro e escuro que combinam. A documentação de temas atual do shadcn/ui usa OKLCH para todas as cores.
O que significa cada número do OKLCH?
L é a luminosidade, de 0 (preto) a 1 (branco), C é o croma, o quanto a cor é viva, começando em 0 para o cinza, e H é o ângulo do matiz em graus. Um alpha opcional vem depois de uma barra, como em oklch(1 0 0 / 10%).
O que o --radius muda?
Os componentes arredondam os cantos a partir desse único valor. A documentação de temas o define como 0.625rem por padrão, e o bloco @theme inline deriva dele os passos de raio menores e maiores.
Isso funciona com projetos mais antigos?
Projetos em templates mais antigos podem guardar as cores em outro formato e mapeá-las de outro jeito na configuração do Tailwind. Compare o seu globals.css com as variáveis daqui antes de substituir qualquer coisa.
As taxas de contraste são exatas?
Elas usam a fórmula do WCAG 2 depois de converter cada cor OKLCH para sRGB, cortando qualquer valor fora do intervalo. Cores fora do sRGB vão aparecer um pouco diferentes em telas de gama ampla.
Como a paleta é derivada
A sua cor primária alimenta as variáveis primary, ring e sidebar-primary. Os cinzas de fundos, bordas e textos discretos compartilham um único matiz com um croma mínimo definido pelo controle de tom, então a interface parece ligada à marca sem parecer colorida.
Cada foreground é escolhido medindo o contraste com a sua superfície e ficando com o que se lê melhor entre um quase branco e um quase preto. As cores dos gráficos avançam pela roda de matizes a partir do matiz primário, para que as séries continuem distinguíveis.
Detalhes do modo escuro
No bloco escuro, bordas e inputs usam branco com alpha baixo em vez de um cinza sólido, o que permite que se adaptem a qualquer superfície em que estejam. Os cards ficam um pouco acima do fundo da página para que as camadas continuem visíveis.
Teste os anéis de foco no modo escuro em especial. Um anel nítido sobre branco pode sumir em uma página azul-marinho escura.
Exemplo de saída: o preset Azul
Isto é exatamente o que o gerador escreve para o preset Azul. Cole por cima dos blocos de cor no globals.css.
Blocos de cor do globals.css
Os valores claros ficam em :root e os escuros em .dark, todos em OKLCH.
Adicionando o seu próprio token de cor
Uma cor de aviso utilizável como bg-warning
Defina o par nos dois modos e depois exponha-o ao Tailwind pelo @theme inline.
Neutro
Azul
Violeta
Verde
Laranja
Rosa
Presets: Neutro, Azul, Violeta, Verde, Laranja, Rosa. Ajuste matiz, croma, luminosidade, tom dos cinzas e raio, pré-visualize claro e escuro e copie o CSS.