Como Hackear e Personalizar o Tema das Ferramentas de Desenvolvimento do Firefox
Os temas são uma coisa pessoal para nós, desenvolvedores, não se trata apenas do embelezamento de editores ou ferramentas. É sobre tornar a tela que estaremos olhando (sem piscar muito) mais suportável para trabalhar por horas a fio e de maneira produtiva. O Firefox tem dois temas para ferramentas de desenvolvimento: escuro e claro. Ambos são ótimos, mas as opções ainda são limitadas sem uma maneira de personalizá-las.
Agora, o Firefox usa uma combinação de XUL e CSS para sua interface do usuário, o que significa que a maioria de sua aparência pode ser ajustada usando apenas CSS. O Mozilla fornece uma maneira para os usuários configurarem a aparência de seus produtos com um arquivo CSS chamado "userChrome.css". Você pode adicionar regras de estilo personalizadas para esse arquivo CSS e isso será refletido nos produtos da Mozilla.
Nesta postagem, usaremos esse mesmo arquivo CSS para personalizar as ferramentas do desenvolvedor no Firefox.
Primeiro, precisamos encontrar esse arquivo CSS ou criar um e colocá-lo no lugar certo. Uma maneira rápida de encontrar a pasta que hospedará "userChrome.css" é acessando sobre: suporte no navegador e clicando no botão "Mostrar pasta" ao lado do rótulo "Pasta de perfil". Isso abrirá a pasta de perfil atual do Firefox.
Na pasta de perfil, você verá uma pasta chamada "chrome". Se não estiver lá, crie um e crie um "userChrome.css" nele. Agora que a configuração do arquivo está pronta, vamos passar para o código.
: root.theme-dark - tema-corpo-fundo: # 050607! importante; - tema-barra lateral-fundo: # 101416! importante; --theme-tab-toolbar-background: # 161A1E! importante; --theme-toolbar-background: # 282E35! importante; - tema-seleção-fundo: # 478DAD! important; --theme-body-color: # D6D6D6! importante; --theme-body-color-alt: # D6D6D6! importante; --theme-content-color1: # D6D6D6! importante; --theme-content-color2: # D6D6D6! importante; --theme-content-color3: # D6D6D6! importante; --theme-highlight-green: # 8BF9A6! importante; --theme-highlight-blue: # 00F9FF! importante; --theme-highlight-bluegrey: branco! importante; --theme-highlight-lightorange: # FF5A2C! importante; --theme-highlight-orange: amarelo! importante; --theme-highlight-red: # FF1247! importante; --theme-highlight-pink: # F02898! importante;
O que você vê acima é o código que adicionei ao meu arquivo "userChrome.css" para alterar a aparência das ferramentas dos desenvolvedores
para isso:
Eu só queria melhorar o contraste um pouco mais com fundo mais escuro e texto mais claro no tema escuro (também não sou bom em esquemas de cores), então fiquei com algumas cores básicas normalmente usadas em temas escuros. Se você é melhor com cores, experimente por conta própria com as cores que achar melhor para encontrar uma correspondência melhor para o tema que está usando.
O código é apenas uma lista de variáveis de cores CSS usadas para colorir as várias partes da interface do DevTools. Encontramos o código em um arquivo chamado "variables.css" em um arquivo compactado chamado “omni.ja”:
No Windows, o arquivo está localizado em:
F: /firefox/browser/omni.ja. Substitua o F: com a unidade onde você instalou o seu Firefox em.
No OSX, o arquivo está localizado em:
~ / Aplicativos / Firefox.app / Contents / Resources / browser / omni.ja.
Esses são arquivos Java compactados. No Windows, você pode renomear .ja extensão para .fecho eclair e use o utilitário de extração nativo do Windows Explorer para descarregar os arquivos dentro dele. No OSX, vá para o Terminal e execute descompacte omni.ja. Lembre-se de fazer uma cópia do arquivo em outro diretório antes de fazer isso.
Depois que o omni.ja for extraído, você pode encontrar o arquivo em /chrome/devtools/skin/variables.css; sim, a capa do Firefox DevTools está sob uma pasta chamada cromada. No variables.css, você verá um monte de variáveis de cores usadas para os temas claro e escuro da seguinte forma
: root.theme-light --theme-body-background: #fcfcfc; --theme-sidebar-background: # f7f7f7; - fundo de contraste-tema: # e6b064; --theme-tab-toolbar-background: #beced; --theme-toolbar-background: # f0f1f2; - tema-seleção-fundo: # 4c9ed9; - tema-seleção-fundo-semitransparente: rgba (76, 158, 217, .23); - cor da seleção do tema: # f5f7fa; --theme-splitter-color: #aaaaaa; --meum comentário: # 757873; --theme-body-colour: # 18191a; --temme-corpo-cor-alt: # 585959; --temme-conteúdo-cor1: # 292e33; --theme-content-color2: # 8fa1b2; --temme-conteúdo-cor3: # 667380; --theme-highlight-green: # 2cbb0f; --theme-highlight-blue: # 0088cc; --theme-highlight-bluegrey: # 0072ab; --theme-highlight-purple: # 5b5fff; --theme-highlight-lightorange: # d97e00; --theme-highlight-orange: # f13c00; --theme-highlight-red: # ed2655; --theme-highlight-pink: # b82ee5; / * Cores usadas em gráficos, como ferramentas de desempenho. Cores semelhantes à linha do tempo do Chrome. * / --theme-graphs-green: # 85d175; --theme-graphs-blue: # 83b7f6; --theme-graphs-bluegrey: # 0072ab; --theme-graphs-purple: # b693eb; --theme-graphs-yellow: # efc052; --theme-graphs-orange: # d97e00; --theme-graphs-red: # e57180; --theme-graphs-grey: #cccccc; --theme-graphs-full-red: # f00; --theme-graphs-full-blue: # 00f; : root.theme-dark --theme-body-background: # 14171a; - fundo da teia-barra lateral: # 181d20; - fundo de contraste-tema: # b28025; --theme-tab-toolbar-background: # 252c33; --theme-toolbar-background: # 343c45; - tema-seleção-fundo: # 1d4f73; - tema-seleção-fundo-semitransparente: rgba (29, 79, 115, .5); - cor da seleção do tema: # f5f7fa; --theme-splitter-color: preto; --meum comentário: # 757873; --theme-body-color: # 8fa1b2; --theme-body-color-alt: # b6babf; --theme-content-color1: # a9bacb; --theme-content-color2: # 8fa1b2; --temme-conteúdo-cor3: # 5f7387; --theme-highlight-green: # 70bf53; --theme-highlight-blue: # 46afe3; --theme-highlight-bluegrey: # 5e88b0; --theme-highlight-purple: # 6b7abb; --theme-highlight-lightorange: # d99b28; --theme-highlight-orange: # d96629; --theme-highlight-red: # eb5368; --theme-highlight-pink: # df80ff; / * Cores usadas em gráficos, como ferramentas de desempenho. Principalmente semelhante a algumas cores "highlight- *". * / --theme-graphs-green: # 70bf53; --theme-graphs-blue: # 46afe3; --theme-graphs-bluegrey: # 5e88b0; --theme-graphs-purple: # df80ff; --theme-graphs-yellow: # d99b28; --theme-graphs-orange: # d96629; --theme-graphs-red: # eb5368; --theme-graphs-grey: # 757873; --theme-graphs-full-red: # f00; --theme-graphs-full-blue: # 00f;
Escolha o tema e as variáveis que você deseja segmentar e adicione-os ao seu "userChrome.css".
Aqui estão mais algumas capturas de tela da janela das minhas ferramentas de desenvolvedor.
