Πώς να Hack & Προσαρμογή του Firefox Εργαλεία Προγραμματιστή Θέμα

Τα θέματα είναι ένα προσωπικό πράγμα για εμάς τους προγραμματιστές, δεν είναι μόνο για την εξωραϊσμό των εκδόσεων ή των εργαλείων. Πρόκειται για την κατασκευή της οθόνης στην οποία θα κοιτάξουμε (χωρίς να αναβοσβήνουμε πολύ) πιο ανεκτά για να εργαστούμε για ώρες στο τέλος και με παραγωγικό τρόπο. Ο Firefox έχει δύο θέματα για εργαλεία προγραμματιστή: σκοτεινό και ελαφρύ. Και τα δύο είναι υπέροχα, αλλά οι επιλογές είναι ακόμα περιορισμένες χωρίς τρόπο να τις προσωποποιήσετε.

Τώρα, ο Firefox χρησιμοποιεί έναν συνδυασμό του XUL και του CSS για το UI του, πράγμα που σημαίνει ότι το μεγαλύτερο μέρος της εμφάνισής του μπορεί να τροποποιηθεί χρησιμοποιώντας μόνο το CSS. Το Mozilla παρέχει στους χρήστες τη δυνατότητα να ρυθμίσουν την εμφάνιση των προϊόντων τους με ένα αρχείο CSS που ονομάζεται "userChrome.css". Μπορείς προσθέστε κανόνες προσαρμοσμένου στυλ σε αυτό το αρχείο CSS και θα αντικατοπτρίζεται στα προϊόντα Mozilla.

Σε αυτήν την ανάρτηση, θα χρησιμοποιήσουμε το ίδιο αρχείο CSS για να εξατομικεύσουμε τα εργαλεία προγραμματιστών στον Firefox.

Πρώτον, πρέπει να βρούμε αυτό το αρχείο CSS ή να το δημιουργήσουμε και να το βάλουμε στη σωστή θέση. Ένας γρήγορος τρόπος για να βρείτε το φάκελο που θα φιλοξενήσει το "userChrome.css" είναι πηγαίνοντας στο σχετικά με: υποστήριξη στο πρόγραμμα περιήγησης και κάνοντας κλικ στο κουμπί "Εμφάνιση φακέλου" δίπλα στην ετικέτα "Φάκελος προφίλ". Αυτό θα ανοίξει τον τρέχοντα φάκελο προφίλ του Firefox.

Στο φάκελο προφίλ, θα δείτε ένα φάκελο με το όνομα "chrome". Αν δεν υπάρχει, δημιουργήστε ένα και δημιουργήστε ένα "userChrome.css" σε αυτό. Τώρα που έχει γίνει η δημιουργία του αρχείου, ας προχωρήσουμε στον κώδικα.

: root.theme-dark -θέμα-σώμα-φόντο: # 050607! --theme-sidebar-background: # 101416! --theme-tab-toolbar-φόντο: # 161A1E! --theme-toolbar-background: # 282E35! -θέμα-επιλογή-υπόβαθρο: # 478DAD! --Θέμα-σώμα-χρώμα: # D6D6D6! -theme-body-color-alt: # D6D6D6! --Θέμα-περιεχόμενο-χρώμα1: # D6D6D6! --Θέμα-περιεχόμενο-χρώμα2: # D6D6D6! --Θέμα-περιεχόμενο-χρώμα3: # D6D6D6! --Θέμα-φωτισμός-πράσινο: # 8BF9A6! -θέμα-φωτεινό-μπλε: # 00F9FF! -θέμα-επισημανθεί-bluegrey: λευκό! σημαντικό? --theme-highlight-lightorange: # FF5A2C! -θέμα-φωτισμός-πορτοκαλί: κίτρινο! --theme-highlight-κόκκινο: # FF1247! --theme-highlight-ροζ: # F02898! 

