כיצד לפרוץ & התאמה אישית של כלי פיתוח

ערכות נושא הם דבר אישי עבורנו מפתחים, זה לא רק על beautification של העורכים או כלים. מדובר בהפיכת המסך שאנו נועצים בו עיניים (בלי למצמץ) הרבה יותר נסבלים לעבודה שעות על שעות ובצורה פרודוקטיבית. פיירפוקס יש שני נושאים עבור כלי מפתח: כהה וקל. שניהם נהדרים, אבל האפשרויות עדיין מוגבלות ללא דרך להתאים אותן.

עכשיו, Firefox משתמשת בשילוב של XUL ו- CSS עבור ממשק המשתמש שלה, כלומר רוב המראה שלה יכול להיות tweaked באמצעות 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 חשוב; - בחירה - רקע: # 478DAD חשוב; - צבע גוף: # D6D6D6 חשוב; - צבעי גוף-צבע-אלט: # D6D6D6! - Theme-content-color1: # D6D6D6! - Theme-content-color2: # D6D6D6! חשוב; - Theme-content-color3: # D6D6D6! חשוב; - טמפרטורה גבוהה - ירוק: # 8BF9A6! --טמפרטורה - כחול: # 00F9FF! חשוב; - טמפרטורה - הדגשה - כחול: לבן! -Theme-highlight-lightorange: # FF5A2C חשוב! - כתום - כתום: צהוב! - טמפרטורה - הדגשה - אדום: # FF1247 חשוב; - טמפרטורה - הדגשה: # F02898! חשוב; 

מה שאתה רואה למעלה הוא הקוד שהוספתי לקובץ "userChrome.css" שלי כדי לשנות את המראה של כלי מפתחים מזה

לזה:

אני רק רוצה לשפר את הניגוד קצת יותר עם רקע כהה טקסט בהיר יותר הנושא כהה (גם אני לא טוב בצבעים), אז נשארתי עם כמה צבעים בסיסיים המשמשים בדרך כלל נושאים חשוכים. אם אתה טוב יותר עם צבעים, הניסוי לבד עם הצבעים כפי שאתה רואה לנכון למצוא התאמה טובה יותר עבור הנושא שבו אתה משתמש.

הקוד הוא רק רשימה של משתני צבע CSS המשמשים לצביעת חלקים שונים של ממשק המשתמש של DevTools. מצאנו את הקוד בקובץ בשם "variables.css" בקובץ דחוס בשם “omni.ja”You

ב- Windows, הקובץ נמצא בכתובת:

F: / firefox/browser/omni.ja. החלף את ה F: עם הכונן שבו התקנת את Firefox.

ב- OSX, הקובץ נמצא בכתובת:

~ / יישומים / Firefox.app / תוכן / משאבים / דפדפן / omni.ja.

אלה הם קבצי Java דחוסים. ב- Windows, באפשרותך לשנות את שמו .י הרחבה .רוכסן ולהשתמש בכלי Windows Explorer לחלץ את השירות כדי לפרוק את הקבצים בתוכו. ב- OSX, עבור אל טרמינל והפעל unzip omni.ja. זכור להכין עותק של הקובץ בספרייה אחרת לפני שתעשה זאת.

לאחר omni.ja יש ביץ חילוץ, אתה יכול למצוא את הקובץ ב /chrome/devtools/skin/variables.css; כן, העור של DevTools של Firefox נמצא תחת תיקיה בשם כרום. בתוך ה משתנים, תראה חבורה של משתני צבע המשמשים הן את הנושאים אור כהה כדלקמן

 : 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); - בחירת צבעים: # f5f7fa; - צבע-מפריד-צבע: #aaaaaa; --theme-comment: # 757873; - צבע גוף: # 18191a; - צבע גוף גוף: # 585959; --theme-content-color1: # 292e33; --theme-content-color2: # 8fa1b2; --תוכן-צבע-צבע 3: # 667380; --theme-highlight-green: # 2cbb0f; - -Theme-highlight-blue: # 0088cc; --theme-highlight-bluegrey: # 0072ab; - סגול - סגול: # 5b5fff; - תאורה - הדגשה-אור: # d97e00; - צבע - כתום: # f13c00; --טמפרטורה - אדום: # ed2655; - טמג '- ורוד: # b82ee5; / * צבעים המשמשים גרפים, כמו כלי ביצועים. צבעים דומים לציר הזמן של Chrome. * / - תרשימים-ירוק-ירוק: # 85d175; - תרשימים-כחול-כחול: # 83b7f6; - תרשימים-תרשימים-כחול: # 0072ab; - תרשימים-סגול-סגול: # b693eb; - תרשימים-צהוב-צהוב: # efc052; - תרשימים-תפוזים: # d97e00; - תרשימים-גרפים-אדום: # e57180; - תרשימים-אפורים-אפור: #cccccc; - תרשימים-גרפים-אדום-מלא: # f00; - תרשימים-תרשימים-כחול-מלא: # 00f; : root.theme-dark --theme-body-background: # 14171a; - theme-sidebar-background: # 181d20; - theme-background-background: # b28025; - theme-tab-background-background: # 252c33; - theme-toolbar-background: # 343c45; --theme-selection-background: # 1d4f73; - בחירה-רקע-רקע-שקוף: rgba (29, 79, 115, .5); - בחירת צבעים: # f5f7fa; - צבע - מפריד - שחור; --theme-comment: # 757873; - צבע גוף-גוף: # 8fa1b2; - צבע גוף-גוף: # b6babf; --theme-content-color1: # a9bacb; --theme-content-color2: # 8fa1b2; - צבע תוכן-צבע 3: # 5f7387; --טמפרטורה - ירוק: # 70bf53; - הצבע-הדגשה-כחול: # 46afe3; - - הדגשת-הדגשה-כחול: # 5e88b0; - סגול - סגול: # 6b7abb; - תאורה-הדגשה-אור: # d99b28; - צבע - כתום: # d96629; - טמפרטורה - הדגשה - אדום: # eb5368; --טמפרטורה - ורוד: # df80ff; / * צבעים המשמשים גרפים, כמו כלי ביצועים. דומה לרוב לכמה צבעים "הדגשה -". * / - theme-graphs-green: # 70bf53; - תרשימים-כחול-כחול: # 46afe3; - תרשימים-תרשימים-כחול: # 5e88b0; - תרשימים-סגולים-סגולים: # df80ff; - תרשימים-צהוב-צהוב: # d99b28; - תרשימים-תפוזים: # d96629; - תרשימים-אדום-אדום: # eb5368; - תרשימים-אפורים-אפור: # 757873; - תרשימים-גרפים-אדום-מלא: # f00; - תרשימים-תרשימים-כחול-מלא: # 00f;  

בחר את הנושא והמשתנים שברצונך למקד והוסף אותם ל- "userChrome.css".

הנה כמה צילומי מסך נוספים בחלון של כלי הפיתוח שלי.