Jak włamać się i spersonalizować motyw Firefoksa na narzędzia programistyczne
Motywy to osobista sprawa dla nas, programistów, nie chodzi tylko o upiększanie edytorów czy narzędzi. Chodzi o to, aby ekran, na który będziemy wpatrywać się (bez mrugania), był bardziej znośny do pracy przez wiele godzin w sposób produktywny. Firefox ma dwa motywy dla narzędzi programistycznych: ciemny i jasny. Oba są świetne, ale opcje są nadal ograniczone bez możliwości ich personalizacji.
Teraz Firefox wykorzystuje kombinację XUL i CSS dla swojego interfejsu użytkownika, co oznacza, że większość jego wyglądu można zmodyfikować za pomocą CSS. Mozilla zapewnia użytkownikom możliwość konfiguracji wyglądu swoich produktów za pomocą pliku CSS o nazwie „userChrome.css”. Możesz dodaj własne reguły stylu do tego pliku CSS i będzie to odzwierciedlone w produktach Mozilli.
W tym poście wykorzystamy ten sam plik CSS, aby spersonalizować narzędzia programistyczne w Firefoksie.
Najpierw musimy znaleźć ten plik CSS, albo utworzyć go i umieścić we właściwym miejscu. Jednym z szybkich sposobów na znalezienie folderu, w którym znajduje się „userChrome.css”, jest przejście do about: wsparcie w przeglądarce i kliknięcie przycisku „Pokaż folder” obok etykiety „Folder profilu”. Spowoduje to otwarcie bieżącego folderu profilu Firefoksa.
W folderze profilu zobaczysz folder o nazwie „chrome”. Jeśli go tam nie ma, utwórz go i utwórz w nim „userChrome.css”. Po skonfigurowaniu pliku przejdźmy do kodu.
: root.theme-dark --theme-body-background: # 050607! important; --theme-sidebar-background: # 101416! important; --theme-tab-toolbar-background: # 161A1E! important; --theme-toolbar-background: # 282E35! important; --theme-selection-background: # 478DAD! important; --theme-body-color: # D6D6D6! important; --theme-body-color-alt: # D6D6D6! important; --theme-content-color1: # D6D6D6! important; --theme-content-color2: # D6D6D6! important; --theme-content-color3: # D6D6D6! important; --theme-highlight-green: # 8BF9A6! important; --theme-highlight-blue: # 00F9FF! important; --theme-highlight-bluegrey: white! important; --theme-highlight-lightorange: # FF5A2C! important; --theme-highlight-orange: yellow! important; --theme-highlight-red: # FF1247! important; --theme-highlight-pink: # F02898! important;
To, co widzisz powyżej, to kod, który dodałem do mojego pliku „userChrome.css”, aby zmienić wygląd narzędzi programistów z tego pliku
do tego:
Chciałem tylko poprawić kontrast nieco ciemniejszym tłem i jaśniejszym tekstem w ciemnym motywie (również nie jestem dobry w schematach kolorów), więc pozostałem przy niektórych podstawowych kolorach zwykle używanych w ciemnych motywach. Jeśli jesteś lepszy z kolorami, eksperymentuj sam z kolorami, które uznasz za stosowne, aby znaleźć lepsze dopasowanie do używanego motywu.
Kod jest tylko listą zmiennych kolorów CSS używanych do pokolorowania różnych części interfejsu użytkownika DevTools. Znaleźliśmy kod w pliku o nazwie „variables.css” w skompresowanym pliku o nazwie “omni.ja”:
W systemie Windows plik znajduje się pod adresem:
F: /firefox/browser/omni.ja. Zastąp FA: z dyskiem, na którym zainstalowano Firefoksa.
W OSX plik znajduje się pod adresem:
~ / Applications / Firefox.app / Contents / Resources / browser / omni.ja.
Są to skompresowane pliki Java. W systemie Windows możesz zmienić nazwę .ja rozszerzenie do .zamek błyskawiczny i użyj natywnego narzędzia do wyodrębniania Eksploratora Windows do wyładowania znajdujących się w nim plików. W OSX przejdź do Terminal i uruchom unzip omni.ja. Pamiętaj, aby zrobić kopię pliku w innym katalogu, zanim to zrobisz.
Po wyodrębnieniu omni.ja możesz znaleźć plik pod adresem /chrome/devtools/skin/variables.css; tak, skórka Firefox DevTools znajduje się w folderze o nazwie chrom. w variables.css, zobaczysz kilka zmiennych kolorów używanych zarówno w jasnych, jak i ciemnych motywach w następujący sposób
: 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; -theme-selection-background-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; / * Kolory używane w wykresach, podobnie jak narzędzia wydajności. Podobne kolory do osi czasu 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; -theme-selection-background-semitransparent: rgba (29, 79, 115, .5); --theme-selection-color: # f5f7fa; - kolor-splitter-kolor: czarny; --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; / * Kolory używane w wykresach, podobnie jak narzędzia wydajności. Przeważnie podobny do niektórych kolorów „podświetlanych *”. * / - 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;
Wybierz motyw i zmienne, na które chcesz kierować, i dodaj je do swojego „userChrome.css”.
Oto kilka zrzutów ekranu okna moich narzędzi programistycznych.
