Jak zaseknout a přizpůsobit téma Firefox Developer Tools

Témata jsou pro nás vývojáře osobní, není to jen o zkrášlování editorů nebo nástrojů. Jde o to, aby se na obrazovce, na kterou budeme hledět (bez toho, aby mrkl hodně), bylo snesitelnější pracovat celé hodiny na konci a produktivním způsobem. Firefox má dvě nástroje pro vývojářské nástroje: tmavé a světlé. Oba jsou skvělé, ale možnosti jsou stále omezené, aniž by je bylo možné personalizovat.

Firefox nyní používá pro své uživatelské rozhraní kombinaci XUL a CSS, což znamená, že většina jeho vzhledu může být vylepšena pomocí CSS. Mozilla umožňuje uživatelům konfigurovat vzhled produktů pomocí souboru CSS s názvem "userChrome.css". Můžeš přidat vlastní pravidla stylu do tohoto souboru CSS a to se projeví na produktech Mozilla.

V tomto příspěvku budeme používat stejný soubor CSS k personalizaci vývojářských nástrojů ve Firefoxu.

Nejprve musíme najít ten CSS soubor, nebo ho vytvořit a dát na správné místo. Jeden rychlý způsob, jak najít složku, která bude dům "userChrome.css" je tím, že bude o: podpora v prohlížeči a kliknutím na tlačítko "Zobrazit složku" vedle štítku "Složka profilu". Otevře se aktuální složka profilu Firefoxu.

Ve složce profilu se zobrazí složka s názvem „chrome“. Pokud tam není, vytvořte ho a vytvořte v něm "userChrome.css". Nyní, když je nastavení souboru dokončeno, přejdeme na kód.

: root.theme-dark --theme-body-background: # 050607! important; --theme-sidebar-background: # 101416! -theme-tab-toolbar-background: # 161A1E! -theme-toolbar-background: # 282E35! --theme-selection-background: # 478DAD! --theme-body-color: # D6D6D6! --theme-body-color-alt: # D6D6D6! důležité; --theme-content-color1: # D6D6D6! důležité; --theme-content-color2: # D6D6D6! --theme-content-color3: # D6D6D6! důležité; --theme-highlight-green: # 8BF9A6! --theme-highlight-blue: # 00F9FF! --theme-highlight-bluegrey: bílá! --theme-highlight-lightorange: # FF5A2C! --theme-highlight-orange: žlutá! --theme-highlight-red: # FF1247! --theme-highlight-pink: # F02898! 

To, co vidíte výše, je kód, který jsem přidal do souboru "userChrome.css", aby se změnil vzhled vývojářských nástrojů z tohoto

k tomuto:

Chtěl jsem jen zlepšit kontrast o něco tmavší pozadí a jasnější text v tmavém motivu (také nejsem dobrý v barevných schématech), takže jsem zůstal s některými základními barvami obvykle používanými v temných motivech. Pokud jste s barvami lepší, experimentujte sami s barvami, které jsou vhodné pro nalezení lepší shody s motivem, který používáte.

Kód je pouze seznam CSS barevných proměnných používaných k barvení různých částí uživatelského rozhraní DevTools. Našli jsme kód v souboru s názvem "variable.css" v komprimovaném souboru s názvem “omni.ja”:

V systému Windows je soubor umístěn na adrese:

F: /firefox/browser/omni.ja. Nahradit F: s jednotkou, do které jste nainstalovali Firefox.

V OSX je soubor umístěn na adrese:

~ / Applications / Firefox.app / Obsah / Zdroje / browser / omni.ja.

Jedná se o komprimované soubory jazyka Java. Ve Windows můžete přejmenovat .ja rozšíření na .zip a použít nativní nástroj pro extrahování průzkumníků Windows, aby se soubory v něm mohly uvolnit. V OSX, jít do terminálu a spustit unzip omni.ja. Než tak učiníte, nezapomeňte vytvořit kopii souboru v jiném adresáři.

Jakmile omni.ja byl extrahován, můžete najít soubor na adrese /chrome/devtools/skin/variables.css; ano, Firefox DevTools skin je pod pojmenovanou složkou chrom. V variables.css, Uvidíte spoustu barevných proměnných používaných jak pro světlá, tak i pro temná témata následujícím způsobem

 : root.theme-light --theme-body-background: #fcfcfc; -theme-sidebar-background: # f7f7f7; --theme-contrast-background: # e6b064; -theme-tab-toolbar-background: #ebeced; -theme-toolbar-background: # f0f1f2; --theme-selection-background: # 4c9ed9; -téma-selekce-pozadí-semitransparent: rgba (76, 158, 217, .23); --theme-selection-color: # f5f7fa; --theme-splitter-color: #aaaaaa; --theme-comment: # 757873; -theme-body-color: # 18191a; --theme-body-color-alt: # 585959; -theme-content-color1: # 292e33; --theme-content-color2: # 8fa1b2; --theme-content-color3: # 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; / * Barvy použité v grafech, jako nástroje výkonu. Podobné barvy na časové ose 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-gray: #cccccc; -theme-graphs-full-red: # f00; -theme-graphs-full-blue: # 00f; : root.theme-dark --theme-body-background: # 14171a; -theme-sidebar-background: # 181d20; -theme-contrast-background: # b28025; -theme-tab-toolbar-background: # 252c33; -theme-toolbar-background: # 343c45; -theme-selection-background: # 1d4f73; -téma-výběr-pozadí-semitransparent: rgba (29, 79, 115, .5); --theme-selection-color: # f5f7fa; -theme-splitter-color: černá; --theme-comment: # 757873; -theme-body-color: # 8fa1b2; --theme-body-color-alt: # b6babf; --theme-content-color1: # a9bacb; --theme-content-color2: # 8fa1b2; --theme-content-color3: # 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; / * Barvy použité v grafech, jako nástroje výkonu. Většinou se podobají některým „zvýrazněným“ barvám. * / --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-gray: # 757873; -theme-graphs-full-red: # f00; -theme-graphs-full-blue: # 00f;  

Vyberte téma a proměnné, na které chcete cílit, a přidejte je do svého "userChrome.css".

Zde je několik dalších obrázků z okna vývojářských nástrojů.