Dark mode com uma linha de codigo

Boa noite galera.

Aqui vai uma tecnica que vai facilitar muito a implementacao do dark mode, e pelo que percebi nao eh muito conhecida.

A linha magica:

<meta name="color-scheme" content="light dark">

O que essa meta tag faz: ela diz pro seu navegador que seu site esta preparado para usar o dark mode. Assim ele utiliza o stylesheet interno dele com as cores apropriadas.

Alem disso, a ordem dos temas pode ser alterado, no exemplo acima a preferencia eh do tema light, se quisermos dar preferencia pelo tema escuro, basta escrever dark light no conteudo.

Porem esse esquema eh bem limitado, se alguma cor do tema padrao for trocada o outro tema ira herda-la e provavelmente nao tera o efeito desejado, se voce gosta do tradicional preto no branco essa linha basta. Para ter as cores do seu jeito vamos indicar isso usando CSS.

Personalizando as cores

Para conseguirmos utilizar cores nao padroes usamos uma media query para indicarmos as cores desejadas para cada tema. No exemplo abaixo expecificamos uma cor de font para o elemento h1 no tema escuro, ao inves de branco foi escolhido cinza:

@media (prefers-color-scheme: dark) {
    h1 {
        color: gray;
    }
}

Isso eh necessario se voce nao quer a cor padrao ou se voce personalizou ela para o outro tema.

Note que a meta tag so indica qual eh o tema padrao para o navegador, eh o jeito do desenvolvedor indicar para os usuarios o tema pretendido.

Notas

  • A meta tag possui uma opcao CSS de mesmo nome mas que pode ser aplicado para cada elemento.

Espero que seja util pra voces tambem. Abracos e ate a proxima.

Referencias

NB

Perdao pela falta de acentos, eu troquei de laptop e ainda nao configurei.

Eu sou back-end entao o preto no branco padrao eh meu esquema preferido de cores.

giyomano passado

Taí... uma aboradagem simples. Parabéns.

Galdinoano passado

Existe alguma maneira de modificar esse meta Name via Js?

deMenezesano passado
Assim: ```js const metaTag = document.querySelector('meta[name="color-scheme"]'); metaTag.content = 'light'; // metaTag.content = 'dark'; // ``` Pode até criar uma função para isso: ```js function setScheme(scheme) { const metaTag = document.querySelector('meta[name="color-scheme"]'); metaTag.content = scheme; } setScheme('light'); setScheme('dark'); ``` Ou uma função pra cada: ```js function setLightScheme() { const metaTag = document.querySelector('meta[name="color-scheme"]'); metaTag.content = 'light'; } function setDarkScheme() { const metaTag = document.querySelector('meta[name="color-scheme"]'); metaTag.content = 'dark'; } setLightScheme(); setDarkScheme(); ```
alifersouzahá 11 meses
Rapaz, estavam atrás de algo assim...
Giroano passado

Obrigado pelo post, era exatamente o que eu estava procurando !!!

Voce poderia dar uma dica de como usar no react? Abracos!

jmmccano passado
Pode tentar usar com o React-Helmet e algum gerenciador de estilos, como material ui ou css vanilla mesmo
Giroano passado
Obrigado, no momento eu estou seguindo esse tutorial aqui: [dark-mode-react-in-depth-guide](https://blog.logrocket.com/dark-mode-react-in-depth-guide/)
cleysondiegoano passado

Massa demais! Não sabia da existencia dessa metatag. Obrigado pelo post

wesleycpdevano passado

Não conhecia, muito obrigado!

Larizzano passado

Que show, não sabia! Obrigada pelo post!

oCarlosano passado

Caramba, tava me preparando pra fazer um projeto com laravel e o dark mode pra mim seria um grande desafio, muito obrigado!!

ProgramandoJuntosano passado

Achei bem interessante e pretendo me aprofundar um pouco mais nesse tema.

Uma coisa que reparei, é que se eu estilizar uma div com o fundo branco, por exemplo, ao alterar o tema de light pra dark e vice-versa, essa div não muda de cor.

Existe alguma forma de fazer todos os elementos da página mudarem a cor? E não somente o fundo e a fonte?

lucaslima96ano passado

Muito massa, abordagem simples e objetiva pra quem quer uma implementação simples.

jedibitano passado

Muito bom, parabéns!

anlibenano passado

Adorei mesmo o modo como usou para diferenciar

ViniciusLeaoano passado

Ótimo tópico cara, nunca tinha usado essa tag.

ProgramandoJuntosano passado

Achei tão daora isso, que fiz um vídeo mostrando na prática e como personalizar também: https://youtu.be/kuDuw67UYYc

Quem quiser conferir, fica aí o link.

alifersouzahá 11 meses

Caramba, que conteúdo sensacional.