Executando verificação de segurança...
20
blmayer
2 min de leitura ·

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.

Carregando publicação patrocinada...
2
1
3
deMenezes

Assim:

const metaTag = document.querySelector('meta[name="color-scheme"]');

metaTag.content = 'light'; // <meta name="color-scheme" content="light">
metaTag.content = 'dark';  // <meta name="color-scheme" content="dark">

Pode até criar uma função para isso:

function setScheme(scheme) {
  const metaTag = document.querySelector('meta[name="color-scheme"]');
  metaTag.content = scheme;
}

setScheme('light');
setScheme('dark');

Ou uma função pra cada:

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();
0
1
Giro

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

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

1
1
1
1
1
1
oCarlos

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

1
ProgramandoJuntos

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?

1
1
1
1
1
0