Zmień białe tło na stronach internetowych na inny kolor

47

Obecnie używam ciemnego motywu w przeglądarce Firefox. Wygląda naprawdę ładnie, ale wiele stron używa zwykłego białego tła. Wynikowy kontrast jest trochę nieprzyjemny i czasami boli oko, gdy przełączam się z ciemnej zakładki na białą.

Czy istnieje sposób, aby firefox zastąpił wszędzie białe desenie innym kolorem (na przykład jasnoszarym)? Może to być stylowy skrypt, hack userChrome.css lub cokolwiek, co działa (najlepiej tak lekkie, jak to możliwe).

Wyjaśnij: po osiągnięciu celu kolor tła przy każdej wizycie na stronie Superuser powinien być jasnoszary zamiast białego, podobnie jak każda inna strona z białym tłem (witryny Google, chrupki technologiczne itp.) ).

Czy jest na to sposób?

Malabarba
źródło
5
Odradzałbym to, większość stron internetowych używa wielu różnych klas i CSS do stylizacji tekstu. Co dzieje się, gdy masz czarne tło ORAZ czarny tekst, zgodnie ze stylem na stronie internetowej? Jakiego systemu operacyjnego używasz poza zainteresowaniem?
danixd
Windows 7 głównie, choć rozwiązanie niezależne od platformy byłoby lepsze, ponieważ używam również Ubuntnu w pracy. Wiem, że może to powodować pewne niezręczne zachowanie w niektórych witrynach, a tło musiałoby mieć kolor jasnoszary zamiast czarnego, aby tekst był czytelny. Ale to mnie niepokoi do tego stopnia, że ​​jestem gotów eksperymentować.
Malabarba
Różne dodatki mogą to zrobić - np. Addons.mozilla.org/En-us/firefox/addon/…
Wilf

Odpowiedzi:

21

Właśnie napisałem szybki skrypt Greasemonkey, który sprawdza obliczony styl bodyelementu i zmienia go na czarny (prawdopodobnie chcesz wybrać inny kolor):

(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;");
    }
})();

Problem z tego typu rzeczami polega na tym, że jeśli strony internetowe nie zostaną zaprojektowane wyjątkowo dobrze, pojawią się plamy bieli na czerni.

Cześć71
źródło
4
Wybacz moją ignorancję, ale gdzie wkleić ten skrypt? (dzięki za kłopoty)
Malabarba
@Bruce: Zainstaluj Greasemonkey, utwórz nowy skrypt użytkownika dla * i wklej go do edytora tekstu. Zapisz i odśwież stronę.
Cześć71,
Ok, ta metoda działa jak dotąd najlepiej. Nie zmienia tła pól tekstowych i kilku innych rzeczy, ale poza tym jest dobry. Myślę, że każde rozwiązanie i tak pozostawi kilka białych skrzynek. dzięki
Malabarba
Skrypty są gotowe do pobrania, po prostu przewiń w dół.
valentt,
14

Nie jest to idealne rozwiązanie, ale możesz to zrobić za każdym razem, gdy odwiedzasz witryny, w których chcesz zmienić tło.

W przeglądarce Firefox poniżej 38 przejdź do Tools > Options > Contenti kliknij Coloursprzycisk. W przeglądarce Firefox 38 i nowszych przejdź do Edit > Preferences > Contenti tam kliknij Colors.

Wybierz szary dla „Tła” i wyczyść pola wyboru obok „Zezwalaj stronom na wybieranie własnych kolorów, zamiast moich zaznaczeń powyżej” i „Użyj kolorów systemowych”.

alternatywny tekst

