Emular esquemas escuros ou claros na página renderizada

Use a ferramenta Renderização para ver a aparência da sua página da Web com diferentes opções de exibição ou deficiências visuais.

Muitos sistemas operacionais têm uma maneira de exibir qualquer aplicativo em cores mais escuras ou mais claras. Ter um site com um esquema claro em um sistema operacional de modo escuro pode ser difícil de ler e pode ser um problema de acessibilidade para alguns usuários.

Para testar como uma página da Web será renderizada quando o usuário tiver selecionado o modo escuro ou claro, em vez de alterar a configuração de modo escuro ou claro do seu computador, você pode selecionar Emular CSS prefers-color-scheme: dark or light no Microsoft Edge DevTools. Ou você pode fazer com que sua página da Web selecione automaticamente o modo escuro ou claro com base em suas próprias configurações preferidas em seu computador, selecionando Sem emulação, que é o padrão.

Você pode selecionar essas configurações na ferramenta Renderização ou no Menu de Comando, conforme descrito abaixo.

Para especificar o CSS a ser usado para esquemas claros e escuros, use a consulta de mídia CSS prefers-color-scheme para detectar se o usuário prefere exibir seu produto em um esquema de cores escuras ou claras e, em seguida, selecione automaticamente seu próprio CSS personalizado de modo claro ou escuro. O código CSS de exemplo é mostrado em Verificar se há problemas de contraste com o tema escuro e o tema claro.

Emular o modo escuro ou claro usando a ferramenta Renderização

  1. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

  2. No DevTools, na Barra de Atividades ou na Exibição Rápida, selecione a guia Renderização . Se essa guia não estiver visível, clique no botão Mais ferramentas (ícone de Mais ferramentas).

  3. Na lista suspensa Emular esquema de cores do recurso de mídia CSS , selecione prefers-color-scheme: dark ou prefers-color-scheme: light:

    Emular o modo escuro ou claro usando a ferramenta Renderização

    A página da Web renderizada é renderizada como se o usuário tivesse selecionado o modo escuro ou claro em seu sistema operacional. A página da Web usa o CSS que você especificou para esse modo.

  4. Modifique seu CSS e exiba o resultado renderizado da mesma maneira que em qualquer outra página da Web. Confira Introdução à exibição e alteração do CSS.

  5. Para restaurar a configuração, na ferramenta Renderização , na lista suspensa Emular esquema de cores do recurso de mídia CSS prefers-color-scheme , selecione Sem emulação. A configuração do seu sistema operacional para o modo claro ou escuro é aplicada.

Emulando o modo escuro ou claro usando o Menu de Comando

  1. Quando o DevTools tiver o foco, abra o Menu de Comando selecionando Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS).

  2. Digite dark, light ou emulate, selecione Emulate CSS prefers-color-scheme: dark ou Emulate CSS prefers-color-scheme: light e pressione Enter:

    Emulando o modo escuro ou claro usando os comandos 'Renderização: Emular CSS prefers-color-scheme' no Menu de Comando

    A página da Web renderizada é renderizada como se o usuário tivesse selecionado o modo escuro ou claro em seu sistema operacional. A página da Web usa o CSS que você especificou para esse modo.

    Selecione um comando Renderização em vez de um comando Aparência . Os comandos de renderização afetam a página da Web renderizada em desenvolvimento. Os comandos de Aparência , em vez disso, afetam a parte DevTools da janela.

  3. Modifique seu CSS e exiba o resultado renderizado da mesma maneira que em qualquer outra página da Web. Confira Introdução à exibição e alteração do CSS.

  4. Para restaurar a configuração, no Menu de Comando, digite emulate ou scheme e selecione Do not emulate CSS prefers-color-scheme. A configuração do seu sistema operacional para o modo claro ou escuro é aplicada.

Confira também

A ferramenta Renderização também é usada para as seguintes tarefas:

  • Last updated on