Tema e modo escuro

O modo escuro sempre começa bem. Você adiciona dark:bg-slate-900 ao lado de bg-white, dark:text-slate-100 ao lado de text-slate-900, e a tela inicial fica convincente em dez minutos. Depois vem o resto: quarenta componentes, cada um com seus fundos, suas bordas, seus estados de hover. Cada classe de cor pede uma segunda. Seus atributos class dobram de tamanho e, um mês depois, você percebe que três tons de borda escura convivem, porque ninguém lembra qual tinha sido escolhido.

O sintoma é real, mas a causa não é o modo escuro: é ter escrito cores literais nos componentes. bg-white descreve um pigmento, não um papel. Enquanto seus componentes nomearem pigmentos, cada tema adicional multiplica as classes. Se, por outro lado, eles nomearem papéis — a superfície de um card, a cor do texto corrente, a de uma borda discreta —, então trocar de tema significa redefinir uma dúzia de valores em um único lugar, e os componentes não contêm mais nenhuma variante dark:.

Definir seu tema

Toda a personalização vive na folha de estilo, sob @theme. Cada declaração produz ao mesmo tempo uma variável CSS e os utilitários correspondentes: