Ultimamente tem sido comum que vários sites, principalmente os relacionados a tecnologia, que antes possuíam apenas uma tema padrão, de cores claras, e que agora tem criado a possibilidade do usuário utilizar temas de cores escuras.
O StackOverflow lançou seu tema escuro no começo deste ano, e mais recentemente foi a vez do GitHub fazer o mesmo. Até a Google está testando um tema escuro para o seu buscador nos desktops.
Se você não tem tanta familiaridade com o desenvolvimento web, pode acabar pensando que é muito complexo criar um mecanismo de temas para manter um tema claro e um escuro da mesma forma que esses sites fazem.
Porém isso não é verdade! É possível criar um mecanismo de temas apenas utilizando JavaScript e CSS3 puros, sem nenhum outro framework ou ferramenta, e neste artigo eu vou mostrar como isso pode ser feito!
Variáveis, variáveis por todos os lados
Para começar, primeiro você deve entender exatamente o que vamos utilizar para criar o tema.
Primeiro, da parte de JavaScript, não temos muitos segredos, vamos apenas manipular alguns atributos para alterar o tema, e também iremos salvar a seleção do usuário no navegador, já vamos chegar nisso.
A mágica toda acontece com o CSS3, utilizando de suas variáveis.
As variáveis no CSS foram introduzidas na linguagem e podem ser usadas praticamente desde 2012, porém só a partir de 2015 que elas começaram a ser suportadas com maior abrangência pelos navegadores, e hoje praticamente só não é suportado pelo Internet Explorer (nem a Microsoft dá mais suporte para o IE...).
Como essas variáveis funcionam?
Em um arquivo CSS, as variáveis funcionam com um par de chave/valor, bem parecido como as propriedades dentro da regra de um seletor.
A diferença é que você pode definir qualquer nome para uma variável, e ela deve iniciar com dois traços.
Depois, para utilizar de fato a variável, basta utilizar var() com o nome que foi definido.
Por exemplo, no código abaixo, é possível ver a utilização das variáveis para guardar valores de cores, tamanhos e medidas, etc. Qualquer valor que pode ser definido a uma propriedade, pode ser armazenada em uma variável, e depois elas podem ser reaproveitadas onde for necessário.
Você pode declarar as variáveis dentro de um seletor :root ou html, e assim elas estão disponíveis para serem utilizadas nas em todas as regras que você definir posteriormente.
:root {
--fonte-padrao: 12px;
--fonte-pequena: 8px;
--fonte-grande: 16px;
--cor-da-fonte: #12171a;
--cor-de-alerta: #f10505;
}
.alerta {
background-color: var(--cor-de-alerta);
font-size: var(--fonte-grande);
}
#botao-enviar {
color: var(--cor-da-fonte);
font-size: var(--fonte-pequena);
}
Mesmo sem levar em consideração a questão da criação de temas, o uso de variáveis no seu CSS já pode ser de grande valor. Centralizar em apenas um local os valores de cores e medidas diversas utilizadas deixa o código muito mais organizado e facilita a manutenção.
Agora que você já sabe o que são e como as variáveis do CSS podem ser utilizadas, vamos à criação dos nossos temas!
Come To The Dark Side
Para criação do nosso tema, vamos considerar que temos um site simples, composto de um index.html para a página, um main.js para o código JavaScript, e um style.css para definir o estilo dessa nossa página.
Por exemplo, vamos imaginar que tenhamos essas regras no nosso style.css:
body {
background-color: #f5f5f5;
margin: 0;
font-family: "Roboto", sans-serif;
color: #000000;
}
a {
color: #0000ee;
}
.header-title {
color: #333333;
}
.header-subtitle {
color: #969696;
}
.page-header {
padding: 15px;
background-color: #e3e3e3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
text-align: center;
}
A primeira coisa que devemos fazer é pegar cada uma dessas cores que estão definidas entre as diversas regras do arquivo, transformar em variáveis, e adicionar em uma regra genérica para todo a tag html da página.
Lembrando que você também pode fazer o mesmo com o valor de outras propriedades das regras, com as margens, espaçamentos, etc. Mas como o foco aqui é a criação do tema, vamos fazer isso apenas com as cores
html {
--background-color: #f5f5f5;
--header-background-color: #e3e3e3;
--header-title-color: #333333;
--header-subtitle-color: #969696;
--link-color: #0000ee;
--text-color: #000000;
}
body {
background-color: var(--background-color);
margin: 0;
font-family: "Roboto", sans-serif;
color: var(--text-color);
}
a {
color: var(--link-color);
}
.header-title {
color: var(--header-title-color);
}
.header-subtitle {
color: var(--header-subtitle-color);
}
.page-header {
padding: 15px;
background-color: var(--header-background-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
text-align: center;
}
Só de fazer essa alteração você já deixou seu CSS mais organizado, mantendo a página visualmente sem nenhuma alteração.
Agora o que nós precisamos fazer, é criar uma segunda regra com o conjunto de cores que serão utilizados no tema oposto. No caso, essas cores são do tema claro, então precisamos criar as mesmas variáveis para quando formos utilizar o tema escuro.
E para diferenciar entre os dois conjuntos de variáveis, em vez de manter as regras apenas para o seletor da tag html, vamos definir também em conjunto uma propriedade data-theme, que vai receber ou o valor light quando for o tema claro, ou dark quando for o tema escuro.
Veremos o uso dessa propriedade mais a frente.
html[data-theme="light"] {
--background-color: #f5f5f5;
--header-background-color: #e3e3e3;
--header-title-color: #333333;
--header-subtitle-color: #969696;
--link-color: #0000ee;
--divider-color: #006064;
--text-color: #000000;
}
html[data-theme="dark"] {
--background-color: #171e22;
--header-background-color: #1c262b;
--header-title-color: #5a7788;
--header-subtitle-color: #35454f;
--link-color: #7d95ff;
--divider-color: #006435;
--text-color: #acacac;
}
body {
background-color: var(--background-color);
margin: 0;
font-family: "Roboto", sans-serif;
color: var(--text-color);
}
a {
color: var(--link-color);
}
.header-title {
color: var(--header-title-color);
}
.header-subtitle {
color: var(--header-subtitle-color);
}
.page-header {
padding: 15px;
background-color: var(--header-background-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
text-align: center;
}
Agora, no nosso arquivo HTML, precisamos definir qual tema será utilizado por padrão, adicionando a propriedade data-theme para a tag html da página, com o valor desejado.
<html lang="en" data-theme="light"></html>
Só com isso você já vai conseguir ver o seu site alternando entre os dois temas criados, basta alterar o valor da propriedade data-theme entre dark e light e recarregar a página que "magicamente" as cores serão alteradas!
Agora é ligar os pontos
Agora que nós temos as cores todas definidas como variáveis, e também já temos as cores do nossos dois temas, vamos precisar de um pouco de JavaScript para criar uma função que troque o valor do atributo data-theme dinamicamente, permitindo que o usuário escolha o tema que achar mais agradável.
Na interface do usuário, isso pode ser feito de diversas maneiras: com uma caixa de seleção que liste os temas, um checkbox de ativação do tema, um botão que alterna entre claro e escuro, etc. Mas independente da maneira que for, o que deve ser feito internamente é definir na propriedade data-theme o valor para o tema desejado.
Por exemplo, podemos criar uma função no JavaScript que, caso o tema atual seja o claro, ele alterne para o escuro, e vice-versa. E podemos vincular essa função no evento de clique de um botão que exista na página.
Toda vez que esse botão for clicado, a função irá obter o valor atual da propriedade data-theme, e irá trocar para o valor inverso, e as cores serão alteradas.
É importante que apenas um elemento na página possua essa propriedade data-theme, que usualmente é a tag html ou a body
let themeToggler = document.getElementById("theme-toggler");
themeToggler.addEventListener("click", () => {
let targetTheme;
let currentTheme = document.documentElement.getAttribute("data-theme");
if (currentTheme === "light") {
targetTheme = "dark";
} else {
targetTheme = "light";
}
document.documentElement.setAttribute("data-theme", targetTheme);
});
Refletindo o tema do navegador
Todos os navegadores modernos, como o Chrome, Firefox e o Edge (o novo Edge, não o antigo) também possuem temas claros e escuros neles próprios, e é possível adicionar na nossa página uma função JavaScript que irá tentar obter essa configuração, e a sua página automaticamente ficará com o mesmo tema do navegador.
Essa função pode ser executada cada vez que a página é carregada, e deve buscar pela configuração prefers-color-scheme no navegador.
Se essa configuração existir e o valor for dark, definimos esse mesmo valor no nosso atributo data-theme.
Agora, se a configuração for qualquer outra, ou se por um acaso o navegador não tiver suporte para ela e ela não existir, definimos nosso tema como light, que é nosso tema padrão.
let browserTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
document.documentElement.setAttribute("data-theme", browserTheme);
Caso você deseje manter o tema escuro como padrão, é só inverter a verificação.
let browserTheme = window.matchMedia("(prefers-color-scheme: light)").matches
? "light"
: "dark";
Salvando a seleção do usuário
Podemos também criar uma forma simples de salvar o tema selecionado pelo usuário, mantendo essa informação no localStorage do navegador.
Desta forma você pode manter entre as seções do usuário o tema de preferência dele.
Para isso, na função de troca do tema, sempre que você alterar o atributo data-theme, você pode também salvar o valor nolocalStorage.
localStorage.setItem("theme", targetTheme);
Com essa informação salva, você pode fazer a chamada para uma outra função no carregamento da página para verificar se existe esse valor armazenado naquele navegador, e se existir, utilizá-lo. Caso contrário, fica definido o tema padrão.
let savedTheme = localStorage.getItem("theme");
if (savedTheme) {
document.documentElement.setAttribute("data-theme", savedTheme);
}
É possível até juntar na lógica a verificação tanto do tema salvo pelo usuário, quanto fazer refletir o tema do navegador.
Se existir um tema salvo, utiliza este. Caso contrário, tenta obter o tema configurado no navegador. Se o navegador não suportar, vai ficar definido o tema padrão.
let savedTheme = localStorage.getItem("theme");
if (savedTheme) {
document.documentElement.setAttribute("data-theme", savedTheme);
} else {
let browserTheme = window.matchMedia("(prefers-color-scheme: light)").matches
? "light"
: "dark";
document.documentElement.setAttribute("data-theme", browserTheme);
}
Não se limite aos temas
Com esse mecanismo é possível criar quantos temas forem necessários, basta criar o conjunto de variáveis com os valores das cores de cada tema, e fazer as funções que atualizem o atributo data-theme.
E também, é claro, as variáveis no CSS são excelentes para deixar o código mais organizado e centralizar as definições em apenas em um local mesmo que você não queira criar nenhum tema, funcionando muito bem também com frameworks de SPA, como o React e o Angular por exemplo, garantindo que todos os componentes sigam os mesmos padrões.
Caso deseje ver um exemplo de implementação desse mecanismo de temas, você pode consultar este repositório do GitHub: https://github.com/lfrigodesouza/dark-theme-with-css
Também pode ver ele em funcionamento nesta página: https://lfrigodesouza.github.io/dark-theme-with-css/
Top comments (0)