Modo escuro com Tailwind CSS
O modo escuro tem se tornado cada vez mais popular em aplicativos e websites. A popularidade se deve não apenas ao fato de ser mais agradável aos olhos, mas também porque pode auxiliar na economia de bateria em dispositivos móveis e na redução da fadiga visual.
Se o seu projeto utiliza o Tailwind CSS, adicionar o modo escuro é relativamente fácil. O Tailwind é um framework de CSS utilitário que permite criar estilos rapidamente, sem a necessidade de escrever CSS personalizado.
Caso você precise instalar e configurar o Tailwind, basta seguir o passo-a-passo disponibilizado na documentação oficial. — Tailwind CSS - Installation
Para o desenvolvimento deste tutorial, foi utilizado como referência um layout simples. Você pode conferir o exemplo em funcionamento no site: tailwind-dark-mode.rafikmoreira.dev.br. O código-fonte do projeto que implementa o modo escuro com Tailwind CSS está disponível no GitHub.
Vamos ver como implementar o modo escuro com Tailwind CSS em seu projeto.
Passo 1: Configurar as cores do modo escuro
O Tailwind CSS já possui uma série de cores pré-definidas que podem ser usadas nos seus estilos. Para criar um modo escuro funcional, é necessário definir as novas cores e configurar as variáveis correspondentes no seu arquivo de configuração do Tailwind.
Por exemplo, você pode definir as cores para o modo escuro da seguinte forma:
colors: {
dark: {
'primary': '#EAE9FF',
'secondary': '#B19EF4',
'background': '#413B5E',
}
}
Em seguida, você deve ajustar as variáveis correspondentes no seu arquivo de configuração principal module.exports do Tailwind:
module.exports = {
content: ['./app/**/*.{html,js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
DEFAULT: '#FFB25A',
dark: '#EAE9FF',
},
secondary: {
DEFAULT: '#FFF0CE',
dark: '#B19EF4',
},
background: {
DEFAULT: '#FFFDEB',
dark: '#413B5E',
},
},
},
},
plugins: [],
};
É crucial notar que configuramos darkMode para 'class'. Isso significa que o modo escuro será ativado quando uma classe CSS específica (a classe dark) for adicionada ao elemento html.
Passo 2: Adicionar estilos para o modo escuro
Com as cores configuradas, podemos aplicar o modo escuro usando as classes CSS correspondentes diretamente no HTML.
Por exemplo, para alterar a cor de fundo do body quando o modo escuro estiver ativo, você pode adicionar a classe dark:bg-background-dark ao elemento body:
<body class="bg-background dark:bg-background-dark">
<!-- meu conteúdo -->
</body>
Neste exemplo, a classe bg-background define a cor de fundo padrão para o modo claro.
Passo 3: Adicionar um botão de alternância para o modo escuro
Para que o usuário possa alternar manualmente entre o modo claro e o modo escuro, precisamos de um botão que alterne a classe dark no elemento html ao ser clicado.
Para isso, crie um novo arquivo TypeScript (por exemplo, dark-mode-manager.ts) e cole o seguinte código:
class DarkModeManager {
constructor() {
const toggleDarkModeButton = document.getElementById(
'toggle-theme'
) as HTMLButtonElement | null;
if (toggleDarkModeButton) {
toggleDarkModeButton.addEventListener('click', this.handleToggleDarkMode);
}
if (this.getDarkModeState()) {
this.setDarkMode(true);
}
}
private getDarkModeState(): boolean {
const darkMode = localStorage.getItem('darkMode');
return darkMode === 'true';
}
private setDarkMode(darkMode: boolean): void {
localStorage.setItem('darkMode', String(darkMode));
const html = document.documentElement;
if (darkMode) {
html.classList.add('dark');
} else {
html.classList.remove('dark');
}
}
private handleToggleDarkMode = (): void => {
const isDarkMode = this.getDarkModeState();
this.setDarkMode(!isDarkMode);
};
}
const darkModeManager = new DarkModeManager();
Este código gerencia o estado do modo escuro, armazenando-o no localStorage e aplicando ou removendo a classe dark do elemento html.
Em seguida, abra o arquivo HTML onde deseja adicionar o botão:
<button id="toggle-theme">Alternar modo claro/escuro</button>
Por fim, adicione o link para o arquivo TypeScript no seu arquivo HTML:
<script src="dark-mode-manager.ts" type="module"></script>
Note que o atributo type deve ser definido como "module" para indicar que estamos importando um módulo TypeScript.
Salve e atualize o arquivo HTML no seu navegador para ver o botão alternando entre os modos escuro e claro em ação.
Lembre-se de que você pode ajustar o estilo do botão e da página conforme suas preferências. Boa sorte!
Fontes
Este artigo foi embasado nas seguintes fontes de informação: