Alterar o plano de fundo branco nas páginas da web para outra cor


47

Atualmente, estou usando um tema sombrio no Firefox. Parece realmente bom, mas muitas páginas da Web usam um fundo branco liso. O contraste resultante é um pouco desagradável e às vezes magoa os olhos quando alterno de uma aba escura para uma aba branca.

Existe uma maneira de fazer o firefox substituir os fundos brancos em todos os lugares por alguma outra cor (cinza claro, por exemplo)? Pode ser um script estiloso, um hack do userChrome.css ou qualquer coisa que funcione (de preferência o mais leve possível).

Para me esclarecer: depois de atingir meu objetivo, a cor do plano de fundo sempre que visito o site Superuser deve ser cinza claro em vez de branco, e o mesmo deve acontecer com qualquer outro site com fundo branco (sites do Google, crise de tecnologia etc.) )

Existe uma maneira de fazer isso?


5
Eu recomendaria contra isso, a maioria dos sites usa várias classes e CSS diferentes para o estilo do texto. O que acontece quando você tem um plano de fundo preto e texto preto, conforme estilizado na página da web? Qual sistema operacional você usa por interesse?
Danixd 27/08/10

Windows 7 principalmente, embora uma solução independente de plataforma seja melhor porque eu também uso o ubuntnu no trabalho. Eu sei que isso pode causar algum comportamento estranho em alguns sites, e o plano de fundo deve ser cinza claro em vez de preto, para que o texto seja legível. Mas isso está me incomodando a tal ponto que estou disposto a experimentar.
Malabarba 28/08/10

Vários complementos podem fazer isso - por exemplo, addons.mozilla.org/En-us/firefox/addon/…
Wilf

Respostas:


21

Acabei de escrever um rápido script Greasemonkey que verifica o estilo computado do bodyelemento e o altera para preto (você provavelmente deseja escolher uma cor diferente):

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

O problema com esses tipos de coisas é que, a menos que os sites sejam projetados extremamente bem, haverá manchas brancas no preto.


4
Perdoe minha ignorância, mas onde colo esse script? (graças para o problema)
Malabarba

@ Bruce: Instale o Greasemonkey, crie um novo script de usuário para * e cole-o no editor de texto. Salve e atualize a página.
precisa saber é o seguinte

Ok, esse método funciona melhor até agora. Não muda o fundo das caixas de texto e outras coisas, mas, além disso, é bom. Eu acho que qualquer solução deixará algumas caixas brancas espalhadas de qualquer maneira. graças
Malabarba

Existem scripts prontos para download, basta rolar para baixo.
valentt

14

Esta não é uma solução perfeita, mas você pode fazer isso sempre que visitar os sites em que deseja alterar o plano de fundo.

No Firefox abaixo de 38, vá para Tools > Options > Contente clique no Coloursbotão. No Firefox 38 e superior, acesse Edit > Preferences > Contente clique em Colors.

Selecione cinza para "Plano de fundo" e desmarque as caixas de seleção próximas a "Permitir que as páginas escolham suas próprias cores, em vez das minhas opções acima" e "Usar cores do sistema".

texto alternativo


Este merece uma votação por ser o mais fácil. Funciona em quase todos os sites. No entanto, obriga você a alterar a cor do texto e isso o torna um pouco inferior a alguns outros métodos.
Malabarba 28/08/10

2
@Bruce Connor: Verdade. Por outro lado, em alguns casos, se você alterar a cor bg, também será necessário alterar a cor fg para obter um contraste razoável. Portanto, na prática, alterar a cor do texto pode não ser uma grande desvantagem.
Sleske # 21/11

2
se você usar a opção Firefox como a descrita aqui, é recomendável usar complementos como "Sem cor" para ativar / desativar rapidamente (porque a alteração de cores causará vários bugs em muitos sites). Como alternativa, use o complemento Pentadactyl para poder atribuir qualquer ação a qualquer tecla (incluindo qualquer opção de alternância do Firefox).
Corvinus

Isso não substituir a cor de fundo quando se está especificado
Vlad

11

Eu atualizei um script Greasemonkey (Firefox) para suprimir fundos brancos.

Os scripts funcionarão no Chrome se você instalar o Tampermonkey.

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

Isso altera todos os fundos brancos para cinza (ish) com algum sombreamento. Você pode configurar e definir sua própria cor base no código genérico. Tons de branco também são renderizados.

Eu tenho três variantes: cinza , rosa e verde - todas as quais podem ser personalizadas.

Pesquise nos scripts do usuário por noWhiteBackgroundColor .


Funciona perfeitamente - isto deve ser a resposta
Mr_and_Mrs_D


4

O Javascript a seguir substituirá os elementos de plano de fundo CSS e HTML por branco e os elementos de texto por preto na página atual, basta colá-lo no seu local ou campo do navegador:

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

Isso transforma o fundo de todos os elementos em preto e todos os elementos (e não apenas o texto) em branco.
Hello71

