Firefox Geliştirici Araçları Temanızı Hack Etme ve Kişiselleştirme
Temalar biz geliştiriciler için kişisel bir şeydir, sadece editörlerin veya araçların güzelleştirilmesi ile ilgili değildir. Ekranı, saatlerce ve verimli bir şekilde çalışmak için daha göze çarpmadan (daha fazla göz kırpmadan) bakacağımız ekran yapmakla ilgili. Firefox'un geliştirici araçları için iki teması vardır: karanlık ve aydınlık. Her ikisi de harika, ancak seçenekler onları kişiselleştirmek için bir yol olmadan hala sınırlıdır.
Artık Firefox, kullanıcı arayüzü için bir XUL ve CSS kombinasyonunu kullanıyor; bu, görünümünün çoğunun sadece CSS kullanılarak ayarlanması anlamına geliyor. Mozilla, kullanıcıların ürünlerinin görünümünü "userChrome.css" adlı bir CSS dosyasıyla yapılandırmalarını sağlar. Yapabilirsin o CSS dosyasına özel stil kuralları ekle ve Mozilla ürünlerine yansıyacak.
Bu yazıda, Firefox’taki geliştirici araçlarını kişiselleştirmek için aynı CSS dosyasını kullanacağız..
Öncelikle, bu CSS dosyasını bulmamız veya bir tane oluşturup doğru yere koymamız gerekir. "UserChrome.css" dosyasını barındıracak klasörü bulmak için hızlı bir yol hakkında: desteği tarayıcıda ve "Profil Klasörü" etiketinin yanındaki "Klasörü Göster" düğmesini tıklatarak. Bu Firefox'un mevcut profil klasörünü açacak.
Profil klasöründe "chrome" adlı bir klasör göreceksiniz. Orada değilse, bir tane oluşturun ve içinde bir "userChrome.css" oluşturun. Şimdi dosyanın ayarlanması bitti, hadi koda geçelim.
: root.theme-dark --theme-body-background: # 050607! Önemli; - Tema-kenar çubuğu-arka planı: # 101416! Önemli; --theme-tab-araç çubuğu-arka planı: # 161A1E! önemli; - Tema-araç çubuğu-arka plan: # 282E35! önemli; - Tema seçimi arka plan: # 478DAD! önemli; -theme-body-color: # D6D6D6! önemli; -theme-body-color-alt: # D6D6D6! önemli; -theme-content-color1: # D6D6D6! önemli; -theme-content-color2: # D6D6D6! önemli; -theme-content-color3: # D6D6D6! önemli; -theme-vurgu-yeşil: # 8BF9A6! önemli; -theme-vurgu-mavi: # 00F9FF! önemli; - Tema-vurgulamak-bluegrey: beyaz! önemli; - Tema-vurgu-aydınlık: # FF5A2C! önemli; - Tema-vurgu-turuncu: sarı! önemli; - Tema-vurgu-kırmızı: # FF1247! Önemli; - Tema-vurgulama-pembe: # F02898! önemli;
Yukarıda gördüğünüz, geliştirici araçlarının görünümünü değiştirmek için "userChrome.css" dosyama eklediğim kod.
buna:
Sadece koyu temada koyu arka plan ve daha parlak metinle kontrastı biraz daha geliştirmek istedim (ayrıca renk şemalarında iyi değilim), bu yüzden karanlık temalarda kullanılan bazı temel renkler ile kaldım. Renklerle daha iyiyseniz, kullandığınız tema için daha iyi bir eşleşme bulmak üzere uygun gördüğünüz renklerle kendi başınıza deneyin..
Kod, DevTools'un çeşitli UI bölümlerini renklendirmek için kullanılan CSS renk değişkenlerinin bir listesidir. Kodu, "değişken.css" adlı bir dosyada ve sıkıştırılmış bir dosyada bulduk “omni.ja”:
Windows'ta, dosya şurada bulunur:
F: /firefox/browser/omni.ja. Değiştirin F: Firefox'unuzu kurduğunuz sürücü ile.
OSX'te, dosya şurada bulunur:
~ / Uygulamalar / Firefox.app / İçerik / Kaynaklar / tarayıcı / omni.ja.
Bunlar sıkıştırılmış Java dosyalarıdır. Windows’ta, .ja uzantısı .zip ve içindeki dosyaları kaldırmak için yerel Windows Gezgini ayıklama yardımcı programını kullanın. OSX'te Terminal'e gidin ve çalıştırın omni.ja dosyasını açın. Bunu yapmadan önce dosyanın bir kopyasını başka bir dizinde oluşturmayı unutmayın.
Omni.ja çıkarıldıktan sonra dosyayı aşağıdaki adreste bulabilirsiniz. /chrome/devtools/skin/variables.css; evet, Firefox DevTools kaplaması adlı bir klasörün altında krom. İçinde variables.css, açık ve koyu temalar için kullanılan bir dizi renk değişkenini aşağıdaki gibi göreceksiniz
: root.theme-light --theme-body-background: #fcfcfc; -theme-sidebar-background: # f7f7f7; - tema-kontrast-arka planı: # e6b064; --theme-tab-araç çubuğu-arka planı: #ebeced; -theme-toolbar-background: # f0f1f2; -theme-selection-background: # 4c9ed9; -seçenek seçimi-arka plan yarı saydam: rgba (76, 158, 217, .23); - Tema seçimi-renk: # f5f7fa; - Tema bölücü rengi: #aaaaaa; - tema-yorum: # 757873; - Tema-gövde rengi: # 18191a; -theme-gövde-renk-alt: # 585959; -theme-content-color1: # 292e33; -theme-content-color2: # 8fa1b2; -theme-content-color3: # 667380; -theme-vurgu-yeşil: # 2cbb0f; -theme-vurgu-mavi: # 0088cc; -theme-vurgulama-bluegrey: # 0072ab; - Tema-vurgu-mor: # 5b5fff; - Tema-vurgu-aydınlık: # d97e00; -theme-vurgu-turuncu: # f13c00; -theme-vurgulama kırmızısı: # ed2655; -theme-vurgu-pembe: # b82ee5; / * Grafiklerde kullanılan renkler, performans araçları gibi. Chrome'un zaman çizelgesine benzer renkler. * / --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-grey: #cccccc; -theme-graphs-full-red: # f00; -theme-graphs-full-blue: # 00f; : root.theme-dark --theme-body-background: # 14171a; - Tema-kenar çubuğu-arka planı: # 181d20; -theme-kontrast-arka planı: # b28025; -theme-tab-araç çubuğu-arka planı: # 252c33; -theme-araç çubuğu-arka planı: # 343c45; - tema seçimi-arka planı: # 1d4f73; -seçenek seçimi-arka plan yarı saydam: rgba (29, 79, 115, 5); - Tema seçimi-renk: # f5f7fa; - Tema bölücü rengi: siyah; - tema-yorum: # 757873; - tema-gövde rengi: # 8fa1b2; -theme-body-color-alt: # b6babf; -theme-içerik-color1: # a9bacb; -theme-content-color2: # 8fa1b2; -theme-content-color3: # 5f7387; -theme-vurgu-yeşil: # 70bf53; -theme-vurgulama-mavi: # 46afe3; -theme-vurgulama-bluegrey: # 5e88b0; -theme-vurgu-mor: # 6b7abb; - Tema-vurgu-aydınlık: # d99b28; -theme-vurgulama-turuncu: # d96629; -theme-vurgulama-kırmızı: # eb5368; -theme-vurgu-pembe: # df80ff; / * Grafiklerde kullanılan renkler, performans araçları gibi. Çoğunlukla bazı "vurgu- *" renklerine benzer. * / --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;
Hedeflemek istediğiniz temayı ve değişkenleri seçin ve "userChrome.css" adresinize ekleyin.
İşte geliştirici araçlarımın penceresinin bazı ekran görüntüleri.
