Usando

Como Habilitar o Modo Escuro

Name: rocketicons
Author: rocketclimb

Usando rocketicons para estilizar ícones no modo escuro.

Você pode estilizar os ícones de forma diferente quando modo escuro está ativado.

Modo claro

Modo escuro

<divclassName="text-slate-400 bg-slate-800 ... shadow-xl">
<p>
{modeLabel}
</p>
<BiSolidCalendarCheckclassName="icon-sky-900-6xl dark:icon-sky-500-6xl" />
</div>

Em ação

Uso da variante dark

Use a variante dark: para definir estilos no modo escuro.

Mude o tema da página e veja o que acontece.

No documentação oficial do Tailwind você encontra uma referência completa do uso do mudo escuro.