Renderizando darkmode do seu site no Chrome DevTools

chrome devtools darkmode

Você já se perguntou como testar seu DarkMode usando o Chrome DevTools? Neste post, vou mostrar como você pode fazer isso de forma fácil e rápida. O Chrome DevTools é uma ferramenta poderosa que permite inspecionar, depurar e modificar o código de uma página web. Para verificar se o seu site está pronto para o modo escuro, você pode usar o Chrome DevTools para simular essa condição.

Para fazer isso, você precisa usar a propriedade CSS prefers-color-scheme, que retorna o valor dark ou light dependendo da preferência do usuário. Você pode usar essa propriedade em suas folhas de estilo para definir cores e imagens diferentes para cada caso. Por exemplo:

1@media (prefers-color-scheme: dark) {
2  body {
3    background-color: black;
4    color: white;
5  }
6}

Mas como testar isso sem mudar a configuração do seu sistema operacional ou navegador? É aí que entra o Chrome DevTools. Existem duas formas de emular o modo escuro usando o Chrome DevTools:

  • Usando o menu de comando: com o DevTools aberto e focado CTRL+SHIFT+I, pressione CTRL+SHIFT+P (no Linux) ou SHIFT+CMD+P (no Mac) e digite "Emulate CSS prefers-color-scheme:dark". Selecione o comando e pressione Enter para executá-lo. Você verá que o seu site mudará para o modo escuro, se estiver usando a propriedade CSS mencionada acima.

  • Usando o painel de renderização: com o DevTools aberto, e No painel que aparece na parte inferior da tela.

  1. Clique no ícone de três pontos no canto superior direito.

  2. Selecione "Mais ferramentas" > "Renderização".

  3. Procure pela opção "Enable automatic dark mode" > "Emulate CSS media feature prefers-color-scheme"

  4. Selecione "dark" no menu suspenso.

Pronto! Agora você pode testar seu DarkMode usando o Chrome DevTools e ver como o seu site se comporta em diferentes condições. Espero que este post tenha sido útil e que você tenha gostado, se tiver alguma dúvida estou a um Linkedin de distancia. Até a próxima!

← Blog Inicial