Compartilhar via

Emular esquemas escuros ou claros na página composta

  • Artigo

Utilize a Ferramenta de composição para ver o aspeto da sua página Web com diferentes opções de visualização ou deficiências visuais.

Muitos sistemas operativos têm uma forma de apresentar qualquer aplicação em cores mais escuras ou mais claras. Ter um site com um esquema claro num sistema operativo de modo escuro pode ser difícil de ler e pode ser um problema de acessibilidade para alguns utilizadores.

Para testar a forma como uma página Web será composta quando o utilizador tiver selecionado o modo escuro ou claro, em vez de alterar a definição de modo escuro ou de modo claro do seu computador, pode selecionar Emular CSS prefers-color-scheme: escuro ou claro nas DevTools do Microsoft Edge. Em alternativa, pode fazer com que a sua página Web selecione automaticamente o modo escuro ou claro com base nas suas próprias definições preferidas no seu computador, selecionando Sem emulação, que é a predefinição.

Pode selecionar estas definições na Ferramenta de composição ou no Menu de Comandos, conforme descrito abaixo.

Para especificar o CSS a utilizar para esquemas claros e escuros, utilize a consulta de suporte de dados CSS prefers-color-scheme para detetar se o utilizador prefere apresentar o seu produto num esquema de cores escuras ou claras e, em seguida, selecione automaticamente o seu próprio CSS de modo claro ou escuro personalizado. O código CSS de exemplo é apresentado em Verificar se existem problemas de contraste com tema escuro e tema claro.

Emular o modo escuro ou claro com a ferramenta de Composição

  1. Para abrir o DevTools, clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

  2. Em DevTools, na Barra de Atividade ou na Vista Rápida, selecione o separador Composição . Se esse separador não estiver visível, clique no botão Mais ferramentas (ícone Mais ferramentas).

  3. Na lista pendente Emular multimédia CSS prefers-color-scheme, selecione prefers-color-scheme: dark or prefers-color-scheme: light:

    Emular o modo escuro ou claro com a ferramenta de Composição

    A página Web composta é composta como se o utilizador tivesse selecionado o modo escuro ou claro no sistema operativo. A página Web utiliza o CSS que especificou para esse modo.

  4. Modifique o CSS e veja o resultado composto da mesma forma que em qualquer outra página Web. Veja Introdução à visualização e alteração do CSS.

  5. Para restaurar a definição, na ferramenta Composição , na lista pendente Emular suporte de dados CSS prefers-color-scheme , selecione Sem emulação. A definição do seu próprio sistema operativo para o modo claro ou escuro é aplicada.

Emular o modo escuro ou claro com o Menu de Comandos

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

  2. Escreva escuro, claro ou emulação, selecione Emular CSS prefers-color-scheme: escuro ou Emular CSS prefers-color-scheme: light e, em seguida, prima Enter:

    Emular o modo escuro ou claro com os comandos

    A página Web composta é composta como se o utilizador tivesse selecionado o modo escuro ou claro no sistema operativo. A página Web utiliza o CSS que especificou para esse modo.

    Selecione um comando Composição em vez de um comando Aspeto . Os comandos de Composição afetam a página Web composta em desenvolvimento. Em vez disso, os comandos Aspeto afetam a parte DevTools da janela.

  3. Modifique o CSS e veja o resultado composto da mesma forma que em qualquer outra página Web. Veja Introdução à visualização e alteração do CSS.

  4. Para restaurar a definição, no Menu de Comandos, escreva emular ou esquema e, em seguida, selecione Não emular CSS prefers-color-scheme. A definição do seu próprio sistema operativo para o modo claro ou escuro é aplicada.

Confira também

A ferramenta de Composição também é utilizada para as seguintes tarefas: