Web sayfalarındaki beyaz arka planı başka bir renge değiştirme


47

Şu anda Firefox’ta karanlık bir tema kullanıyorum. Gerçekten güzel görünüyor, ancak birçok web sayfasında düz beyaz bir arka plan kullanılıyor. Ortaya çıkan kontrast biraz tatsız ve karanlık bir sekmeden beyaz bir sekmeye geçtiğimde bazen göze zarar veriyor.

Firefox'u her yerde beyaz adamların yerine başka renklerle değiştirmenin bir yolu var mı (örneğin açık gri)? Şık bir senaryo, bir userChrome.css hack veya çalışan herhangi bir şey olabilir (tercihen mümkün olduğu kadar hafif).

Kendimi açıklığa kavuşturmak için: hedefime ulaştıktan sonra, Süper Kullanıcı sitesini ziyaret ettiğimde arka plan rengi beyaz yerine açık gri olmalı ve beyaz arka plana sahip başka herhangi bir siteye (google siteleri, teknoloji krizi vb.) Gelmelidir. ).

Bunu yapmanın bir yolu var mı?


5
Buna karşı tavsiye ediyorum, çoğu web sitesi metin stilleri için birçok farklı sınıf ve CSS kullanıyor. Web sayfasında gösterilen şekilde siyah arka plana VE siyah metne sahipseniz ne olur? Hangi işletim sistemini ilgilenmiyorsunuz?
danixd,

Windows 7 çoğunlukla, platformdan bağımsız bir çözüm daha iyi olsa da 'ubuntnu'yu işyerinde kullanıyorum. Bazı sitelerle ilgili garip davranışlara neden olabileceğini ve arka planın siyah yerine açık gri renkte olması gerektiğini, böylece metnin okunabileceğini biliyorum. Ama bu şey denemeye istekli olduğum noktaya beni rahatsız ediyor.
Malabarba

Çeşitli addons'lar bunu yapabilir - örneğin addons.mozilla.org/En-us/firefox/addon/…
Wilf

Yanıtlar:


21

Ben sadece öğenin hesaplanan stilini kontrol eden ve siyah olarak değiştiren hızlı bir Greasemonkey betiği yazdım body(muhtemelen farklı bir renk seçmek istiyorsunuz):

(function () {
    if (window.getComputedStyle(document.body, null).getPropertyValue("background-color") == "rgb(255, 255, 255)") {
        console.log("Setting new background color...");
        document.body.setAttribute("style", "background-color: #000000;");
    }
})();

Bu tür şeylerle ilgili sorun, web siteleri son derece iyi tasarlanmadıkça siyah üzerine beyaz lekelerin oluşmasıdır.


4
Cehaletimi affet, ama bu senaryoyu nereye yapıştırabilirim? (sorun için teşekkürler)
Malabarba

@Bruce: Greasemonkey'i kurun, * için yeni bir kullanıcı betiği oluşturun ve bunu metin editörüne yapıştırın. Sayfayı kaydedin ve yenileyin.
Merhaba71

Tamam, bu yöntem şu ana kadar en iyisidir. Metin kutularının arka planını ve birkaç başka şeyi değiştirmez, ama bunun dışında iyidir. Sanırım, herhangi bir çözüm, yine de etrafta birkaç beyaz kutu bırakacak. teşekkürler
Malabarba

İndirmeye hazır scriptler var, sadece aşağı kaydırın.
valentt

14

Bu mükemmel bir çözüm değildir, ancak arka planı değiştirmek istediğiniz siteleri ziyaret ettiğinizde bunu yapabilirsiniz.

38'in altındaki Firefox'ta gidin Tools > Options > Contentve Coloursdüğmesine tıklayın. Firefox 38 ve daha yüksek sürümlerde, oraya gidin Edit > Preferences > Contentve oraya tıklayın Colors.

