Cara Hack & Peribadikan Tema Alat Pemaju Firefox Anda
Tema adalah perkara peribadi bagi kami pemaju, bukan hanya tentang pengindahan editor atau alat. Ini mengenai membuat skrin yang akan kita teliti (tanpa berkelip banyak) lebih tertekan untuk bekerja selama berjam-jam di hujung dan dengan cara yang produktif. Firefox mempunyai dua tema untuk alat pembangun: gelap dan ringan. Kedua-duanya hebat, tetapi pilihan masih terbatas tanpa cara untuk memperibadikan mereka.
Sekarang, Firefox menggunakan kombinasi XUL dan CSS untuk UInya, yang bermaksud kebanyakan penampilannya boleh ditapis menggunakan CSS sahaja. Mozilla menyediakan cara untuk pengguna mengkonfigurasi penampilan produknya dengan fail CSS yang disebut "userChrome.css". Awak boleh tambahkan peraturan gaya tersuai ke fail CSS tersebut dan ia akan digambarkan pada produk Mozilla.
Dalam catatan ini kita akan menggunakan fail CSS yang sama untuk memperibadikan alat pemaju di Firefox.
Pertama, kita perlu mencari fail CSS itu, atau membuatnya dan meletakkannya di tempat yang betul. Satu cara cepat untuk mencari folder yang akan menempatkan "userChrome.css" adalah dengan pergi mengenai: sokongan dalam pelayar dan klik butang "Tunjukkan Folder" di sebelah label "Folder Profil". Ini akan membuka folder profil semasa Firefox.
Dalam folder profil, anda akan melihat folder bernama "chrome". Sekiranya tidak ada, buat satu dan buat "userChrome.css" di dalamnya. Sekarang bahawa penubuhan fail selesai, mari kita berpindah ke kod.
: root.theme-dark --theme-body-background: # 050607! important; --theme-sidebar-background: # 101416! penting; --theme-tab-toolbar-latar belakang: # 161A1E! penting; --theme-toolbar-latar belakang: # 282E35! penting; --theme-selection-background: # 478DAD! important; --theme-body-color: # D6D6D6! penting; --theme-body-color-alt: # D6D6D6! penting; --theme-content-color1: # D6D6D6! penting; --theme-content-color2: # D6D6D6! penting; --theme-content-color3: # D6D6D6! penting; --theme-highlight-green: # 8BF9A6! penting; - tema-highlight-blue: # 00F9FF! penting; - tema-highlight-bluegrey: putih! penting; - tema-highlight-lightorange: # FF5A2C! penting; - tema-highlight-oren: kuning! penting; --tema-highlight-red: # FF1247! penting; --theme-highlight-pink: # F02898! penting;
Apa yang anda lihat di atas ialah kod yang saya tambah pada fail "userChrome.css" saya untuk mengubah rupa alat pemaju dari ini
untuk ini:
Saya hanya ingin memperbaiki kontras sedikit lagi dengan latar belakang yang lebih gelap dan teks yang lebih terang dalam tema gelap (juga saya tidak baik pada skema warna), jadi saya tinggal dengan beberapa warna asas yang biasanya digunakan dalam tema gelap. Jika anda lebih baik dengan warna, percubaan pada anda sendiri dengan warna-warna yang anda nampak sesuai untuk mencari perlawanan yang lebih baik untuk tema yang anda gunakan.
Kod ini hanyalah senarai pembolehubah warna CSS yang digunakan untuk mewarna pelbagai bahagian UI DevTools. Kami mendapati kod dalam fail yang dinamakan "variables.css" dalam fail yang dimampatkan dinamakan “omni.ja”:
Di Windows, fail tersebut terletak di:
F: /firefox/browser/omni.ja. Ganti semula F: dengan pemacu di mana anda telah memasang Firefox anda.
Di OSX, fail tersebut terletak di:
~ / Aplikasi / Firefox.app / Kandungan / Sumber / pelayar / omni.ja.
Ini adalah fail Java yang dimampatkan. Di Windows, anda boleh menamakan semula .ja lanjutan kepada .zip dan menggunakan utiliti ekstrak Windows Explorer asli untuk memunggah fail di dalamnya. Di OSX, pergi ke Terminal dan jalankan unzip omni.ja. Perlu diingat untuk membuat salinan fail dalam direktori lain sebelum berbuat demikian.
Sekali omni.ja telah diekstrak, anda boleh mencari fail di /chrome/devtools/skin/variables.css; ya, kulit DevTools Firefox berada di bawah folder bernama krom. Di dalam variables.css, anda akan melihat sekumpulan pembolehubah warna yang digunakan untuk kedua-dua tema cahaya dan gelap seperti berikut
: root.theme-light --theme-body-background: #fcfcfc; --tema-bar sisi-latar belakang: # f7f7f7; - latarbelakang-corak-corak: # e6b064; --theme-tab-toolbar-background: #ebeced; --theme-toolbar-background: # f0f1f2; --theme-selection-background: # 4c9ed9; --theme-selection-background-semitransparent: 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; - tema-highlight-ungu: # 5b5fff; --tema-highlight-lightorange: # d97e00; - tema-highlight-orange: # f13c00; --theme-highlight-red: # ed2655; --theme-highlight-pink: # b82ee5; / * Warna yang digunakan dalam Graf, seperti alat prestasi. Warna yang sama dengan garis masa Chrome. * / - tema-graf-hijau: # 85d175; --theme-graphs-blue: # 83b7f6; --tema-grafik-bluegrey: # 0072ab; --tema-grafik-ungu: # b693eb; --tema-graf-kuning: # efc052; --tema-grafik-oren: # d97e00; --tema-graf-merah: # e57180; --tema-grafik-kelabu: #cccccc; --tema-grafik-penuh-merah: # f00; - tema-grafik-penuh-biru: # 00f; : root.theme-dark --theme-body-background: # 14171a; --tema-bar sisi-latar belakang: # 181d20; --secara -barang-latar belakang: # b28025; --theme-tab-toolbar-background: # 252c33; --theme-toolbar-background: # 343c45; --theme-selection-background: # 1d4f73; --theme-selection-background-semitransparent: rgba (29, 79, 115, .5); --theme-selection-color: # f5f7fa; --tema-splitter-warna: hitam; --theme-comment: # 757873; --theme-body-color: # 8fa1b2; --theme-body-color-alt: # b6babf; --theme-content-color1: # a9bacb; --theme-content-color2: # 8fa1b2; --theme-content-color3: # 5f7387; --tema-highlight-green: # 70bf53; --theme-highlight-blue: # 46afe3; --theme-highlight-bluegrey: # 5e88b0; - tema-highlight-ungu: # 6b7abb; - tema-highlight-lightorange: # d99b28; - tema-highlight-oren: # d96629; --theme-highlight-red: # eb5368; --theme-highlight-pink: # df80ff; / * Warna yang digunakan dalam Graf, seperti alat prestasi. Kebanyakannya serupa dengan beberapa warna "highlight- *". * / - tema-graf-hijau: # 70bf53; --tema-grafik-biru: # 46afe3; --tema-grafik-bluegrey: # 5e88b0; --tema-grafik-ungu: # df80ff; --theme-graphs-yellow: # d99b28; --tema-graf-oren: # d96629; --tema-graf-merah: # eb5368; --tema-grafik-kelabu: # 757873; --tema-grafik-penuh-merah: # f00; - tema-grafik-penuh-biru: # 00f;
Pilih tema dan pembolehubah yang anda hendak sasarkan dan tambahkannya ke "userChrome.css".
Berikut ialah beberapa tangkapan skrin alat pemaju saya.
