O modo escuro em sites é um dos recursos que a maioria das pessoas gosta. Além disso, é muito positivo para seu site que o usuário possa escolher entre o light mode e dark mode, porque desta forma, o utilizador pode selecionar o esquema de cores que mais lhe convém.
Introdução
Primeiramente precisamos esclarecer: um pré requisito para acompanhar este artigo é ter uma boa noção em Next.JS e saber um pouco do framework Tailwind CSS.
Neste artigo, nós iremos construir uma aplicação Next.JS simples. Basicamente será o app default do Next.JS, onde nós adicionaremos um botão para o usuário trocar o tema do site. Ele ficará assim:
Se você está aqui, vou supor que você sabe criar um projeto Next.
Nós teremos como dependência em nosso projeto o Tailwind CSS, e você pode fazer a configuração do Tailwind em seu projeto Next.JS clicando neste link: Install Tailwind CSS with Next.js.
Você também pode clonar esse projeto clicando neste link.
A estrutura
Depois que você instalou o Tailwind em seu projeto, já é possível utilizar as classes fornecidas pelo Tailwind livremente.
Em nosso projeto, nós vamos codar somente no arquivo index.js criado pelo Next.JS. Logo depois da criação do projeto, renomeie o index.js para index.jsx, dessa forma teremos o auxílio do intelliSense do nosso VSCode, que nos ajudará a completar o HTML:
O código
Enfim, colocaremos a mão na massa. O código em si está bem simples, e você verá que nunca foi tão fácil ter dois temas para a sua aplicação:
export default function Home() {
return (
<div id="container">
<div>
<div>
<h1>Tema escuro com next.js</h1>
<div>
<h2>Clique no botão para alterar o tema</h2>
<input type="checkbox" id="check" />
<label htmlFor="check">
<span></span>
</label>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam
reiciendis delectus similique placeat odit doloremque sequi
voluptatem consequatur. Alias minus voluptates ipsa dolore libero
error nihil, temporibus quos maiores consectetur?
</p>
</div>
</div>
</div>
);
}
Em nosso HTML, nós temos basicamente uma div com um id="container" que representa a tag de mais alto nível em nosso componente. Dentro dela nós vamos encontrar um titulo h1, h2, um input do tipo “checkbox”, um label para esse mesmo input e por último um paragrafo.
Estilos
Em seguida, para estilizar nosso app, utilizaremos as classes do Tailwind CSS:
export default function Home() {
return (
<div id="container">
<div
className={`
flex justify-center p-6 items-center h-screen
relative dark:bg-slate-800
`}
>
<div
className={`
max-w-4xl flex flex-col justify-center
dark:text-zinc-300
`}
>
<h1
className={`
font-bold text-2xl text-center pb-4
`}
>
Tema escuro com next.js
</h1>
<div className="flex justify-center items-center gap-2 pb-4">
<h2
className={`
font-bold text-xl text-center
`}
>
Clique no botão para alterar o tema
</h2>
<input
className="peer hidden"
type="checkbox"
id="check"
/>
<label
className={`
relative bg-zinc-500 flex items-center p-1
transition-all cursor-pointer w-14 h-7
rounded-full peer-checked:bg-zinc-200
peer-checked:justify-end
`}
htmlFor="check"
>
<span
className={`
h-5 w-5 rounded-full bg-zinc-200 dark:bg-zinc-500
`}
></span>
</label>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam
reiciendis delectus similique placeat odit doloremque sequi
voluptatem consequatur. Alias minus voluptates ipsa dolore libero
error nihil, temporibus quos maiores consectetur?
</p>
</div>
</div>
</div>
);
}
Agora que nós definimos os nossos estilos, você deve estar se perguntando pra que serve esse id="container" encontrado na primeira div e o que é essa classe dark:alguma-coisa.
Primeiramente, vamos começar pelo id. Ele vai servir para que a gente consiga adicionar ou remover o modo escuro do nosso site. Já a classe dark: que se parece muito com um pseudo elemento, faz determinada “coisa” quando o site está no modo dark. Por exemplo:
dark:bg-slate-800No trecho acima, quando o site estiver no modo escuro (dark) a cor de fundo será alterada para slate-800, que é nossa cor de fundo apresentada no gif no início do artigo.
Outro exemplo para você entender melhor é dark:text-zinc-300 que muda a cor do texto para um cinza bem claro quando o site ficar no modo dark.
Finalmente, chegou a hora de criarmos uma função que faz a troca do tema de acordo com a preferência do usuário.
Trocando o tema
A nossa função para fazer a troca do tema é bem simples:
function toggleTheme(e) {
const container = document.querySelector("#container");
if (e.target.checked) {
container.classList.add("dark");
} else {
container.classList.remove("dark");
}
}Essa função recebe um parâmetro que eu resolvi chamar de “e”, mas poderia ser qualquer outro nome como “element” ou “event”, o resultado seria o mesmo.
Quando a nossa função toggleTheme é chamada, nós capturamos aquela div que tem o id="container" e vai ser nessa div que nós adicionaremos uma classe especial chamada “dark” fornecida pelo Tailwind.
Então, se o nosso input estiver marcado (checado) “checked”, nós adicionaremos a classe dark a div container, caso contrário nós removeremos a classe dark da div container.
Teoricamente, tudo já deveria estar funcionando. No entanto, ainda precisamos fazer alguns ajustes.
A princípio, teremos que fazer uma simples configuração em nosso arquivo tailwind.confi.js:
darkMode: "class"Adicione ao início do arquivo a instrução acima, e o seu arquivo deve está semelhante a esse:
Finalmente é hora de chamarmos a nossa função toggleTheme no on change do input que está no arquivo index.jsx:
Agora, toda vez que você clicar no input/botão, a função será chamada e o tema será alterado.
Conclusão
Como resultado final, você deve ter uma aplicação Next.JS com dois temas possíveis, deixando o usuário escolher seu tema favorito.
Agora eu vou ficando por aqui, um abraço e até a próxima, pessoal.