1
Isso realmente funciona bem. Mudei preto para lightgrey , e removeu a parte que muda a cor do texto, de modo que o texto ainda é preto. E o resultado é realmente muito bom. A única questão é que ele muda o plano de fundo de absolutamente tudo, não apenas o branco, então muitas coisas ficam ocultas (como os botões de voto aqui no SU). Existe uma maneira de consertar isso?
Malabarba 28/08/10

1
@ hello71, de alguma forma, quando colei isso no meu navegador, mudou todos os espaços para% 20. Estes foram removidos. Eu disse que ele mudou todos os fundos em preto, editei para agora alterar apenas os fundos em texto em preto, tente novamente.
Dour High Arch

4

Na barra de pesquisa do navegador, digite about:config.

No campo de pesquisa, digite browser.display.background_color.

Clique duas vezes na string e altere #FFFFFF(código hexadecimal para branco) para #000000(código hexadecimal para preto) ou qualquer outra cor desejada e clique OK. Reinicie o navegador para que ele entre em vigor.


3

Na barra de URL, digite about: config e navegue até esta configuração: browser.display.background_color

Mais informações, se você precisar aqui .


1
Alterar essa variável funciona apenas em páginas da web que não especificam uma cor de plano de fundo. Só consegui fazê-lo funcionar em google.com/firefox e em guias em branco.
Malabarba 27/08/10

1
O Firebug permitirá que você altere as páginas, mas você precisaria fazer isso sempre que visitar o site. Alterar apenas fundos brancos é meio difícil.
precisa saber é o seguinte


3

Recentemente substituí meu computador antigo e precisava configurar o Firefox novamente. Uma das principais coisas que eu gostaria de restabelecer era um script Greasemonkey que alterava a cor de fundo de qualquer site.

Fiquei, portanto, um pouco irritado por não encontrar o que havia usado antes. Para encurtar a história - aqui está o do meu PC antigo.

Este script não é meu próprio trabalho

Todo o crédito deve ir para Howard Smith. Isso foi originalmente publicado em Userscripts.org, que agora parece estar indisponível.

Simplesmente crie um novo script de usuário no Greasemonkey e cole o seguinte em:

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

Uso isso há quase dois anos e não consigo pensar em sites que não tenham mudado o plano de fundo branco.


Ótimo roteiro! Agora, se ao menos funcionasse para as páginas internas do Firefox, como about: addons, about: config, about: newtab, view-source: * .. Você pode adicionar uma seção de metadados na parte superior para facilitar a importação. Estou usando esse script em combinação com o addon Color Toggle.
Jk7


2

Colorific

Eu uso-o.

Colorir páginas da web por meio de controles avançados de matiz, saturação, luminosidade e opacidade. Domínios da lista branca para colorir automaticamente (opcional!).

NOVO: Use o recurso de arrastar e soltar para copiar temas como texto e agrupar livremente propriedades de cores.

PS: além do tema escuro do Firefox


Infelizmente, não está disponível para o FF v57 e superior.
KERR

1

Clique na barra com o botão esquerdo do mouse e personalize e você verá uma árvore verde, coloque-a na barra e clique nela. As cores mudarão e você ainda poderá criar suas próprias cores no item de menu Editar -> preferência -> conteúdo -> cores.

Desativar: use cores do sistema e permita páginas


0

Embora não seja exatamente o que você está procurando ... Eu uso um software associado a um pequeno script no OS X. O software é chamado Nocturne. O script descobre que horas são o nascer e o pôr do sol na minha localização geográfica. Em seguida, ele ativa o Nocturne ao pôr do sol e o desliga ao nascer do sol. Não é específico do Firefox, eu sei, mas com certeza é legal, pois funciona em qualquer navegador e na maioria dos outros softwares.


0

O complemento http://addons.mozilla.org/en-US/firefox/addon/black-background-white-text possui um método diferente para as cores pretas. Inverte apenas as cores e as imagens de plano de fundo (a inversão de cores não destrói o design da página, como nos métodos CSS ou JavaScript). Você vai adorar, sente que está no modo branco e não precisa instalar nenhum tema.

Após a instalação, altere o método padrão de "css simples" para "inverter" em: menu FerramentasComplementosFundo preto e texto em brancoMétodo padrão para alterar as cores da páginaInverter .

Nota: Se você alterou o modo Windows para preto também, será melhor desativar o gerenciamento de cores padrão do Firefox e deixar o complemento fazer todo o trabalho, faça o seguinte: menu FerramentasOpçõesConteúdoCores → desmarcar "Use cores do sistema" e selecione "Nunca" em "Substituir as cores especificadas pela página pelas minhas seleções acima".

Então reinicie o Firefox!

Dica: o complemento coloca um botão na sua barra para desativar ou alterar os modos do método "invert" para o método "CSS" ou "JavaScript".

Aqui está o resultado:

BlackFirefox


O link está quebrado ( Página não encontrada ).
Peter Mortensen

-1

Outra opção é usar apenas o anel de topázio para alterar as cores de fundo ou remover as costas.

Depois de acessar o site, digite o URL do site e escolha uma combinação de cores de fundo / fonte mais legível para você.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.