كيفية هاك وتخصيص موضوع أدوات المطور فايرفوكس

المظاهر هي شيء شخصي لنا نحن المطورين ، ولا يتعلق الأمر فقط بتجميل المحررين أو الأدوات. يتعلق الأمر بجعل الشاشة التي سنحدق بها (دون أن نرمش كثيرًا) أكثر احتمالًا للعمل لساعات متتالية وبطريقة منتجة. يحتوي Firefox على موضوعين لأدوات المطورين: الظلام والضوء. كلاهما رائع ، لكن الخيارات لا تزال محدودة دون تخصيصها.

الآن ، يستخدم Firefox مجموعة من XUL و CSS في واجهة المستخدم الخاصة به ، مما يعني أن معظم مظهره يمكن تعديله باستخدام CSS فقط. توفر Mozilla طريقة للمستخدمين لتكوين مظهر منتجاتها بملف CSS يسمى "userChrome.css". يمكنك إضافة قواعد نمط مخصص إلى ملف CSS وسوف تنعكس على منتجات موزيلا.

في هذا المنشور ، سنستخدم ملف CSS نفسه لتخصيص أدوات المطور في Firefox.

أولاً ، نحتاج إلى العثور على ملف CSS ، أو إنشاء ملف ووضعه في المكان المناسب. إحدى الطرق السريعة للعثور على المجلد الذي سيضم "userChrome.css" هي الانتقال إلى حول: دعم في المتصفح و النقر على زر "إظهار المجلد" بجوار التسمية "مجلد ملفات التعريف". سيؤدي هذا إلى فتح مجلد ملف التعريف الحالي في Firefox.

في مجلد ملف التعريف ، سترى مجلدًا باسم "chrome". إذا لم يكن هناك ، فقم بإنشاء واحد وإنشاء "userChrome.css" فيه. الآن وبعد الانتهاء من إعداد الملف ، دعنا ننتقل إلى الرمز.

: root.theme-dark --theme-body-background: # 050607! important؛ - خلفية الشريط الجانبي - الخلفية: # 101416! --theme-tab-toolbar-background: # 161A1E! - شريط الأدوات - الخلفية: # 282E35! - موضوع اختيار الخلفية: # 478DAD! - موضوع الجسم اللون: # D6D6D6! --theme-body-color-alt: # D6D6D6! --theme-content-color1: # D6D6D6! --theme-content-color2: # D6D6D6! --theme-content-color3: # D6D6D6! - تسليط الضوء على الأخضر: # 8BF9A6! - تسليط الضوء على الأزرق: # 00F9FF! - موضوع تسليط الضوء على bluegrey: أبيض! - تسليط الضوء على lightorange: # FF5A2C! - تسليط الضوء على اللون البرتقالي: الأصفر! - تسليط الضوء على الأحمر: # FF1247! - موضوع تسليط الضوء على الوردي: # F02898! 

ما تراه أعلاه هو الرمز الذي أضفته إلى ملف "userChrome.css" لتغيير مظهر أدوات المطورين من هذا

الى هذا:

أردت فقط تحسين التباين أكثر قليلاً مع خلفية أغمق ونص أكثر إشراقًا في النسق الغامق (كما أنني لست جيدًا في أنظمة الألوان) ، لذلك بقيت مع بعض الألوان الأساسية المستخدمة عادة في النسق الغامقة. إذا كنت أفضل من الألوان ، جرب بنفسك الألوان كما تراه مناسبًا لإيجاد تطابق أفضل للموضوع الذي تستخدمه.

الكود هو مجرد قائمة من متغيرات ألوان CSS المستخدمة لتلوين مختلف أجزاء واجهة المستخدم في DevTools. وجدنا الرمز في ملف يسمى "variables.css" في ملف مضغوط باسم “omni.ja”:

في نظام Windows ، يوجد الملف في:

F: /firefox/browser/omni.ja. استبدال F: باستخدام محرك الأقراص الذي قمت بتثبيت Firefox به.

في OSX ، يوجد الملف في:

~ / تطبيقات / Firefox.app / المحتويات / الموارد / المتصفح / omni.ja.

هذه ملفات Java مضغوطة. في ويندوز ، يمكنك إعادة تسمية .جا تمديد ل .الرمز البريدي واستخدم أداة استخراج مستكشف Windows الأصلية لإلغاء تحميل الملفات الموجودة داخلها. في OSX ، انتقل إلى المحطة الطرفية وتشغيلها بفك omni.ja. ضع في اعتبارك عمل نسخة من الملف في دليل آخر قبل القيام بذلك.

بمجرد استخراج omni.ja ، يمكنك العثور على الملف في /chrome/devtools/skin/variables.css. نعم ، يوجد إطار Firefox DevTools أسفل مجلد باسمه كروم. في ال variables.css, سترى مجموعة من متغيرات الألوان المستخدمة لكل من المظاهر الخفيفة والمظلمة على النحو التالي

 : root.theme-light --theme-body-background: #fcfcfc؛ --theme sidebar-background: # f7f7f7؛ --theme -rast-background: # e6b064؛ --theme-tab-toolbar-background: #ebeced؛ --theme-toolbar-background: # f0f1f2؛ --theme-background-background: # 4c9ed9؛ --theme-background-background-semitransparent: rgba (76، 158، 217، .23)؛ --theme-color-color: # f5f7fa؛ --theme-splitter-color: #aaaaaa؛ - موضوع التعليق: # 757873 ؛ - لون الجسم: # 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؛ - تسليط الضوء على lightorange: # d97e00 ؛ --theme-highlight-orange: # f13c00؛ --theme-highlight-red: # ed2655؛ --theme-highlight-pink: # b82ee5؛ / * الألوان المستخدمة في الرسوم البيانية ، مثل أدوات الأداء. ألوان مماثلة لجدول كروم الزمني. * / - -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؛ - خلفية الشريط الجانبي - الخلفية: # 181d20 ؛ - تباين الخلفية: # b28025 ؛ --theme-tab-toolbar-background: # 252c33؛ - خلفية شريط الأدوات: # 343c45 ؛ --theme-background-background: # 1d4f73؛ --theme-background-background-semitransparent: rgba (29، 79، 115، .5)؛ --theme-color-color: # f5f7fa؛ - موضوع الخائن اللون: أسود. - موضوع التعليق: # 757873 ؛ - لون الجسم: # 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؛ - الموضوع تسليط الضوء على الأرجواني: # 6b7abb. - تسليط الضوء على 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-gray: # 757873؛ --theme-graphs-full-red: # f00؛ --theme-graphs-full-blue: # 00f؛  

اختر السمة والمتغيرات التي تريد استهدافها وأضفها إلى "userChrome.css".

في ما يلي بعض لقطات شاشة نافذة أدوات مطوري.