Αυτό που βλέπετε παραπάνω είναι ο κώδικας που πρόσθεσα στο αρχείο "userChrome.css" μου για να αλλάξω την εμφάνιση των εργαλείων προγραμματιστών από αυτό

σε αυτό:

Ήθελα μόνο να βελτιώσω την αντίθεση λίγο περισσότερο με πιο σκούρο φόντο και φωτεινότερο κείμενο στο σκοτεινό θέμα (επίσης δεν είμαι καλός στα σχέδια χρωμάτων), έτσι έμεινα με μερικά βασικά χρώματα που συνήθως χρησιμοποιούνται σε σκοτεινά θέματα. Αν είστε καλύτερα με τα χρώματα, πειραματιστείτε μόνοι σας με τα χρώματα που θεωρείτε κατάλληλα για να βρείτε μια καλύτερη αντιστοιχία για το θέμα που χρησιμοποιείτε.

Ο κώδικας είναι απλά ένας κατάλογος των μεταβλητών χρώματος CSS που χρησιμοποιούνται για το χρωματισμό των διαφόρων τμημάτων UI των DevTools. Βρήκαμε τον κώδικα σε ένα αρχείο που ονομάζεται "variables.css" σε ένα συμπιεσμένο αρχείο που ονομάζεται “omni.ja”:

Στα Windows, το αρχείο βρίσκεται στο:

F: /firefox/browser/omni.ja. Αντικαταστήστε το ΦΑ: με τη μονάδα δίσκου όπου έχετε εγκαταστήσει τον Firefox σας.

Στο OSX, το αρχείο βρίσκεται στο:

~ / Εφαρμογές / Firefox.app / Περιεχόμενα / Πόροι / πρόγραμμα περιήγησης / omni.ja.

Αυτά είναι τα συμπιεσμένα αρχεία Java. Στα Windows, μπορείτε να μετονομάσετε το .Εγώ επέκταση σε .φερμουάρ και χρησιμοποιήστε το βοηθητικό πρόγραμμα εξόδου του Windows Explorer για να ξεφορτώσετε τα αρχεία μέσα σε αυτό. Στο OSX, μεταβείτε στο Terminal και τρέξτε unzip omni.ja. Έχετε υπόψη σας να κάνετε ένα αντίγραφο του αρχείου σε έναν άλλο κατάλογο πριν κάνετε κάτι τέτοιο.