Mehper C. Palavuzlar
źródło
Ten zasługuje na głosowanie za to, że jest najłatwiejszy. Działa na prawie każdej stronie. Zmusza to jednak do zmiany koloru tekstu, co czyni go nieco gorszym od kilku innych metod.
Malabarba
2
@Bruce Connor: True. Z drugiej strony, w niektórych przypadkach, jeśli zmienisz kolor bg, będziesz musiał również zmienić kolor fg, aby uzyskać rozsądny kontrast. W praktyce konieczność zmiany koloru tekstu może nie być dużą wadą.
śleske
2
jeśli korzystasz z przeglądarki Firefox w sposób opisany tutaj, zaleca się użycie dodatku typu „Brak koloru”, aby szybko włączyć / wyłączyć (ponieważ zmiana kolorów spowoduje różne błędy na wielu stronach). Alternatywnie, użyj dodatku Pentadactyl, aby móc przypisać dowolne działanie do dowolnego klawisza (w tym przełączania dowolnej opcji Firefoksa).
Korwin
Nie zastępuje to koloru tła, gdy jest określony
Vlad
11

Zaktualizowałem skrypt Greasemonkey (Firefox), aby ukryć białe tło.

Skrypty będą działać w Chrome, jeśli zainstalujesz Tampermonkey.

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

To zmienia wszystkie białe tła na szare (ish) z pewnym cieniowaniem. Możesz skonfigurować i ustawić własny kolor podstawowy na podstawie kodu ogólnego. Renderowane są również odcienie bieli.

Mam trzy warianty: szary , różowy i zielony - wszystkie z nich można dostosować.

Wyszukaj w skryptach użytkownika noWhiteBackgroundColor .

Howardsmith
źródło
Działa idealnie - taka powinna być odpowiedź
Mr_and_Mrs_D
4

Ostatnio odkryłem ten dodatek do Firefoksa Stylowy . To zrobi, co chcesz i wiele więcej!

Pierre Watelet
źródło
4

Poniższy kod JavaScript zastąpi elementy tła CSS i HTML kolorem białym, a elementy tekstowe kolorem czarnym na bieżącej stronie, po prostu wklej go w polu lokalizacji lub przeglądarki:

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);
    }
})();
Dour High Arch
źródło
Ugh. Bolesne% 20.
Cześć71,
Powoduje to, że wszystkie elementy tła stają się czarne, a wszystkie elementy (nie tylko tekst) stają się białe.
Cześć71,
1
To naprawdę działa dobrze. Zmieniłem kolor czarny na jasnoszary i usunąłem część, która zmienia kolor tekstu, więc tekst jest nadal czarny. Rezultat jest całkiem niezły. Jedynym problemem jest to, że zmienia tło absolutnie wszystkiego, nie tylko tego, co jest białe, więc ukrywa się wiele rzeczy (np. Przyciski głosowania tutaj w SU). Czy istnieje sposób, aby to naprawić?
Malabarba
1
@ hello71, jakoś wkleiłem to w przeglądarce, zmieniłem wszystkie spacje na% 20. Zostały one usunięte. Powiedziałem, że zmieniło wszystkie tła na czarne, edytowałem to, aby teraz zmieniać tylko tła tekstowe na czarne, spróbuj ponownie.
Dour High Arch
4

W pasku wyszukiwania przeglądarki wpisz about:config.

W polu wyszukiwania wpisz browser.display.background_color.

Kliknij dwukrotnie ciąg i zmień #FFFFFF(kod szesnastkowy na biały) na #000000(kod szesnastkowy na czarny) lub dowolny inny kolor i kliknij OK. Uruchom ponownie przeglądarkę, aby zaczęła obowiązywać.

Canabliss
źródło
3

W pasku adresu URL wpisz about: config i przejdź do tego ustawienia: browser.display.background_color

Więcej informacji, jeśli jest to potrzebne tutaj .

jer.salamon
źródło
1
Zmiana tej zmiennej działa tylko na stronach internetowych, które nie określają koloru tła. Mogłem go tylko uruchomić na google.com/firefox i na pustych kartach.
Malabarba
1
Firebug pozwoli ci zmieniać strony, ale będziesz musiał to robić przy każdej wizycie na stronie. Zmiana tylko białego tła jest dość trudna.
jer.salamon
3

Niedawno wymieniłem mój stary komputer i musiałem ponownie skonfigurować Firefoksa. Jedną z głównych rzeczy, które chciałem przywrócić, był skrypt Greasemonkey, który zmieniał kolor tła każdej strony internetowej.

