Cách Hack & Cá nhân hóa Chủ đề Công cụ dành cho nhà phát triển Firefox của bạn

Chủ đề là một thứ cá nhân cho các nhà phát triển của chúng tôi, nó không chỉ là làm đẹp cho các biên tập viên hay công cụ. Đó là về việc làm cho màn hình mà chúng ta sẽ nhìn chằm chằm (không chớp mắt nhiều) có thể làm việc nhiều giờ hơn và hoạt động hiệu quả. Firefox có hai chủ đề cho các công cụ dành cho nhà phát triển: tối và sáng. Cả hai đều tuyệt vời, nhưng các tùy chọn vẫn bị giới hạn mà không có cách nào để cá nhân hóa chúng.

Bây giờ, Firefox sử dụng kết hợp XUL và CSS cho giao diện người dùng của nó, điều đó có nghĩa là hầu hết diện mạo của nó có thể được điều chỉnh chỉ bằng CSS. Mozilla cung cấp một cách để người dùng định cấu hình giao diện sản phẩm của mình bằng tệp CSS có tên là "userChrome.css". Bạn có thể thêm quy tắc kiểu tùy chỉnh vào tệp CSS đó và nó sẽ được phản ánh trên các sản phẩm của Mozilla.

Trong bài đăng này, chúng tôi sẽ sử dụng cùng một tệp CSS đó để cá nhân hóa các công cụ dành cho nhà phát triển trong Firefox.

Đầu tiên, chúng ta cần tìm tệp CSS đó, hoặc tạo một tệp và đặt nó vào đúng chỗ. Một cách nhanh chóng để tìm thư mục chứa "userChrom.css" là vào về: hỗ trợ trong trình duyệt và nhấp vào nút "Hiển thị thư mục" bên cạnh nhãn "Thư mục hồ sơ". Điều này sẽ mở thư mục hồ sơ hiện tại của Firefox.

Trong thư mục hồ sơ, bạn sẽ thấy một thư mục có tên "chrome". Nếu nó không có ở đó, hãy tạo một cái và tạo một "userChrom.css" trong đó. Bây giờ việc thiết lập tệp đã xong, hãy chuyển sang mã.

: root.theme-dark --theme-body-background: # 050607! quan trọng; --theme-sidebar-nền: # 101416! quan trọng; --theme-tab-thanh công cụ-nền: # 161A1E! quan trọng; --theme-thanh công cụ-nền: # 282E35! quan trọng; --theme-select-background: # 478DAD! quan trọng; --theme-body-color: # D6D6D6! quan trọng; --theme-body-color-alt: # D6D6D6! quan trọng; --theme-content-color1: # D6D6D6! quan trọng; --theme-content-color2: # D6D6D6! quan trọng; --theme-content-color3: # D6D6D6! quan trọng; --theme-highlight-green: # 8BF9A6! quan trọng; --theme-highlight-blue: # 00F9FF! quan trọng; --theme-highlight-bluegrey: trắng! quan trọng; --theme-highlight-lightorange: # FF5A2C! quan trọng; --theme-highlight-Orange: màu vàng! quan trọng; --theme-highlight-red: # FF1247! quan trọng; --theme-highlight-Pink: # F02898! quan trọng; 

Những gì bạn thấy ở trên là mã mà tôi đã thêm vào tệp "userChrome.css" của mình để thay đổi giao diện của các công cụ dành cho nhà phát triển từ đây

đến đây:

Tôi chỉ muốn cải thiện độ tương phản nhiều hơn một chút với nền tối hơn và văn bản sáng hơn trong chủ đề tối (cũng là tôi không giỏi về phối màu), vì vậy tôi vẫn sử dụng một số màu cơ bản thường được sử dụng trong các chủ đề tối. Nếu bạn thích màu sắc hơn, hãy tự mình thử nghiệm các màu mà bạn thấy phù hợp để tìm ra sự phù hợp tốt hơn cho chủ đề bạn đang sử dụng.

