วิธีแฮ็ก & ปรับแต่งธีมเครื่องมือนักพัฒนา 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 --theme-body-background: # 050607 สำคัญ! --theme-sidebar-background: # 101416! สำคัญ; --theme-tab-toolbar-background: # 161A1E! สำคัญ; --theme-toolbar-background: # 282E35! important; --theme-selection-background: # 478DAD! สำคัญ; --theme-body-color: # D6D6D6! สำคัญ; --theme-body-color-alt: # D6D6D6! สำคัญ; --theme-content-color1: # D6D6D6! สำคัญ; --theme-content-color2: # D6D6D6! สำคัญ; --theme-content-color3: # D6D6D6! สำคัญ; --theme-highlight-green: # 8BF9A6 สำคัญ! --theme-highlight-blue: # 00F9FF! สำคัญ; --theme-highlight-bluegrey: white! important; --theme-highlight-lightorange: # FF5A2C! important; - ชุดรูปแบบ - เน้นสีส้ม: สีเหลืองสำคัญ! --theme-highlight-red: # FF1247! important; --theme-highlight-pink: # F02898! สำคัญ; 

สิ่งที่คุณเห็นด้านบนคือรหัสที่ฉันเพิ่มลงในไฟล์ "userChrome.css" ของฉันเพื่อเปลี่ยนรูปลักษณ์ของเครื่องมือสำหรับนักพัฒนาจากสิ่งนี้

สำหรับสิ่งนี้:

ฉันต้องการปรับปรุงความคมชัดของภาพให้มากขึ้นด้วยพื้นหลังสีเข้มและข้อความที่สว่างขึ้นในชุดรูปแบบสีเข้ม (เช่นกันฉันไม่เก่งเรื่องสี) ดังนั้นฉันจึงใช้สีพื้นฐานบางอย่างในธีมสีเข้ม หากคุณเก่งเรื่องสีมากขึ้นลองทดสอบด้วยสีของคุณเองตามที่เห็นสมควรเพื่อหาคู่ที่ตรงกับธีมที่คุณใช้มากขึ้น.

รหัสนี้เป็นเพียงรายการของตัวแปรสี CSS ที่ใช้เพื่อระบายสีส่วนต่าง ๆ ของ UI ของ DevTools เราพบรหัสในไฟล์ชื่อ "variables.css" ในไฟล์บีบอัดชื่อ “omni.ja”:

ใน Windows ไฟล์จะอยู่ที่:

F: /firefox/browser/omni.ja. แทนที่ F: กับไดรฟ์ที่คุณติดตั้ง Firefox ไว้.

ใน OSX ไฟล์จะอยู่ที่:

~ / Applications / Firefox.app / สารบัญ / ทรัพยากรธรรมชาติ / เบราว์เซอร์ / omni.ja.

นี่คือไฟล์ Java ที่ถูกบีบอัด ใน Windows คุณสามารถเปลี่ยนชื่อ .ja ขยายไปยัง .ซิป และใช้ยูทิลิตี้การแยก Windows Explorer ดั้งเดิมเพื่อยกเลิกการโหลดไฟล์ภายใน ใน OSX ไปที่ Terminal และเรียกใช้ เปิดเครื่องรูด omni.ja. โปรดจำไว้ว่าให้ทำสำเนาไฟล์ในไดเรกทอรีอื่นก่อนที่จะทำเช่นนั้น.

เมื่อ omni.ja มีการแยก beeen แล้วคุณสามารถค้นหาไฟล์ได้ที่ /chrome/devtools/skin/variables.css; ใช่สกิน Firefox DevTools อยู่ภายใต้ชื่อโฟลเดอร์ โครเมียม. ใน variables.css, คุณจะเห็นตัวแปรสีจำนวนมากที่ใช้สำหรับทั้งชุดรูปแบบแสงและสีเข้มดังต่อไปนี้

 : 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; - ชุดรูปแบบการเลือกพื้นหลัง - กึ่งโปร่งใส: 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; / * สีที่ใช้ในกราฟเช่นเครื่องมือวัดประสิทธิภาพ สีที่คล้ายกับไทม์ไลน์ของ 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; --theme-sidebar-background: # 181d20; --theme-contrast-background: # b28025; --theme-tab-toolbar-background: # 252c33; --theme-toolbar-background: # 343c45; --theme-selection-background: # 1d4f73; - ชุดรูปแบบการเลือกพื้นหลัง - กึ่งโปร่งใส: rgba (29, 79, 115, .5) --theme-selection-color: # f5f7fa; --theme-splitter-color: ดำ; --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; / * สีที่ใช้ในกราฟเช่นเครื่องมือวัดประสิทธิภาพ ส่วนใหญ่คล้ายกับบางสี "ไฮไลต์ - *" * / --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;  

เลือกชุดรูปแบบและตัวแปรที่คุณต้องการกำหนดเป้าหมายและเพิ่มลงใน "userChrome.css" ของคุณ.

นี่คือภาพหน้าจอเพิ่มเติมของหน้าต่างเครื่องมือสำหรับนักพัฒนาของฉัน.