Ubah latar belakang putih di halaman web ke warna lain


46

Saat ini saya menggunakan tema gelap di Firefox. Ini terlihat sangat bagus, tetapi banyak halaman web menggunakan latar belakang putih polos. Kontras yang dihasilkan sedikit tidak menyenangkan dan terkadang menyakitkan mata ketika saya beralih dari tab gelap ke tab putih.

Apakah ada cara untuk membuat firefox menggantikan backgrouns putih di mana-mana dengan warna lain (abu-abu muda, misalnya)? Ini bisa berupa skrip bergaya, retasan userChrome.css, atau apa pun yang berfungsi (sebaiknya seringan mungkin).

Untuk memperjelas diri saya: setelah saya mencapai tujuan saya, warna latar belakang setiap kali saya mengunjungi situs Superuser harus abu-abu terang, bukan putih, dan hal yang sama harus terjadi pada situs lain dengan latar belakang putih (situs google, krisis teknologi, dll. ).

Apakah ada cara untuk melakukan itu?


5
Saya akan merekomendasikan hal ini, sebagian besar situs web menggunakan banyak kelas dan CSS berbeda untuk penataan teks. Apa yang terjadi ketika Anda memiliki latar belakang hitam DAN teks hitam, sesuai gaya pada halaman web? OS apa yang Anda gunakan karena minat?
danixd

Windows 7 kebanyakan, meskipun solusi platform independen akan lebih baik karena saya juga menggunakan ubuntnu di tempat kerja. Saya tahu ini mungkin menyebabkan perilaku canggung dengan beberapa situs, dan latar belakangnya harus abu-abu terang, bukan hitam sehingga teksnya dapat dibaca. Tetapi hal ini mengganggu saya sampai-sampai saya mau bereksperimen.
Malabarba

Berbagai addons dapat melakukan semacam ini - mis. Addons.mozilla.org/En-us/firefox/addon/…
Wilf

Jawaban:


21

Saya baru saja menulis skrip Greasemonkey cepat yang memeriksa gaya bodyelemen yang dikomputasi dan mengubahnya menjadi hitam (Anda mungkin ingin memilih warna yang berbeda):

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

Masalah dengan hal-hal semacam ini adalah bahwa kecuali situs web dirancang dengan sangat baik, akan ada bercak putih di atas hitam.


4
Maafkan ketidaktahuan saya, tetapi di mana saya menempelkan skrip ini? (terima kasih atas masalahnya)
Malabarba

@ Bruce: Instal Greasemonkey, buat skrip pengguna baru untuk *, dan rekatkan ini ke editor teks. Simpan, dan segarkan halaman.
Hello71

Ok, metode ini bekerja sejauh ini. Itu tidak mengubah latar belakang kotak teks dan beberapa hal lainnya, tapi selain itu bagus. Saya kira solusi apa pun akan meninggalkan beberapa kotak putih di sekitar. terima kasih
Malabarba

Ada skrip yang siap diunduh, cukup gulir ke bawah.
valentt

14

Ini bukan solusi yang sempurna tetapi Anda bisa melakukan ini setiap kali Anda mengunjungi situs yang ingin Anda ubah latar belakangnya.

Di Firefox di bawah 38, buka Tools > Options > Contentdan klik Colourstombol. Di Firefox 38 dan lebih tinggi, buka Edit > Preferences > Contentdan klik di sana Colors.

Pilih abu-abu untuk "Latar Belakang", dan kosongkan kotak centang di dekat "Izinkan halaman untuk memilih warna mereka sendiri, bukan pilihan saya di atas" dan "Gunakan warna sistem".

teks alternatif


Yang ini pantas mendapatkan suara untuk menjadi yang termudah. Ini berfungsi di hampir setiap situs. Ini memaksa Anda untuk mengubah warna teks, dan itu membuatnya sedikit kalah dengan beberapa metode lainnya.
Malabarba

2
@ Bruce Connor: Benar. Di sisi lain, dalam beberapa kasus jika Anda mengubah warna bg, Anda harus mengubah warna fg juga, untuk mendapatkan kontras yang masuk akal. Jadi dalam prakteknya harus mengubah warna teks mungkin bukan kelemahan besar.
sleske

