Dark Mode com CSS — mudando a aparência do Blog de maneira simples e rápida

 Umas das funcionalidades que está na moda em Blogs e Sites é o Dark Mode. Devs, em sua maioria, curtem bastante utilizar temas escuros, tanto na IDE quanto em outros apps.

👋 Introdução

Vamos mostrar como adicionar Dark Mode no Blog de maneira rápida e fácil, sem depender do JavaScript, usando apenas o CSS.

Vou trazer um conceito — uma ideia — que vai além de mudar o background do fundo da tela e as cores dos textos, que é o padrão. Vamos escurecer um pouco as imagens também.

O usuário quer ler um conteúdo com tema escuro, então a imagem do conteúdo precisa se adequar e ter menos brilho.

🖥️ Navegadores modernos

Na verdade teremos uma única dependência: o Navegador (browser).

Os navegadores modernos trazem a opção de configurar a aparência para dark 🌑 light 🌕  ou seguir as preferências já definidas no tema que o usuário escolheu no Sistema Operacional. 🌗

Configurando a aparência do Navegador Brave para Dark Theme

🍥 CSS @Media Screen - prefers-color-scheme

Quem nos ajuda com essa funcionalidade no CSS é a incrível media query com prefers-color-scheme.

<style>
	/* Base (light mode) styles */

	@media screen and (prefers-color-scheme: dark) {
		/* Dark mode styles */
	}
</style>

Com prefers-color-scheme detectamos se o usuário está usando o tema de cores escuras (dark) ou claras (light).

💪 Praticando

Neste post construímos um blog com NextJS. Agora vamos adicionar a funcionalidade Dark Mode utilizando a técnica que mencionei acima.

Link para o código fonte.

No arquivo styles/index.css adicionamos algumas propriedades CSS para estilizar alguns elementos HTML.

Por padrão, as cores seguirão o tema claro (Light Theme) e, se o usuário estiver com o Dark Theme configurado no Navegador ou sistema Operacional, ele será aplicado.

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Mapas com React usando Leaflet

  👋 Introdução Neste post vamos desenvolver uma página web para demonstrar, na prática, a integração de Mapas em uma aplicação com React usando  Leaflet . Alguns pontos que vamos abordar: Geolocalização; Consumo de API; Input com Autocomplete usando React-Select; Integração com Mapas; Estilização do Mapa e Marcadores. Leaflet  é uma biblioteca JavaScript open-source para trabalhar com Mapas em aplicações web e mobile. Pode ser simplesmente integrada a um site usando apenas HTML, CSS e JavaScript. Podemos também integrar a Leaflet ao React com a biblioteca  React Leaflet , que tem suporte ao TypeScript sendo bastante simples de utilizar. Ambas serão utilizadas em nossa aplicação de demonstração. Somando todas essas tecnologias e conceitos, no final deste post vamos ter desenvolvido o app Entregas. Vai ser assim: Fluxo da aplicação Entregas - Clique em HD para melhorar a qualidade do Gif. Conforme podemos observar na animação acima, quando o usuário digita o endereço,...
Leia mais

Obtendo o status de progresso do envio de dados com Axios

  Introdução Vamos mostrar na prática como  obter o progresso de cada requisição  HTTP sendo feita através do método  POST , do front end para o back end utilizando o  Axios . Caso de uso Imagine que você tem um app front end que faz  upload de arquivos para um servidor . Você quer acompanhar e  mostrar ao usuário o progresso do envio desses arquivos , como no exemplo abaixo: Isso é possível e fácil de implementar utilizando o  Axios . Vamos como  codar  essa funcionalidade. Mensurando o Progresso de Upload na Prática Sintaxe básica: // Utilizando axios import axios from axios ; // Criando um FormData que armazena a imagem (arquivo) const data = new FormData ( ) ; data . append ( "file" , file , filename ) ; // Fazendo a requisição para o servidor com método POST // Enviando o arquivo que está na variável data // Passando um objeto de configuração que possui um método onUploadProgress ...
Leia mais