Byłem więc trochę zirytowany, że nie mogłem znaleźć tego, którego użyłem wcześniej. Krótka historia - oto ta z mojego starego komputera.

Ten skrypt nie jest moją własną pracą

Wszystkie środki należy przekazać Howardowi Smithowi. Zostało to pierwotnie opublikowane na Userscripts.org, który obecnie wydaje się niedostępny.

Wystarczy utworzyć nowy skrypt użytkownika w Greasemonkey i wkleić następujące:

(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);
})();

Używam tego od prawie dwóch lat i nie mogę wymyślić żadnych stron internetowych, których nie zmieniłoby białe tło.

Bahamunt
źródło
Świetny scenariusz! Teraz, gdyby tylko działało dla wewnętrznych stron w Firefoksie, takich jak about: addons, about: config, about: newtab, view-source: * .. Możesz dodać sekcję metadanych u góry, aby ułatwić importowanie. Używam tego skryptu w połączeniu z dodatkiem Color Toggle.
jk7
2

Colorific

Używam tego.

Koloruj strony internetowe za pomocą zaawansowanych opcji kontroli odcienia, nasycenia, jasności i krycia. Domeny internetowe z białej listy do automatycznego kolorowania (opcjonalnie!).

NOWOŚĆ: przeciągnij i upuść, aby skopiować motywy jako tekst i dowolnie grupować właściwości kolorów.

PS: plus ciemny motyw Firefoksa

FFuser
źródło
Niestety niedostępne dla FF v57 i nowszych.
KERR
1

Kliknij pasek lewym przyciskiem myszy i dostosuj, a zobaczysz zielone drzewo, umieść je w pasku i kliknij na nim. Kolory się zmienią i nadal możesz tworzyć własne kolory w menu Edycja -> preferencje -> treść -> kolory.

Wyłącz: używaj kolorów systemowych i zezwalaj na strony

José
źródło
0

Chociaż nie do końca to, czego szukasz ... Używam oprogramowania w połączeniu z małym skryptem w OS X. Oprogramowanie nazywa się Nocturne. Skrypt sprawdza, kiedy godzina wschodu i zachodu słońca jest w mojej lokalizacji geograficznej. Następnie aktywuje Nokturn o zachodzie słońca i wyłącza go o wschodzie słońca. Wiem, że nie jest specyficzny dla Firefoksa, ale z pewnością jest fajny, ponieważ działa na dowolnej przeglądarce i większości innych programów.

Everett
źródło
0

Dodatek http://addons.mozilla.org/en-US/firefox/addon/black-background-white-text ma inną metodę dla czarnych kolorów. Odwraca tylko kolory i obrazy tła (odwracanie kolorów nie zniszczy projektu strony, jak w metodach CSS lub JavaScript). Pokochasz go, poczujesz się, jakbyś był w trybie białym i nie musisz instalować żadnego motywu.

Po instalacji zmień domyślną metodę z „prosty css” na „odwróć” w: menu NarzędziaDodatkiCzarne tło i biały tekstDomyślna metoda zmiany kolorów stronyOdwróć .

Uwaga: jeśli zmieniłeś również tryb Windows na czarny, lepiej będzie wyłączyć domyślne zarządzanie kolorami Firefoksa i pozwolić, aby dodatek wykonał całą pracę, zrób to: menu NarzędziaOpcjeTreśćKolory → odznacz „Użyj kolorów systemowych” i wybierz „Nigdy” w „Zastąp kolory określone przez stronę z moimi zaznaczeniami powyżej”.

Następnie uruchom ponownie Firefox!

Wskazówka: dodatek umieszcza przycisk na pasku, aby wyłączyć lub zmienić tryby z metody „invert” na metodę „CSS” lub „JavaScript”.

Oto wynik:

BlackFirefox

Badr Elmers
źródło
Link jest uszkodzony ( nie znaleziono strony ).
Peter Mortensen,
-1

Inną opcją jest po prostu użycie Ring of Topaz, aby zmienić kolory tła lub usunąć tył.

Po przejściu na stronę wprowadź adres URL witryny i wybierz bardziej czytelną kombinację kolorów tła / czcionki.

BlackRaider
źródło