2
jika Anda menggunakan opsi Firefox seperti yang dijelaskan di sini, disarankan untuk menggunakan addon seperti "Tidak Berwarna" untuk mengaktifkan / mematikannya dengan cepat (karena mengubah warna akan menyebabkan berbagai bug di banyak situs). Atau, gunakan Pentadactyl addon untuk dapat menetapkan tindakan apa pun ke tombol apa pun (termasuk toggling opsi Firefox).
corvinus

Ini tidak mengesampingkan warna latar belakang ketika seseorang ditentukan
Vlad

11

Saya telah memperbarui skrip Greasemonkey (Firefox) untuk menekan latar belakang putih.

Skrip akan bekerja di Chrome jika Anda menginstal Tampermonkey.

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

Ini mengubah semua latar belakang putih menjadi abu-abu (ish) dengan beberapa bayangan. Anda dapat mengkonfigurasi dan mengatur warna dasar Anda sendiri dari kode generik. Nuansa putih juga ditampilkan.

Saya memiliki tiga varian: Gray , Pink , dan Green - yang semuanya dapat dikustomisasi.

Cari di skrip pengguna untuk noWhiteBackgroundColor .


Berfungsi sempurna - ini seharusnya jawabannya
Mr_and_Mrs_D

4

Saya menemukan akhir-akhir ini addon firefox ini Bergaya . Ini akan melakukan apa yang Anda inginkan & banyak lagi!


4

Javascript berikut akan menimpa elemen latar belakang CSS dan HTML dengan warna putih dan elemen teks dengan warna hitam pada halaman saat ini, cukup tempelkan ke lokasi Anda atau bidang browser:

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. Nyeri% 20.
Hello71

Ini mengubah latar belakang semua elemen menjadi hitam, dan semua elemen (bukan hanya teks) menjadi putih.
Hello71

1
Ini benar-benar berfungsi dengan baik. Saya mengubah hitam menjadi lightgrey , dan menghapus bagian yang mengubah warna teks, jadi teksnya masih hitam. Dan hasilnya sebenarnya cukup bagus. Satu-satunya masalah adalah bahwa hal itu mengubah latar belakang segalanya, bukan hanya apa yang putih, jadi banyak hal yang disembunyikan (seperti tombol suara di SU). Apakah ada cara untuk memperbaikinya?
Malabarba

1
@ hello71, entah bagaimana ketika saya menempelkan ini di browser saya itu mengubah semua ruang menjadi% 20. Ini telah dihapus. Saya mengatakan itu mengubah semua latar belakang hitam, saya telah mengeditnya untuk sekarang hanya mengubah latar belakang teks hitam, coba lagi.
Dour High Arch

4

Di bilah pencarian browser, ketik about:config.

Di bidang pencarian, ketik browser.display.background_color.

Klik dua kali pada string dan ubah #FFFFFF(kode heksadesimal untuk putih) menjadi #000000(kode heksadesimal untuk hitam) atau warna lain yang Anda inginkan dan klik OK. Mulai ulang browser agar mulai berlaku.


3

Pada bilah URL ketik about: config dan navigasikan ke pengaturan ini: browser.display.background_color

Info lebih lanjut jika Anda membutuhkannya di sini .


1
Mengubah variabel ini hanya berfungsi pada halaman web yang tidak menentukan warna latar belakang. Saya hanya bisa membuatnya bekerja di google.com/firefox dan pada tab kosong.
Malabarba

1
Firebug akan memungkinkan Anda untuk mengubah halaman tetapi Anda harus melakukannya setiap kali Anda mengunjungi situs. Mengubah hanya latar belakang putih agak sulit.
jer.salamon


3

Saya baru-baru ini mengganti komputer lama saya dan perlu mengatur Firefox lagi. Salah satu hal utama yang ingin saya pulihkan adalah skrip Greasemonkey yang mengubah warna latar belakang situs web mana pun.

