Cara Meretas & Personalisasi Tema Alat Pengembang Firefox Anda
Tema adalah hal pribadi bagi kami pengembang, ini bukan hanya tentang kecantikan editor atau alat. Ini tentang membuat layar yang akan kita tatap (tanpa banyak berkedip) lebih tahan untuk bekerja selama berjam-jam dan dengan cara yang produktif. Firefox memiliki dua tema untuk alat pengembang: gelap dan terang. Keduanya hebat, tetapi opsi masih terbatas tanpa cara untuk mempersonalisasikannya.
Sekarang, Firefox menggunakan kombinasi XUL dan CSS untuk UI-nya, yang berarti sebagian besar tampilannya dapat diubah menggunakan CSS saja. Mozilla menyediakan cara bagi pengguna untuk mengonfigurasi penampilan produknya dengan file CSS yang disebut "userChrome.css". Kamu bisa tambahkan aturan gaya khusus ke file CSS itu dan itu akan tercermin pada produk Mozilla.
Dalam posting ini kita akan menggunakan file CSS yang sama untuk mempersonalisasi alat pengembang di Firefox.
Pertama, kita perlu menemukan file CSS itu, atau membuatnya dan meletakkannya di tempat yang tepat. Salah satu cara cepat untuk menemukan folder yang akan menampung "userChrome.css" adalah dengan membuka tentang: dukungan di browser dan mengklik tombol "Tampilkan Folder" di sebelah label "Folder Profil". Ini akan membuka folder profil Firefox saat ini.
Di folder profil, Anda akan melihat folder bernama "chrome". Jika tidak ada di sana, buat satu dan buat "userChrome.css" di dalamnya. Sekarang setelah pengaturan file selesai, mari kita beralih ke kode.
: root.theme-dark --theme-body-background: # 050607! important; --theme-sidebar-background: # 101416! important; --theme-tab-toolbar-background: # 161A1E! important; --theme-toolbar-background: # 282E35! important; --theme-selection-background: # 478DAD! important; --theme-body-color: # D6D6D6! important; - tema-tubuh-warna-alt: # D6D6D6! penting; --theme-content-color1: # D6D6D6! penting; --theme-content-color2: # D6D6D6! penting; --theme-content-color3: # D6D6D6! penting; - tema-sorot-hijau: # 8BF9A6! penting; --theme-highlight-blue: # 00F9FF! important; --tema-highlight-bluegrey: putih! penting; --theme-highlight-lightorange: # FF5A2C! important; --tema-highlight-oranye: kuning! penting; --theme-highlight-red: # FF1247! important; --theme-highlight-pink: # F02898! penting;
Apa yang Anda lihat di atas adalah kode yang saya tambahkan ke file "userChrome.css" saya untuk mengubah tampilan alat pengembang dari ini
untuk ini:
Saya hanya ingin meningkatkan kontras lebih banyak dengan latar belakang yang lebih gelap dan teks yang lebih terang di tema gelap (juga saya tidak pandai skema warna), jadi saya tinggal dengan beberapa warna dasar yang biasanya digunakan dalam tema gelap. Jika Anda lebih baik dengan warna, bereksperimen sendiri dengan warna sesuai keinginan Anda untuk menemukan kecocokan yang lebih baik untuk tema yang Anda gunakan.
Kode ini hanyalah daftar variabel warna CSS yang digunakan untuk mewarnai berbagai bagian UI DevTools. Kami menemukan kode dalam file yang disebut "variabel.css" dalam file terkompresi bernama “omni.ja”:
Di Windows, file ini terletak di:
F: /firefox/browser/omni.ja. Ganti F: dengan drive tempat Anda menginstal Firefox.
Di OSX, file tersebut berada di:
~ / Aplikasi / Firefox.app / Konten / Sumber Daya / browser / omni.ja.
Ini adalah file Java terkompresi. Di Windows, Anda dapat mengganti nama .ja ekstensi ke .zip dan gunakan utilitas ekstrak Windows Explorer asli untuk membongkar file di dalamnya. Di OSX, buka Terminal dan jalankan unzip omni.ja. Ingatlah untuk membuat salinan file di direktori lain sebelum melakukannya.
Setelah omni.ja diekstrak, Anda dapat menemukan file di /chrome/devtools/skin/variables.css; ya, kulit Firefox DevTools ada di bawah folder bernama chrome. Dalam variabel.css, Anda akan melihat banyak variabel warna yang digunakan untuk tema terang dan gelap sebagai berikut
: 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; --tema-seleksi-latar belakang-semi-transparan: rgba (76, 158, 217, .23); --tema-pilihan-warna: # f5f7fa; --theme-splitter-color: #aaaaaa; --tema-komentar: # 757873; - tema-warna-tubuh: # 18191a; --theme-body-color-alt: # 585959; --theme-content-color1: # 292e33; --theme-content-color2: # 8fa1b2; --theme-content-color3: # 667380; - tema-sorot-hijau: # 2cbb0f; - tema-sorot-biru: # 0088cc; --theme-highlight-bluegrey: # 0072ab; --tema-highlight-ungu: # 5b5fff; --theme-highlight-lightorange: # d97e00; --theme-highlight-orange: # f13c00; --theme-highlight-red: # ed2655; --theme-highlight-pink: # b82ee5; / * Warna yang digunakan dalam Grafik, seperti alat kinerja. Warna yang mirip dengan garis waktu Chrome. * / --tema-grafik-hijau: # 85d175; --tema-grafik-biru: # 83b7f6; --tema-grafik-bluegrey: # 0072ab; --tema-grafik-ungu: # b693eb; --tema-grafik-kuning: # efc052; --tema-grafik-oranye: # d97e00; --tema-grafik-merah: # e57180; --tema-grafik-abu-abu: #cccccc; --tema-grafik-penuh-merah: # f00; --tema-grafik-penuh-biru: # 00f; : root.theme-dark --theme-body-background: # 14171a; --theme-sidebar-background: # 181d20; --tema-kontras-latar belakang: # b28025; --theme-tab-toolbar-background: # 252c33; --theme-toolbar-background: # 343c45; --theme-selection-background: # 1d4f73; --tema-seleksi-latar belakang-semi-transparan: rgba (29, 79, 115, .5); --tema-pilihan-warna: # f5f7fa; - tema-pembagi-warna: hitam; --tema-komentar: # 757873; - tema-warna-tubuh: # 8fa1b2; --theme-body-color-alt: # b6babf; --theme-content-color1: # a9bacb; --theme-content-color2: # 8fa1b2; --theme-content-color3: # 5f7387; - tema-sorot-hijau: # 70bf53; --theme-highlight-blue: # 46afe3; --theme-highlight-bluegrey: # 5e88b0; --tema-highlight-ungu: # 6b7abb; --theme-highlight-lightorange: # d99b28; --theme-highlight-orange: # d96629; --theme-highlight-red: # eb5368; --theme-highlight-pink: # df80ff; / * Warna yang digunakan dalam Grafik, seperti alat kinerja. Paling mirip dengan beberapa warna "highlight- *". * / --tema-grafik-hijau: # 70bf53; --tema-grafik-biru: # 46afe3; --tema-grafik-bluegrey: # 5e88b0; --tema-grafik-ungu: # df80ff; --tema-grafik-kuning: # d99b28; --tema-grafik-oranye: # d96629; --tema-grafik-merah: # eb5368; --tema-grafik-abu-abu: # 757873; --tema-grafik-penuh-merah: # f00; --tema-grafik-penuh-biru: # 00f;
Pilih tema dan variabel yang ingin Anda targetkan dan tambahkan ke "userChrome.css" Anda.
Berikut ini beberapa tangkapan layar dari jendela alat pengembang saya.