"Arka Plan" için gri renk seçin ve "Yukarıdakilerin benim seçimlerim yerine kendi renklerini seçmelerine izin ver" ve "Sistem renklerini kullan" öğelerinin yanındaki onay kutularını temizleyin.

alt metin


Bu, en kolay olduğu için oy kullanmayı hak ediyor. Hemen hemen her sitede çalışır. Yine de metin rengini değiştirmeye zorlar ve bu onu birkaç diğer yönteme göre biraz daha düşük yapar.
Malabarba

2
@ Bruce Connor: Doğru. Diğer taraftan, bg rengini değiştirirseniz, makul kontrast elde etmek için fg rengini de değiştirmeniz gerekecektir. Bu nedenle pratikte metin rengini değiştirmek zorunda kalmak büyük bir dezavantaj olmayabilir.
sleske,

2
Firefox seçeneğini burada açıklandığı gibi kullanıyorsanız, hızlıca açmak / kapatmak için "Renk Yok" gibi bir eklenti kullanmanız önerilir (çünkü renkleri değiştirmek birçok sitede çeşitli hatalara neden olur). Alternatif olarak, herhangi bir tuşa herhangi bir işlem atayabilmek için Pentadactyl addon kullanın (herhangi bir Firefox seçeneği değiştirme dahil).
corvinus

Bu belirtildiğinde arka plan rengini geçersiz kılmaz
Vlad

11

Beyaz arka planları bastırmak için Greasemonkey (Firefox) komut dosyasını güncelledim.

Tampermonkey'i yüklerseniz, komut dosyaları Chrome'da çalışacaktır.

http://userscripts-mirror.org/scripts/show/142763

Bu, bazı beyaz gölgeleri gri arka plana (ish) dönüştürür. Genel koddan kendi temel renginizi yapılandırabilir ve ayarlayabilirsiniz. Beyaz tonları da işlenir.

Üç seçeneğim var: Gri , Pembe ve Yeşil - hepsi özelleştirilebilir.

NoWhiteBackgroundColor için kullanıcı komut dosyalarında arama yapın .


Mükemmel çalışıyor - bu cevap olmalı
Mr_and_Mrs_D


4

Aşağıdaki Javascript, CSS ve HTML arka plan öğelerini geçersiz kılar ve geçerli sayfadaki siyah olan metin öğelerini geçersiz kılar, yalnızca konumunuza veya tarayıcı alanınıza yapıştırın:

