Jornada Frontend

Como implementar um tema escuro ( Dark Theme ) com CSS e Angular?

De uns bons tempos para cá o CSS disponibilizou a possibilidade de trabalharmos com variáveis, assim como o SASS/ SCSS. Deixando assim muitas maneiras de trabalhar com mais conforto e possibilidades também.

Podemos construir um DarkMode Switch usando as variáveis e isso é muito bacana, não precisando usar nem um tipo de lib ou coisas do tipo. E como podemos imaginar é super simples fazer isso.

Quer saber mais sobre o Angular? Acompanhe o Blog e o meu curso => Aqui

CSS variáveis

Vamos começar a trabalhar com as variáveis do CSS, abrir um arquivo e adicionar essas linhas.

Iremos inserir as cores via var() function do CSS, nos locais que aplicarmos a var(…) ela será aplicada nos locais que definimos.

var() – CSS | MDN (mozilla.org)

Classe, elemento ou id

Quando definimos a variável em uma classe, elemento ou ID, ela ficará apenas disponível naquele escopo.

Então se aplicarmos a classe dark-theme dentro do body, ela mudará de cor ou fará o que foi definido para fazer.

Mudando as variáveis CSS com o JavaScript

Agora que sabemos definir uma variável no CSS e sabemos que ela respeita um escopo, podemos começar a pensar em trabalhar junto com o JS para nos auxiliar.

Criando o Switcher

Agora que temos o conhecimento de como declarar as variáveis no CSS, como acessá-las via JavaScript e como mudar os valores dela, estamos prontos para nos aventurar nos códigos.

Crie uma função de clique e adicione nela a seguinte linha:

Esquemas de cores

O primeiro passo é definir o esquema de cores que você deseja colocar em seu projeto.

Vamos colocar as cores do lightmode nas variáveis :root e as darkmode na classe :root .dark-theme.

Conclusão

Como vimos até agora, simplesmente podemos usar o conhecimento básico de CSS e JS para fazermos algo bem legal, sem muita firula, funciona e o objetivo foi atingido de maneira bacana.

Espero ter lhe ajudado a pensar um pouco mais sobre o uso de CSS e JS vanilla e ver que é possível fazer muita coisa de maneira mais simples por aqui às vezes.

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

Fruto de mais de 7 anos estudando e trabalhando com Front-end, a "Jornada Front-end - O Guia Definitivo" é um manual completo para todos que querem subir em suas carreiras do zero ou subir do seu nível atual.

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Share This