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.

:root {
  --primary: #1976d2;
  --body: #fff;
  --text-menu: #fff;
  --text-body: #4b4b4b;
}

:root .dark-theme {
  --primary: #0d47a1;
  --body: #4b4b4b;
  --text-menu: #fff;
  --text-body: #fff;
}

body {
  background-color: var(--body);
}

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:

document.body.classList.toggle('dark-theme');

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.