Você sabe como criar um tema escuro e claro com CSS e JavaScript? Aprenda a implementar o Light Mode e o Dark Mode na sua página da web!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
O que você vai ver hoje?
Tema Escuro e Claro com CSS e JavaScript – Light and Dark Mode
A criação de temas claro e escuro é uma funcionalidade essencial em qualquer site atualmente. Essa prática proporciona uma experiência mais confortável e personalizada para os usuários.
Pensando nisso, nesta aula, vou te ensinar a implementar essa funcionalidade no seu projeto. Vamos começar desde a estrutura inicial até a personalização completa, utilizando CSS e JavaScript.
Você aprenderá a adaptar seu site para os dois temas de forma prática, seja por meio das preferências automáticas do sistema ou com um seletor manual que permita ao usuário alternar entre os modos!
No material disponível para download, você encontrará os códigos usados como exemplo nesta aula. Esses códigos fazem parte do Curso Básico e Gratuito de Introdução ao HTML e CSS, onde ensino a criar uma réplica da página do Google.
Caso você queira aprender o passo a passo para criar sua própria página, esse curso é uma ótima oportunidade para começar do zero.
Por que criar um tema claro e escuro?
Oferecer suporte a diferentes temas melhora significativamente a experiência do usuário. Isso permite que ele escolha o modo em que se sente mais confortável, especialmente em ambientes com baixa ou alta luminosidade.
Além de tornar a navegação mais agradável, essa prática também contribui para a acessibilidade e pode aumentar a retenção de visitantes no seu site.
Color-scheme – Tipos de Temas
A propriedade color-scheme é usada para definir se o conteúdo de uma página suporta os modos light (claro), dark (escuro) ou ambos.
Essa regra auxilia o navegador a ajustar automaticamente as cores de elementos da interface, como o plano de fundo da página, barras de rolagem, caixas de diálogo e outros componentes visuais padrão.
No arquivo CSS, podemos adicionar a seguinte regra:
html {
color-scheme: light dark;
}Com essa configuração, informamos ao navegador que a página aceita ambos os temas (claro e escuro). Dessa forma, o navegador ajusta os elementos automaticamente com base nas preferências do usuário.
Prefers-color-scheme – Preferências do Usuário
A propriedade prefers-color-scheme é um recurso de media query no CSS que detecta se o usuário configurou o sistema para usar um tema claro ou escuro.
Quando definimos o color-scheme como light e dark, o navegador utiliza o prefers-color-scheme para identificar a preferência do usuário e ajustar a exibição da página de acordo com a configuração do sistema.
Para testar como o tema reage a essas configurações, você pode utilizar as ferramentas de desenvolvedor do navegador.
Por exemplo, no Chrome, você pode acessar essa ferramenta clicando nos três pontos no canto superior direito do navegador, indo em Mais ferramentas e selecionando Ferramentas do programador.
Ou pode simplesmente utilizar o atalho Ctrl + Shift + I.
Ao acessar essa ferramenta, pressione Ctrl + Shift + P e procure por “prefers-color-scheme“.
Escolha entre dark (escuro) ou light (claro) e observe como os estilos da página mudam de acordo com essa preferência.
Ao fazer essa mudança, você perceberá que vários elementos já são ajustados automaticamente para o tema escuro.
Esses ajustes automáticos economizam tempo, mas algumas personalizações adicionais ainda serão necessárias.
Por exemplo, os links do header podem ficar invisíveis se utilizarem uma cor de fonte escura (como preto) no modo escuro.
A solução ideal é combinar o uso de prefers-color-scheme com variáveis CSS e media queries. Isso permite criar um design consistente e otimizado para o usuário em ambos os temas.
Variáveis CSS para os Modos Claro e Escuro
O uso de variáveis CSS é uma prática que torna seu código mais modular, fácil de manter e simples de modificar.
Em vez de aplicar valores de cor diretamente nos elementos, podemos atribuir essas cores a variáveis globais no seletor :root (raiz do documento HTML).
Isso centraliza as definições de estilo e facilita alterações quando alternamos entre os temas. Ao modificar o valor de uma variável, todos os elementos que a utilizam são ajustados automaticamente.
Se você quiser se aprofundar no uso de variáveis CSS, confira nossa aula completa: Variáveis no CSS (CSS Variables): A forma mais eficiente de escrever CSS
Para exemplificar como alterar variáveis de acordo com o tema, vamos utilizar a variável de cor para os links no header da página.
Dentro do CSS, declaramos a variável no seletor :root como –preto-87:
:root {
--preto-87: rgba(0, 0, 0, 0.87);
}E a aplicamos no seletor .link-header:
.link-header {
font-size: 13px;
color: var(--preto-87);
text-decoration: none;
}Essa é a cor padrão que o navegador irá atribuir a esses textos. O que precisamos fazer agora é definir a mudança da cor dessa variável de acordo com a preferência de tema do usuário.
Para isso criaremos uma media query com a propriedade prefers-color-scheme.
Media Query – Prefers-color-scheme
As media queries são declarações no CSS que permitem aplicar estilos condicionais. Elas verificam características do usuário (como largura da tela ou preferências de cores) e, com base no resultado, aplicam ou ignoram determinados blocos de CSS.
Você pode conferir mais sobre media queries na documentação oficial: Using media queries, ou em nossa aula: Responsividade no CSS: Criando Layouts para Diferentes Dispositivos.
No caso do tema claro e escuro, usamos media queries para detectar a preferência de esquema de cores configurada no sistema operacional, por meio da condição prefers-color-scheme. Assim, podemos modificar o valor da variável –preto-87.
@media (prefers-color-scheme: dark) {
:root {
--preto-87: rgba(255, 255, 255, 0.87);
}
}Se o sistema do usuário estiver configurado para o tema escuro, essa media query identificará a preferência e alterará a cor da fonte dos links no header, ajustando a variável –preto-87.
Além desse ajuste, há diversas outras mudanças e otimizações que você pode aplicar à página no modo dark.
Por isso, baixe o material disponível e pratique implementar essas alterações. Use variáveis para centralizar estilos que precisam ser adaptados para os dois temas e adicione essas variáveis às suas media queries.
Criando um Seletor para os Modos Claro e Escuro – HTML
Embora a detecção automática de tema seja útil, oferecer ao usuário um seletor manual garante controle completo sobre sua experiência.
Vamos criar um menu onde o usuário poderá escolher entre os modos claro, escuro ou seguir a configuração do sistema.
O primeiro passo é adicionar um elemento <select> dentro da tag <header> do <body> da página. Esse seletor, que terá o id=”selectModo”, permitirá ao usuário selecionar o tema desejado.
Essa tag receberá o id selectModo e envolverá 3 tags <option> com as opções de tema.
<body> <header> <select name="" id="selectModo"> <option value="light">Light</option> <option value="dark">Dark</option> <option value="sistema">Sistema</option> </select>
Isso já adicionará o seletor à sua página.
Agora, no elemento <html> do documento, vamos adicionar um atributo personalizado chamado modo-light-dark.
<!DOCTYPE html> <html modo-light-dark lang="en">
Esse atributo armazenará o estado atual do tema (por exemplo, light ou dark) e será usado no CSS para aplicar os estilos apropriados.
Por fim, adicionamos a tag <script> ao final do <body> para carregar o arquivo JavaScript que gerenciará a troca de temas:
<script src="script.js"></script> </body> </html>
Criando um Seletor para os Modos Claro e Escuro – CSS
Com o HTML configurado, ajustaremos o CSS para permitir a alternância entre os temas claro e escuro. Essa configuração funcionará tanto para o ajuste automático, baseado nas preferências do sistema, quanto para a seleção manual feita pelo usuário.
Para isso, definiremos regras de estilos baseadas no valor do atributo personalizado modo-light-dark.
[modo-light-dark="light"] {
color-scheme: light;
--preto-87: rgba(0, 0, 0, 0.87);
}
[modo-light-dark="dark"] {
color-scheme: dark;
--preto-87: rgba(255, 255, 255, 0.87);
}Essas regras garantem que, ao alterar o valor do atributo, o tema da página será ajustado automaticamente.
Quando o atributo for “light”, as variáveis e a propriedade color-scheme serão ajustadas para o modo claro. Quando for “dark”, os estilos se adaptam ao modo escuro.
Agora, não precisamos mais da regra color-scheme como havíamos declarado anteriormente no seletor html. Podemos modificá-la para que, por padrão, o tema da página seja configurado no modo claro:
html {
color-scheme: light;
}Com isso, o navegador assume que o site é inicialmente otimizado para o tema claro. Essa configuração é essencial para determinar como elementos nativos do navegador, como barras de rolagem e caixas de diálogo, serão estilizados por padrão.
Se o sistema do usuário estiver configurado para o modo escuro, essa regra será sobrescrita pelas definições feitas dentro da media query @media (prefers-color-scheme: dark).
Dentro dessa media query, adicionamos uma regra semelhante, definindo o color-scheme como “dark”:
@media (prefers-color-scheme: dark) {
:root {
--preto-87: rgba(255, 255, 255, 0.87);
}
html {
color-scheme: dark;
}
}A redundância de regras é necessária porque estamos adicionando um input manual para o usuário alterar o tema. O seletor manual permite que o usuário sobrescreva as preferências do sistema, mas ainda precisamos manter toda a lógica para:
- Configuração inicial baseada no sistema.
- Manutenção de estilos consistentes para os elementos nativos.
No CSS final, as regras ficam assim:
:root {
--preto-87: rgba(0, 0, 0, 0.87);
}
html {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root {
--preto-87: rgba(255, 255, 255, 0.87);
}
html {
color-scheme: dark;
}
}
[modo-light-dark="light"] {
color-scheme: light;
--preto-87: rgba(0, 0, 0, 0.87);
}
[modo-light-dark="dark"] {
color-scheme: dark;
--preto-87: rgba(255, 255, 255, 0.87);
}Caso você queira ajustar o tema automaticamente, sem permitir a seleção manual, basta manter apenas as media queries e a regra inicial no html:
:root {
--preto-87: rgba(0, 0, 0, 0.87);
}
html {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root {
--preto-87: rgba(255, 255, 255, 0.87);
}
html {
color-scheme: dark;
}
}Essa é uma abordagem mais simples, que elimina a necessidade de gerenciar seletores de atributos.
Criando um Seletor para os Modos Claro e Escuro – JavaScript
Com os arquivos HTML e CSS configurados, vamos agora criar o código em JavaScript. Ele será responsável por alterar o modo de exibição da página de acordo com a seleção feita pelo usuário.
Na pasta onde estão os arquivos HTML e CSS, criaremos um arquivo chamado script.js.
Dentro desse arquivo, começaremos criando uma variável chamada elemSelect, que será usada para armazenar o elemento HTML com o id selectModo.
Esse ID será utilizado para identificar o elemento <select> no HTML, que será o responsável por permitir que o usuário escolha entre os diferentes modos.
Usaremos o método querySelector() para selecionar o elemento pelo seletor CSS correspondente. No caso, como estamos buscando um elemento com o id selectModo, utilizamos o seletor #selectModo, assim como faríamos no CSS:
const elemSelect = document.querySelector("#selectModo");Com o elemento selecionado, adicionaremos um “ouvinte de evento” (event listener). Esse ouvinte monitorará o elemento elemSelect e, sempre que o evento change for disparado, ele executará a função que altera o tema.
O evento change é acionado sempre que o valor do elemento <select> é alterado pelo usuário. Dentro da função associada, usaremos uma lógica condicional para verificar qual valor foi selecionado: “light”, “dark” ou nenhum deles:
- Se o valor for “light”, o atributo modo-light-dark será definido como “light”.
- Se o valor for “dark”, o atributo será definido como “dark”.
- Caso contrário (ou seja, se o valor selecionado não for nem “light” nem “dark”), o atributo será removido do elemento <html>.
Remover o atributo é útil porque restaura o estilo padrão da página, permitindo que ela se adapte automaticamente ao modo definido pelas preferências do sistema.
const elemSelect = document.querySelector("#selectModo");
elemSelect.addEventListener("change", function () {
if (elemSelect.value == "light") {
document.documentElement.setAttribute("modo-light-dark", "light");
} else if (elemSelect.value == "dark") {
document.documentElement.setAttribute("modo-light-dark", "dark");
} else {
document.documentElement.removeAttribute("modo-light-dark");
}
});Agora, o usuário poderá alterar o modo de exibição da página utilizando o seletor <select> que criamos.
Caso você tenha ficado com dúvidas sobre o processo de criação e implementação deste código em JavaScript, confira nosso curso gratuito sobre essa importante linguagem e como utilizá-la no desenvolvimento web: Projeto Web de JavaScript – Curso Básico
Conclusão – Tema Escuro e Claro com CSS e JavaScript – Light Mode e Dark Mode
Criar um sistema de alternância entre os temas claro e escuro não apenas melhora a experiência do usuário, mas também contribui para a acessibilidade do seu site.
Nesta aula, mostrei como configurar e alternar entre os temas da sua página utilizando variáveis CSS, media queries e lógica em JavaScript.
Com esse conhecimento, você está preparado para desenvolver interfaces que se adaptam às necessidades e preferências de cada usuário, oferecendo uma experiência mais personalizada e inclusiva.
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de HTML e CSS
- Aprenda Tailwind CSS com apenas uma aula!
Descubra como o Tailwind CSS pode revolucionar o seu desenvolvimento web. Aprenda a usar essa ferramenta que vai elevar o nível do seu front-end. - Configure seu VS Code para HTML e CSS, e conheça outras Tecnologias Full Stack! Aprenda como baixar e configurar o VS Code para HTML e CSS e deixe-o pronto para iniciar o seu desenvolvimento web!
- Guia rápido – Aprenda como usar Bootstrap do Zero Quer criar sites bonitos e responsivos sem complicação? Aprenda como usar Bootstrap, uma ferramenta que te permite criar páginas completas com o mínimo de dificuldade e esforço!
Posts mais recentes da Hashtag Treinamentos
- 5 Boas Práticas de SQL para Iniciantes: Otimize Suas Consultas e Organize Seu Código
Se você está começando com MySQL ou busca melhorar suas habilidades em SQL, este post traz cinco boas práticas de escrita de SQL para iniciantes. - Função SE Excel: Exemplos e Dicas para Uso [Guia] A função SE Excel é muito útil para definir condições e criar uma planilha mais completa e funcional. Confira nesta aula!
- Exercícios de Listening em Inglês – Como Melhorar sua Compreensão Faça estes exercícios de listening em inglês e melhore sua compreensão! Descubra técnicas e estratégias para praticar e evoluir no aprendizado do idioma!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.