Aplicar um tema de cor ao DevTools

  • Artigo

Você pode aplicar vários temas de cor ao Microsoft Edge DevTools, incluindo vários temas de Visual Studio Code, como Monokai e Solarized Dark. Os temas afetam a cor dos painéis, botões e realçamento da sintaxe de código.

Este artigo trata da alteração da aparência de DevTools. Para, em vez disso, alterar como a página da Web em desenvolvimento é exibida, consulte Emular esquemas escuros ou claros na página renderizada.

Temas disponíveis

Por padrão, o tema DevTools é definido como Preferência do sistema (também chamado de tema de cor preferencial do sistema). Se o sistema operacional estiver definido como tema Light, o DevTools usará o tema Light+ . Se o sistema operacional estiver definido como tema Escuro, o DevTools usará o tema Dark+ . No entanto, você pode alterar DevTools para qualquer um dos vários outros temas, de modo que o DevTools não seja afetado quando você definir o sistema operacional como tema Claro ou Escuro.

Temas leves:

  • Light+ (Padrão)
  • Luz Silenciosa
  • Luz solarizada

Temas escuros:

  • Escuro+ (Padrão)
  • Abismo
  • Kimbie Dark
  • Monokai
  • Monokai Dimmed
  • Vermelho
  • Escuro solarizado
  • Tomorrow Night Blue

A captura de tela a seguir mostra quatro temas diferentes de DevTools, do canto superior esquerdo para o canto inferior direito: Tomorrow Night Blue, Kimbie Dark, Solarized Dark e Red:

Quatro janelas do Microsoft Edge, cada uma com DevTools aberta, e cada uma com um tema de cor DevTools diferente

Alterando o tema de cor de Configurações

  1. Em DevTools, clique no botão Personalizar e controlar DevTools (ícone Personalizar e controlar DevTools) e clique no botão Configurações (ícone Configurações). Ou pressione F1.

    O ícone Configurações (engrenagem)

  2. Selecione Preferências e, na seção Aparência , selecione um tema na lista suspensa Tema :

    Selecionando um tema em Preferências

Alterando o tema de cor do Menu de Comando

Para usar o Menu de Comando para alterar qual tema de cor é aplicado a DevTools:

  1. Em DevTools, abra o Menu de Comando, como pressionando Ctrl+Shift+P (Windows/Linux) ou Command+Shift+P (macOS).

  2. Comece a digitar themee selecione um comando Appearance, como o tema Alternar para o Abyss ou Alternar para Light+ (Padrão):

A lista de temas no Menu de Comando

  1. Pressione Enter.

Veja também:

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Internacional de Atribuição do Creative Commons 4.0. A página original é encontrada aqui e é de autoria de Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Licença Creative Commons Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.