DEV Community 👩‍💻👨‍💻

Cover image for Dark mode apenas com HTML, CSS e Javascript
Kelven Rubalaine
Kelven Rubalaine

Posted on

Dark mode apenas com HTML, CSS e Javascript

Ao implementar o modo escuro no nosso website melhoramos a experiência do usuário, já que o mesmo ganha a possibilidade de escolher qual é o melhor tema para ele.
Existem diferentes maneiras para implementar o modo escuro em websites, das mais simples as mais complexas, e a abordagem que mostro nesse pequeno tutorial, eu considero como a mais simples e menos trabalhosa possível, onde mostro a implementação usando apenas HTML, CSS e Javascript.

Dois conceitos (chaves) serão usados para implementação do modo escuro, as Variáveis de CSS para as cores, e o localStorage para guardar o tema atual do usuário.

Variáveis de CSS

As variáveis de CSS funcionam como as variáveis de qualquer outra linguagem, onde atribuímos valores a mesma e podemos modificar posteriormente, para implementação do modo escuro, atribuiremos os valores das nossas cores a variáveis de CSS, com isso podemos modifica-las dependendo do contexto.

/*criando uma variável de css */
--bg-grey-light: #f5f5f5;

/*usando a variavel de css */
background-color: var(--bg-grey-light);
Enter fullscreen mode Exit fullscreen mode

Uma particularidade das variáveis de CSS que a torna uma boa alternativa para implementar o modo escuro é que todos os elementos que forem declarados dentro do elemento pai irão

herda-las, sendo assim nos iremos definir as nossas variáveis diretamente no body para que todos os elementos dentro do mesmo possam herda-las.

localStorage API

Para uma melhor experiência de usuário, iremos usar o localStorage para armazenar o estado atual do usuário, dessa forma quando o usuário voltar a acessar o website, o seu tema preferido será aplicado automaticamente.

//armazenando na máquina do usuario o tema
localStorage.setItem('theme', 'dark'); 

//acessado o tema da maquina do usuário
localStorage.getItem('theme'); 
// dark
Enter fullscreen mode Exit fullscreen mode

Estrutura do documento

Sendo um projeto muito pequeno, o nosso documento será constituído por dois botões e dois blocos de texto, os botões terão a função de mudar o tema e atualizar a pagina.

index.html

 <body>
    <div class="container">
      <h1 class="heading">
        Como fazer o dark mode com HTLM, CSS e Javascript apenas
      </h1>
      <div class="buttons">
        //botão para fazer a troca de estados dark/light
        <button id="toggle" class="button">toggle</button>
        //botão para atualizar a página
        <button id="refresh" class="button">refresh</button>
      </div>
      <div class="text-wrapper">
        <p class="paragraph">
          The United States shall be President of the....
        </p>
      </div>
      <div class="text-wrapper">
        <p class="paragraph">
          Why, there's hardly enough of me left...
        </p>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
Enter fullscreen mode Exit fullscreen mode

Definindo as cores

Ao definir as cores, já que estamos a lidar com dois contextos diferentes, para cada cor no tema claro deve existir uma variante para o tema escuro, e as cores têm de ser definidas de acordo com as suas responsabilidades, tendo assim cores para texto, cores de fundo…

Definição das variáveis

/* Definição das cores */
body {
  /* cores de texto */
  --text-white: #ffffff;
  --text-dark: #142136;

  /* cores de fundo */
  --bg-grey-light: #f5f5f5;
  --bg-white: #ffffff;
  --bg-blue-dark: #142136;
  --bg-indigo: #6366f1;

  /*
...
*/
}
Enter fullscreen mode Exit fullscreen mode

Após definição das variáveis, iremos criar a classe .dark, que conterá a definição das mesmas variáveis, só que com o valor das cores alteradas para o tema escuro, assim, no momento em que pretendermos mudar o contexto para o tema escuro, apenas adicionamos a classe .dark ao body através do javascript dessa forma as variáveis previamente definidas serão sobrepostas pelas que foram definidas na classe .dark.

Definição das variáveis para o tema escuro

.dark {
  --text-white: #e6e6e6;
  --text-dark: #ffffff;

  --bg-grey-light: #142136;
  --bg-white: #22395d;
  --bg-blue-dark: #142136;
  --bg-indigo: #7577e1;
}
}
Enter fullscreen mode Exit fullscreen mode

É importante notar que a variável --text-dark que tinha o seu valor: #142136, o mesmo foi alterado para #ffffff no contexto do tema escuro, tendo isso em mente, é só repetir o mesmo processo para todas as outras cores do seu código.

Como ficou o arquivo .css final:

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Definição das cores */
body {
  /* cores de texto */
  --text-white: #ffffff;
  --text-dark: #142136;

  /* cores de fundo */
  --bg-grey-light: #f5f5f5;
  --bg-white: #ffffff;
  --bg-blue-dark: #142136;
  --bg-indigo: #6366f1;

  font-family: "Inter", sans-serif;
  line-height: 1.7;
  background-color: var(--bg-grey-light);
}
.dark {
  --text-white: #e6e6e6;
  --text-dark: #ffffff;
  --bg-grey-light: #142136;
  --bg-white: #22395d;
  --bg-blue-dark: #142136;
  --bg-indigo: #7577e1;
}
.container {
  max-width: 600px;
  margin: 40px auto;
  display: flex;
  padding: 20px;
  flex-direction: column;
}
.text-wrapper {
  width: 100%;
  padding: 20px;
  background-color: var(--bg-white);
  margin-bottom: 40px;
  border-radius: 10px;
}
.paragraph {
  font-size: 16px;
  color: var(--text-dark);
}
.heading {
  font-size: 40px;
  letter-spacing: 1px;
  font-weight: 900;
  margin-bottom: 40px;
  color: var(--text-dark);
}
.buttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.button {
  width: 200px;
  padding: 5px;
  height: 40px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  cursor: pointer;
  background-color: var(--bg-indigo);
  color: var(--text-white);
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
}
Enter fullscreen mode Exit fullscreen mode

Como pode se ver no código, não foi usada nenhuma cor directamente, mas sim as variáveis previamente definidas.

Alterando o tema

Para o processo de alteração do tema, usaremos o javascript, e o script primeiro verificará no localStorage se o tema previamente armazenado é escuro e o aplicará ao body assim que o mesmo for carregado.
Para o botão de alterar tema, criamos um eventListener para quando o mesmo for clicado, remover ou adicionar a classe .dark e também alterar o tema armazenado no localstorage dependendo do contexto.

script.js

const toggle = document.getElementById("toggle");
const refresh = document.getElementById("refresh");
const theme = window.localStorage.getItem("theme");

/* verifica se o tema armazenado no localStorage é escuro
se sim aplica o tema escuro ao body */
if (theme === "dark") document.body.classList.add("dark");

// event listener para quando o botão de alterar o tema for clicado
toggle.addEventListener("click", () => {
  document.body.classList.toggle("dark");
  if (theme === "dark") {
    window.localStorage.setItem("theme", "light");
  } else window.localStorage.setItem("theme", "dark");
});

refresh.addEventListener("click", () => {
  window.location.reload();
});
Enter fullscreen mode Exit fullscreen mode

Demo: dark-mode.kelven.dev
Código fonte: Repósitorio do Github

Muito Obrigado por ler até aqui, espero que o meu texto de alguma forma tenha te ajudado.
Esse é o segundo artigo/blog post que eu escrevo, sinta-se livre pra dar a sua opinião sobre o mesmo, que assim me ajuda a melhorar.
Dê uma olhada no meu Portfólio tenho alguns projectos interessantes por lá.

Top comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!