Karena itu saya agak kesal karena saya tidak dapat menemukan yang saya gunakan sebelumnya. Singkat cerita - ini adalah salah satu dari PC lama saya.

Skrip ini bukan karya saya sendiri

Semua kredit harus diberikan kepada Howard Smith. Ini awalnya diposting di Userscripts.org yang sekarang tampaknya tidak tersedia.

Cukup buat skrip pengguna baru di Greasemonkey dan rekatkan yang berikut di:

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

Saya telah menggunakan ini selama hampir dua tahun dan tidak dapat memikirkan situs web mana yang gagal mengubah latar belakang putih.


Naskah yang bagus! Sekarang jika itu hanya akan berfungsi untuk halaman internal di Firefox seperti tentang: addons, about: config, about: newtab, view-source: * .. Anda dapat menambahkan bagian metadata di bagian atas untuk memudahkan impor. Saya menggunakan skrip ini dalam kombinasi dengan addon Toggle Warna.
jk7


2

Yg mewarnai

Aku menggunakannya.

Warnai halaman web dengan kontrol canggih untuk rona, saturasi, cahaya, dan opacity. Daftar putih domain web untuk pewarnaan otomatis (opsional!).

BARU: Gunakan drag-and-drop untuk menyalin tema sebagai teks dan untuk secara bebas mengelompokkan properti warna.

PS: ditambah tema Firefox gelap


Sayangnya tidak tersedia untuk FF v57 ke atas.
KERR

1

Klik pada bilah dengan tombol kiri mouse dan sesuaikan dan Anda akan melihat pohon hijau, letakkan di bilah dan klik. Warna akan berubah dan Anda masih dapat membuat warna sendiri di item menu Edit -> preferensi -> konten -> warna.

Nonaktifkan: gunakan warna sistem dan izinkan halaman


0

Meskipun tidak persis apa yang Anda cari ... Saya menggunakan perangkat lunak ditambah dengan skrip kecil di OS X. Perangkat lunak ini disebut Nocturne. Script mengetahui jam berapa matahari terbit dan terbenam di lokasi geografis saya. Kemudian mengaktifkan Nocturne saat matahari terbenam, dan mematikannya saat matahari terbit. Tidak spesifik untuk Firefox yang saya tahu, tapi itu pasti bagus karena berfungsi pada browser apa pun, dan sebagian besar perangkat lunak lainnya.


0

Add-on http://addons.mozilla.org/en-US/firefox/addon/black-background-white-text memiliki metode berbeda untuk warna hitam. Ini membalikkan warna dan gambar latar belakang saja (warna terbalik tidak akan merusak desain halaman seperti dalam metode CSS atau JavaScript). Anda akan menyukainya, Anda merasa seperti berada dalam mode putih, dan Anda tidak perlu menginstal tema apa pun.

Setelah menginstal, ubah metode default dari "simple css" ke "invert" di: menu ToolsAdd-onsBlack background dan white textMetode default untuk mengubah warna halamanInvert .

NB: Jika Anda telah mengubah mode Windows menjadi hitam juga, maka Anda akan merasa lebih baik untuk menonaktifkan manajemen warna Firefox default dan membiarkan add-on melakukan semua pekerjaan, lakukan ini: menu AlatPilihanKontenWarna → hapus centang "Gunakan warna sistem" dan pilih "Tidak pernah" di "Override warna yang ditentukan oleh halaman dengan pilihan saya di atas".

Kemudian mulai ulang Firefox!

Kiat: Add-on meletakkan tombol di bilah Anda untuk menonaktifkan atau mengubah mode dari metode "terbalik" menjadi metode "CSS" atau metode "JavaScript".

Inilah hasilnya:

BlackFirefox


Tautan rusak ( Halaman tidak ditemukan ).
Peter Mortensen

-1

Pilihan lain adalah dengan menggunakan Ring of Topaz untuk mengubah warna latar belakang atau menghapus bagian belakang.

Setelah Anda pergi ke situs, masukkan URL situs web, dan pilih kombinasi warna latar / font yang lebih mudah dibaca oleh Anda.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.