Μόλις εξάγεται το omni.ja, μπορείτε να βρείτε το αρχείο στο /chrome/devtools/skin/variables.css. ναι, το δέρμα του Firefox DevTools βρίσκεται κάτω από ένα φάκελο που ονομάζεται χρώμιο. Στο variables.css, θα δείτε μια δέσμη μεταβλητών χρώματος που χρησιμοποιούνται τόσο για τα ελαφρά όσο και για τα σκοτεινά θέματα ως εξής

 : root.theme-φως -θέμα-σώμα-φόντο: # fcfcfc; -theme-sidebar-background: # f7f7f7; -θέμα-φόντο φόντου: # e6b064; -θέμα-καρτέλα-γραμμή-εργαλείο-φόντο: #ebeced; -theme-toolbar-background: # f0f1f2; -θέμα-επιλογή-φόντο: # 4c9ed9; - επιλογή θεμάτων - ημιπερατό υπόβαθρο: rgba (76, 158, 217, .23). -θέμα-επιλογή-χρώμα: # f5f7fa; -Θέμα-διαχωριστικό-χρώμα: #aaaaaa; - θεματικό σχόλιο: # 757873; -θέμα-σώμα-χρώμα: # 18191a; -theme-body-color-alt: # 585959; --Θέμα-περιεχόμενο-χρώμα1: # 292e33; -θέμα-περιεχόμενο-χρώμα2: # 8fa1b2; -Θέμα-περιεχόμενο-χρώμα3: # 667380; -θέμα-φωτεινό-πράσινο: # 2cbb0f; -θέμα-φωτεινό-μπλε: # 0088cc; -θέμα-επισήμανση-bluegrey: # 0072ab; -θέμα-φωτισμός-μοβ: # 5b5fff; -theme-highlight-lightorange: # d97e00; -theme-highlight-πορτοκαλί: # f13c00; -θέμα-φωτισμός-κόκκινο: # ed2655; -thethe-highlight-ροζ: # b82ee5; / * Χρώματα που χρησιμοποιούνται σε γραφήματα, όπως τα εργαλεία απόδοσης. Παρόμοια χρώματα με το χρονοδιάγραμμα του Chrome. * / - θεματικά γράμματα-πράσινο: # 85d175; - θεματικές γραφικές παραστάσεις-μπλε: # 83b7f6; - θεματικές γραφικές παραστάσεις-γαλάζιο: # 0072ab; - θεματικά γράμματα-μοβ: # b693eb; - γραφήματα θεμάτων-κίτρινο: # efc052; -Θέματα-γραφήματα-πορτοκαλί: # d97e00; --Θέα-γραφήματα-κόκκινο: # e57180; -Θέματα-γραφήματα-γκρι: #cccccc; - θεματικές γραφικές παραστάσεις: πλήρης-κόκκινο: # f00; - θεματικές γραφικές παραστάσεις - πλήρης-μπλε: # 00f; : root.theme-σκοτεινό -θέμα-σώμα-φόντο: # 14171a; -theme-sidebar-background: # 181d20; -θέμα-φόντο-αντίθεση: # b28025; -theme-tab-toolbar-φόντο: # 252c33; -theme-toolbar-background: # 343c45; -θέμα-επιλογή-φόντο: # 1d4f73; - επιλογή θέματος-υπόβαθρο-ημιδιαφανές: rgba (29, 79, 115, .5); -θέμα-επιλογή-χρώμα: # f5f7fa; -Θέμα-διαχωριστικό-χρώμα: μαύρο. - θεματικό σχόλιο: # 757873; -θέμα-σώμα-χρώμα: # 8fa1b2; -theme-body-color-alt: # b6babf; -θέμα-περιεχόμενο-χρώμα1: # a9bacb; -θέμα-περιεχόμενο-χρώμα2: # 8fa1b2; -θέμα-περιεχόμενο-χρώμα3: # 5f7387; -θέμα-φωτισμός-πράσινο: # 70bf53; -θέμα-φωτεινό-μπλε: # 46afe3; -θέμα-ανασηκώστε-bluegrey: # 5e88b0; -θέμα-φωτισμός-μοβ: # 6b7abb; -θέμα-φωτισμός-φωτισμός: # d99b28; -thetheme-highlight-orange: # d96629; -θέμα-φωτισμός-κόκκινο: # eb5368; -theme-highlight-ροζ: # df80ff; / * Χρώματα που χρησιμοποιούνται σε γραφήματα, όπως τα εργαλεία απόδοσης. Κυρίως παρόμοια με ορισμένα χρώματα "highlight- *". * / - θεματικά γράμματα-πράσινο: # 70bf53; - θεματικές γραφικές παραστάσεις-μπλε: # 46afe3; - θεματικά γράμματα-γαλάζιο: # 5e88b0; - θεματικά γράμματα-μοβ: # df80ff; - θεματικές γραφικές παραστάσεις - κίτρινο: # d99b28; -Θέματα-γραφήματα-πορτοκαλί: # d96629; --Θέα-γραφήματα-κόκκινο: # eb5368; -Θέματα-γραφήματα-γκρι: # 757873; - θεματικές γραφικές παραστάσεις: πλήρης-κόκκινο: # f00; - θεματικές γραφικές παραστάσεις - πλήρης-μπλε: # 00f;  

Επιλέξτε το θέμα και τις μεταβλητές που θέλετε να στοχεύσετε και προσθέστε τις στο "userChrome.css".

Ακολουθούν μερικά screenshots του παραθύρου των εργαλείων μου για προγραμματιστές.