DEV Community

loading...
Cover image for Mudando tema
da tela com 
CSS Puro | Theme Switch | Dark Mode

Mudando tema da tela com CSS Puro | Theme Switch | Dark Mode

williammago profile image William Gonçalves ・3 min read

We know the JS way

Mas e se não usarmos scripts para trocar o tema das nossas aplicações?

O caminho é uma relação entre cascata e seletores bem especificados.

Vamos do início:


HTML

O primeiro elemento da árvore será um input do tipo checkbox.

Seu irmão abaixo será o container da nossa aplicação. Ele é quem terá os estilos alterados para a mudança de tema.

Dentro dele, teremos um label relacionado ao nosso input lá de cima, dentro de uma div que será sua área de transição, servindo como nosso botão para mudar o tema.

<body>
  <input type="checkbox" id="theme-switcher">
  <div id="app-container">
    <div class="theme-switcher-area">
      <label for="theme-switcher" class="theme-switcher-button">
      </label>
    </div>
    <h1>Mudando tema com CSS Puro</h1>
    <p>O texto fica em contraste 
    com o fundo</p>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

CSS

Nos estilos, aplicamos os resets e declaramos as variáveis para as cores usadas no tema:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --light: #cccccc;
  --dark: #151515;
}
Enter fullscreen mode Exit fullscreen mode

Tornamos nosso input invisível, já que usaremos o label dele como acionador.

#theme-switcher {
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

E declaramos as propriedades do nosso container do app. Ele ocupará toda a tela, terá fundo claro e textos escuros, além de ser um flex-container. Esse último é opcional e só para facilitar a demonstração do resultado, centralizando o texto na tela.

#app-container {
  height: 100vh;
  background: var(--light);
  color: var(--dark);
  font-family: monospace;
  font-size: 1.5rem;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Declaramos a área por onde nosso botão vai deslizar, com posicionamento absoluto no topo:

.theme-switcher-area {
  border: 1px solid var(--light);
  background: var(--dark);
  border-radius: 2rem;
  width: 4.5rem;
  height: 2.5rem;
  padding: 0.2rem;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
Enter fullscreen mode Exit fullscreen mode

O botão, em si, que usará o estilo dashed na borda, criando um efeito similar aos raios do sol, para o tema claro.

.theme-switcher-button {
  position: relative;
  display: block;
  background: #f1aa02;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  border: 2px dashed var(--dark);
  transition: 0.3s;
}
Enter fullscreen mode Exit fullscreen mode

E por último, um pseudo-elemento ::after sobre o botão. Ele terá a forma de um círculo menor que o elemento original, tornando-se uma sombra que transformará o acionador em uma lua, no tema escuro. Por isso, sua opacidade inicial será 0.

.theme-switcher-button::after {
  position: absolute;
  width: 80%;
  height: 80%;
  content: "";
  background: var(--dark);
  border-radius: 50%;
  opacity: 0;
  transition: 0.3s;
}
Enter fullscreen mode Exit fullscreen mode

E aí vem a mágica!

Como nosso input é o primeiro elemento da árvore, podemos usar a pseudo-classe ':checked', com os seletores apropriados, para mudar o estilo de qualquer elemento abaixo dele.

Quando ele for selecionado, essas propriedades serão aplicadas.

Começando pelo próprio acionador, transformando o sol em lua. Para isso, removemos a borda que veio para dar o efeito dos raios e deslocamos o botão para a direita.

#theme-switcher:checked + #app-container .theme-switcher-button {
    transform: translateX(100%);
    border: none;
}
Enter fullscreen mode Exit fullscreen mode

Em seguida, mudamos a opacidade da sombra, o ::after, para gerar uma lua crescente, na mudança do botão.

#theme-switcher:checked + #app-container .theme-switcher-button::after {
    opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode

Por último e pelo efeito desejado, invertemos a cor de fundo e de texto do nosso container da aplicação:

#theme-switcher:checked + #app-container {
    background: var(--dark);
    color: var(--light);
}
Enter fullscreen mode Exit fullscreen mode

E tá lá, onde a coruja dorme!

Demonstração de mudança de tema usando só CSS


Esse tutorial é só o início do mergulho. Por isso, use sua criatividade a partir dessa base e mude os estilos como você achar melhor!


Se você curtiu esse conteúdo, compartilhe com outras pessoas e ajude a espalhar a palavra do Mago!


Você pode me acompanhar nas minhas redes sociais:

Instagram
GitHub
LinkedIn
Rocketseat
YouTube

E conhecer mais sobre mim e meu trabalho no meu site:

mago.link


Nos vemos na próxima mágica! 🧙

Discussion (0)

pic
Editor guide