เครื่องมือสำหรับนักพัฒนา Mozilla Firefox มีธีมที่แตกต่างกันสองแบบคือแบบสว่างและแบบมืด ความมืดเป็นธีมเริ่มต้นสำหรับนักพัฒนา Firefox แสงเป็นธีมเริ่มต้นสำหรับ Firefox ปกติ
ฉันต้องการค้นหาสไตล์ชีทจริง (สมมติว่าสไตล์เหล่านี้มีสไตล์ชีท) เพื่อแก้ไข ฉันกำลังใช้งาน Windows อยู่ในขณะนี้และฉันคิดว่าเนื่องจากฉันไม่สามารถค้นหาพวกเขาใน appData ว่าพวกเขาจะต้องอยู่ใน. exe or.dll บางตัวที่ฉันสามารถเข้าถึงได้โดยใช้แฮ็คทรัพยากร
คำตอบ:
รูปแบบสำหรับ DevTools ใน Mozilla อยู่ใน omni.ja ไฟล์ซิป
มีสองไฟล์ omni.ja:
ไม่ใช่อันนี้: "C: \ Program Files \ Mozilla Firefox \ omni.ja"
อันนี้: "C: \ Program Files \ Mozilla Firefox \ browser \ omni.ja"
ไม่ต้องการแฮกเกอร์ res พวกเขาเป็นไฟล์ CSS
ให้ฉันแสดงตัวอย่างเกี่ยวกับวิธีปรับแต่งหนึ่งในสอง (ณ ตอนนี้) ธีมในบิลด์
ฉันใช้เพื่อค้นหากฎ CSS ในตัวตรวจสอบ DevTools แต่ส่วนใหญ่ฉันสนใจกฎสำหรับ ฉันมักจะไม่ทราบว่าเมื่อฉันเลื่อนผ่านส่วน "สืบทอด ... "
เพื่อช่วยให้ฉันเห็นส่วนหัวได้ดีขึ้นฉันเปลี่ยนสไตล์
คุณสามารถลอง & amp; วิธีการผิดพลาดผ่านไฟล์ css ต่างๆใน omni.ja
แต่มีเครื่องมือที่ยอดเยี่ยมใน Firefox สำหรับวัตถุประสงค์นี้ Browser Toolbox - วิธีเปิดใช้งานและใช้งาน
จากนั้นคุณสามารถใช้ DevTools บน DevTools เพื่อตรวจสอบสารวัตร:
ที่นั่นคุณเห็นมันเป็น .ruleview-header ตัวเลือกซึ่งกำหนดไว้ใน rules.css ไฟล์. คุณสามารถคลิกที่ rules.css เพื่อดูเนื้อหาของมันโดยตรงใน FF
ตอนนี้คุณสามารถใช้:
.ruleview-header {
background: #905252 !important;
color: white !important;
}
หรือตามสไตล์ที่ใช้โดยไฟล์ธีมนี่คือสิ่งที่ฉันใช้:
/* CSS Variables specific to this panel that aren't defined by the themes */
:root {
--rule-header-color: var(--theme-toolbar-color); /* to keep light theme as it was */
}
:root.theme-dark {
/* was: --rule-header-background-color: #222225; */
--rule-header-background-color: #905252 !important;
--rule-header-color: white; /* added */
}
/* Rule View Container */
.ruleview-header {
/* was: color: var(--theme-toolbar-color); */
color: var(--rule-header-color) !important;
}
/* expandable headers will follow the style of .ruleview-header,
but here it can by styled separately */
.ruleview-expandable-header {
/* background-color: YOUR_COLOR !important; */
}
.ruleview-expandable-header:hover {
/* was: background-color: var(--theme-toolbar-background-hover); */
}
จะนำไปวางที่ไหน
userChrome.css ไฟล์และเพิ่ม มันควรจะอยู่ที่ไหน . อย่าลืมใช้! สำคัญในกรณีนี้กับกฎการเขียนทับทั้งหมด โครงสร้างของไฟล์ธีมใน omni.ja:
ไฟล์ในโฟลเดอร์ skin เช่น:
. \ โครเมี่ยม \ devtools \ ผิว \ เข้ม theme.css
เพื่อเปิดอ่านอย่างเดียวใน Firefox: chrome: //devtools/skin/dark-theme.css
และไฟล์ในโฟลเดอร์ชุดรูปแบบเช่น:
. \ โครเมี่ยม \ devtools \ โมดูล \ devtools \ ลูกค้า \ รูปแบบ \ variables.css
ทรัพยากร: //devtools/client/themes/variables.css
(หมายเหตุ: "ทรัพยากร:" แทน "chrome:")