javascript:(function(){
   var newSS,styles='* {background-color:black !important;color:white !important}
   :link,:link *{color:#99C0EB !important}
   :visited,:visited *{color:#C398EB !important}';

    if(document.createStyleSheet){
        document.createStyleSheet("javascript:'"+styles+"'");
    }else{
        newSS=document.createElement('link');
        newSS.rel='stylesheet';
        newSS.href='data:text/css,'+escape(styles);
        document.getElementsByTagName("head")[0].appendChild(newSS);
    }
})();

Ugh. Acı verici% 20.
Merhaba71 19

Bu, tüm öğelerin arka planını siyah, tüm öğelerini (sadece metin değil) beyaza döndürür.
Merhaba71 19

1
Bu gerçekten iyi çalışıyor. Değiştim siyah için lightgrey ve metin hala siyah yani, metin rengini değiştirir bölümünü kaldırıldı. Ve sonuç aslında oldukça iyi. Tek sorun, sadece beyaz olanı değil, her şeyin arka planını değiştirmesidir, bu yüzden bir çok şey gizlenir (buradaki SU'daki oy düğmeleri gibi). Bunu düzeltmenin bir yolu var mı?
Malabarba

1
@ hello71, bir şekilde bunu tarayıcımda yapıştırdığımda tüm alanları% 20 olarak değiştirdi. Bunlar kaldırıldı. Tüm arka planları siyah değiştirdi dedim, şimdi yalnızca metin arka planını siyah değiştirecek şekilde düzenledik, tekrar deneyin.
Dour Yüksek Kemeri,

4

Tarayıcı arama çubuğuna yazın about:config.

Arama alanına, yazın browser.display.background_color.

Dize çift tıklayın ve #FFFFFF(beyaz için onaltılık kod) olarak değiştirin #000000(siyah için onaltılık kod) veya istediğiniz herhangi bir rengi seçin ve tıklayın OK. Etkili olması için tarayıcıyı yeniden başlatın.


3

URL çubuğuna şunu yazın: config ve bu ayara gidin: browser.display.background_color

Burada ihtiyacınız varsa daha fazla bilgi .


1
Bu değişkeni değiştirmek sadece arkaplan rengi belirtmeyen web sayfalarında çalışır. Yalnızca google.com/firefox ve boş sekmelerde çalışabiliyordum .
Malabarba,

1
Firebug, sayfaları değiştirmenize izin verecektir, ancak siteyi her ziyaret ettiğinizde yapmanız gerekecektir. Sadece beyaz arka planı değiştirmek çok zor.
jer.salamon


3

Geçenlerde eski bilgisayarımı değiştirdim ve yeniden Firefox'u kurmam gerekiyordu. Yeniden yerleştirmek istediğim ana şeylerden biri, herhangi bir web sitesinin arka plan rengini değiştiren bir Greasemonkey betiği idi.

Bu yüzden, daha önce kullandığımı bulamadığım için biraz sinirlenmiştim. Uzun lafın kısası - işte benim eski bilgisayarımdan.

Bu senaryo benim işim değil

Bütün krediler Howard Smith’e gitmeli. Bu, başlangıçta şu anda kullanılamıyor gibi görünen Userscripts.org'da yayınlandı.

Greasemonkey'de yeni bir kullanıcı betiği oluşturun ve aşağıdakini yapıştırın:

(function () {
    function noWhiteBackgroundColor() {
        function changeBackgroundColor(x)  {  // Auto change colors too close to white
            var backgroundColorRGB = window.getComputedStyle(x, null).backgroundColor;  // Get background-color
            if(backgroundColorRGB != "transparent")  {  // Convert hexadecimal color to RGB color to compare
                var RGBValuesArray = backgroundColorRGB.match(/\d+/g); // Get RGB values
                var red   = RGBValuesArray[0];
                var green = RGBValuesArray[1];
                var blue  = RGBValuesArray[2];

                // ============================================================================
                // Set the base colors you require:
                // Use: http://www.colorpicker.com
                // to find the RGB values of the base colour you wish to
                // suppress white backgrounds with:
                // Default gray provided:
                // ============================================================================

                var red_needed   = 220;
                var green_needed = 220;
                var blue_needed  = 255;


                if (red>=220 && green>=220 && blue>=220) { // White range detection

                   if (red>=250 && red<=255 && green>=250 && green<=255 && blue>=250 && blue<=255) {
                      red_needed   += 0;
                      green_needed += 0; }

                   else if (red>=240 && red<=255 && green>=240 && green<=255 && blue>=240 && blue<=255) {
                      red_needed   += 6;
                      green_needed += 3; }

                   else if (red>=230 && red<=255 && green>=230 && green<=255 && blue>=230 && blue<=255) {
                      red_needed   += 10;
                      green_needed += 5; }

                   else if (red>=220 && red<=255 && green>=220 && green<=255 && blue>=220 && blue<=255) {
                      red_needed   += 14;
                      green_needed += 7; }

                   x.style.backgroundColor = "rgb( " + red_needed + ", " + green_needed + ", " + blue_needed + ")"; // The background-color you want
               }
            }
        }

        var allElements=document.getElementsByTagName("*"); // Get all elements on a page
        for(var i=0; i<allElements.length; i++)  {
            changeBackgroundColor(allElements[i]);}
    }
    window.addEventListener("DOMContentLoaded",noWhiteBackgroundColor, false);
})();

Bunu neredeyse iki yıldır kullanıyorum ve beyaz arka planı değiştiremediği web sitelerini düşünemiyorum.


Harika senaryo! Şimdi eğer Firefox’taki dahili sayfalarda şu şekilde çalışırsa: addons, about: config, about: newtab, view-source: * .. Kolayca içe aktarmak için en üste bir meta veri bölümü ekleyebilirsiniz. Bu komut dosyasını Color Toggle addon ile birlikte kullanıyorum.
jk7


2

renk veren

Ben kullanırım

Web sayfalarını, ton, doygunluk, hafiflik ve opaklık için gelişmiş kontrollerle renklendirin. Otomatik renklendirme için beyaz liste web alanları (isteğe bağlı!).

YENİ: Temaları metin olarak kopyalamak ve renk özelliklerini serbestçe gruplamak için sürükle ve bırak özelliğini kullanın.

PS: artı koyu Firefox teması


Ne yazık ki FF v57 ve üstü için geçerli değil.
KERR

1

Sol fare tuşu ile çubuğa tıklayın ve özelleştirin; yeşil bir ağaç göreceksiniz, çubuğa koyun ve tıklayın. Renkler değişecek ve yine de Düzenle -> tercih -> içerik -> renkler menü öğesinde kendi renklerinizi oluşturabilirsiniz.

Devre dışı bırak: sistem renklerini kullan ve sayfalara izin ver


0

Tam olarak neyin peşinde olduğunuzu olmasa da ... OS X'te küçük bir komut dosyasıyla birleştirilmiş bir yazılım kullanıyorum. Yazılımın adı Nocturne. Senaryo gün doğumu ve gün batımının coğrafi konumumda saatin kaç olduğunu öğreniyor. Sonra Nocturne'i gün batımından harekete geçirir ve güneş doğarken kapatır. Firefox’a özgü değil biliyorum, ancak herhangi bir tarayıcıda ve diğer pek çok yazılımda çalıştığı için kesinlikle güzel.


0

Eklenti http://addons.mozilla.org/en-US/firefox/addon/black-background-white-text , siyah renkler için farklı bir yönteme sahiptir. Yalnızca renkleri ve arka plan görüntülerini ters çevirir (ters çevirme renkleri, CSS veya JavaScript yöntemlerinde olduğu gibi sayfa tasarımını bozmaz). Onu seveceksin, beyaz moddaymış gibi hissediyorsun ve herhangi bir tema yüklemek zorunda değilsin.

Kurduktan sonra, varsayılan yöntemi "basit css" den "invert" e çevirin: menüde AraçlarEklentilerSiyah arkaplan ve beyaz metinSayfa renklerini değiştirme varsayılan yöntemiİnvert .

Not: Windows modunu da siyah olarak değiştirdiyseniz, varsayılan Firefox renk yönetimini devre dışı bırakmanın ve eklentinin tüm işleri yapmasına izin vermenin daha iyi olacağını göreceksiniz, şunu yapın: menü AraçlarSeçeneklerİçerikRenkler → seçimi kaldır "Sistem renklerini kullanın" ve "Sayfa seçimlerimde belirtilen renkleri geçersiz kıl" seçeneğinde "Hiçbir zaman" seçeneğini seçin.

Ardından Firefox'u yeniden başlatın!

İpucu: Eklenti, "invert" yönteminden "CSS" yöntemine veya "JavaScript" yöntemine modları devre dışı bırakmak veya değiştirmek için çubuğunuza bir düğme koyun.

İşte sonuç:

BlackFirefox


Bağlantı koptu ( Sayfa bulunamadı ).
Peter Mortensen

-1

Başka bir seçenek de arka plan rengini değiştirmek veya arkasını kaldırmak için Ring Topaz kullanmaktır .

Siteye girdiğinizde, web sitesinin URL'sini girin ve size daha okunaklı bir arka plan / yazı tipi rengi kombinasyonu seçin.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.