Mã này chỉ là một danh sách các biến màu CSS được sử dụng để tô màu các phần UI khác nhau của DevTools. Chúng tôi đã tìm thấy mã trong một tệp có tên là "biến.css" trong một tệp nén có tên “omni.ja”:

Trong Windows, tệp được đặt tại:

F: /firefox/browser/omni.ja. Thay thế cái F: với ổ đĩa bạn đã cài đặt Firefox của mình vào.

Trong OSX, tệp được đặt tại:

~ / Ứng dụng / Firefox.app / Nội dung / Tài nguyên / trình duyệt / omni.ja.

Đây là các tệp Java được nén. Trong Windows, bạn có thể đổi tên .ja mở rộng cho .khóa kéo và sử dụng tiện ích giải nén Windows Explorer riêng để tải các tệp trong đó. Trong OSX, đi đến Terminal và chạy giải nén omni.ja. Hãy nhớ tạo một bản sao của tệp trong thư mục khác trước khi thực hiện.

Khi omni.ja đã được giải nén, bạn có thể tìm thấy tệp tại /chrom/devtools/ Da / biến.css; vâng, giao diện Firefox DevTools nằm dưới một thư mục có tên chrome. bên trong biến.css, bạn sẽ thấy một loạt các biến màu được sử dụng cho cả chủ đề sáng và tối như sau

 : root.theme-light --theme-body-background: #fcfcfc; --theme-sidebar-nền: # f7f7f7; --theme-độ tương phản-nền: # e6b064; --theme-tab-thanh công cụ-nền: #ebeced; --theme-thanh công cụ-nền: # f0f1f2; --theme-select-nền: # 4c9ed9; --theme-select-background-semitransparent: rgba (76, 158, 217, .23); --theme-select-color: # f5f7fa; --theme-splitter-color: #aaaaaa; --theme-bình luận: # 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-tím: # 5b5fff; --theme-highlight-lightorange: # d97e00; --theme-highlight-cam: # f13c00; --theme-highlight-red: # ed2655; --theme-highlight-hồng: # b82ee5; / * Màu sắc được sử dụng trong Đồ thị, như các công cụ hiệu suất. Màu sắc tương tự như dòng thời gian của Chrome. * / --theme-graphs-green: # 85d175; --theme-graphs-blue: # 83b7f6; --theme-graphs-bluegrey: # 0072ab; --theme-graphs-Purple: # b693eb; --theme-graphs-yellow: # efc052; --theme-graphs-cam: # d97e00; --theme-graphs-red: # e57180; --theme-graphs-grey: #cccccc; --theme-graph-full-red: # f00; --theme-graphs-full-blue: # 00f; : root.theme-dark --theme-body-background: # 14171a; --theme-sidebar-nền: # 181d20; --theme-độ tương phản-nền: # b28025; --theme-tab-thanh công cụ-nền: # 252c33; --theme-thanh công cụ-nền: # 343c45; --theme-select-nền: # 1d4f73; --theme-select-background-semitransparent: rgba (29, 79, 115, .5); --theme-select-color: # f5f7fa; --theme-splitter-color: đen; --theme-bình luận: # 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-tím: # 6b7abb; --theme-highlight-lightorange: # d99b28; --theme-highlight-cam: # d96629; --theme-highlight-red: # eb5368; --theme-highlight-Pink: # df80ff; / * Màu sắc được sử dụng trong Đồ thị, như các công cụ hiệu suất. Chủ yếu là tương tự với một số màu "highlight- *". * / --theme-graphs-green: # 70bf53; --theme-graphs-blue: # 46afe3; --theme-graphs-bluegrey: # 5e88b0; --theme-graphs-Purple: # df80ff; --theme-graphs-yellow: # d99b28; --theme-graphs-cam: # d96629; --theme-graphs-red: # eb5368; --theme-graphs-grey: # 757873; --theme-graph-full-red: # f00; --theme-graphs-full-blue: # 00f;  

Chọn chủ đề và các biến bạn muốn nhắm mục tiêu và thêm chúng vào "userChrome.css" của bạn.

Dưới đây là một số ảnh chụp màn hình khác của cửa sổ công cụ dành cho nhà phát triển của tôi.