Cambiar el fondo blanco de las páginas web a otro color.


47

Actualmente estoy usando un tema oscuro en Firefox. Se ve muy bien, pero muchas páginas web usan un fondo blanco liso. El contraste resultante es un poco desagradable y a veces duele la vista cuando cambio de una pestaña oscura a una pestaña blanca.

¿Hay alguna manera de hacer que Firefox reemplace los fondos blancos en todas partes con algún otro color (gris claro, por ejemplo)? Podría ser un script con estilo, un truco userChrome.css o cualquier cosa que funcione (preferiblemente lo más ligero posible).

Para aclararme: después de lograr mi objetivo, el color de fondo cada vez que visite el sitio de Superusuario debería ser gris claro en lugar de blanco, y lo mismo debería suceder con cualquier otro sitio con un fondo blanco (sitios de Google, tecnología, etc.) )

¿Hay una manera de hacerlo?


55
Recomendaría contra esto, la mayoría de los sitios web usan muchas clases diferentes y CSS para el estilo de texto. ¿Qué sucede cuando tienes un fondo negro Y un texto negro, según el estilo de la página web? ¿Qué sistema operativo utilizas por interés?
danixd

Windows 7 en su mayoría, aunque una solución independiente de la plataforma sería mejor porque también uso ubuntnu en el trabajo. Sé que podría causar un comportamiento incómodo con algunos sitios, y el fondo tendría que ser gris claro en lugar de negro para que el texto sea legible. Pero esto me ha estado molestando hasta el punto de que estoy dispuesto a experimentar.
Malabarba

Varios complementos pueden hacer esto, por ejemplo, addons.mozilla.org/En-us/firefox/addon/…
Wilf

Respuestas:


21

Acabo de escribir un script rápido de Greasemonkey que verifica el estilo calculado del bodyelemento y lo cambia a negro (probablemente desee elegir un color 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;");
    }
})();

El problema con este tipo de cosas es que, a menos que los sitios web estén diseñados extremadamente bien, habrá manchas de blanco sobre negro.


44
Perdona mi ignorancia, pero ¿dónde pego este script? (gracias por el problema)
Malabarba

@Bruce: instale Greasemonkey, cree un nuevo script de usuario para * y péguelo en el editor de texto. Guarde y actualice la página.
Hola71

Ok, este método funciona mejor hasta ahora. No cambia el fondo de los cuadros de texto y un par de cosas más, pero aparte de eso, es bueno. Supongo que cualquier solución dejará algunas cajas blancas tiradas de todos modos. gracias
Malabarba

Hay scripts listos para descargar, solo desplácese hacia abajo.
Valentt

14

Esta no es una solución perfecta, pero puede hacerlo siempre que visite los sitios en los que desea cambiar el fondo.

En Firefox debajo de 38, vaya Tools > Options > Contenty haga clic en el Coloursbotón. En Firefox 38 y superior, vaya Edit > Preferences > Contenty haga clic allí Colors.

Seleccione gris para el "Fondo" y desactive las casillas de verificación cerca de "Permitir que las páginas elijan sus propios colores, en lugar de mis selecciones anteriores" y "Usar colores del sistema".

texto alternativo


Este merece un voto por ser el más fácil. Funciona en casi todos los sitios. Sin embargo, te obliga a cambiar el color del texto, y eso lo hace ligeramente inferior a otros métodos.
Malabarba

2
@Bruce Connor: Cierto. Por otro lado, en muchos casos, si cambia el color bg, deberá cambiar también el color fg para obtener un contraste razonable. Entonces, en la práctica, tener que cambiar el color del texto puede no ser un gran inconveniente.
sleske

2
Si usa la opción de Firefox como se describe aquí, se recomienda usar un complemento como "Sin color" para activarlo / desactivarlo rápidamente (porque cambiar los colores causará varios errores en muchos sitios). Alternativamente, use el complemento Pentadactyl para poder asignar cualquier acción a cualquier tecla (incluida cualquier opción de Firefox).
corvinus

Esto no anula el color de fondo cuando se especifica uno
Vlad

11

He actualizado un script de Greasemonkey (Firefox) para suprimir fondos blancos.

Las secuencias de comandos funcionarán en Chrome si instala Tampermonkey.

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

Esto cambia todos los fondos blancos a gris (ish) con algo de sombreado. Puede configurar y establecer su propio color base a partir del código genérico. También se representan sombras de blanco.

Tengo tres variantes: gris , rosa y verde , todas las cuales se pueden personalizar.

Busque en los scripts de usuario noWhiteBackgroundColor .


Funciona perfectamente, esta debería ser la respuesta
Mr_and_Mrs_D


4

El siguiente Javascript anulará los elementos de fondo CSS y HTML con blanco y los elementos de texto con negro en la página actual, simplemente péguelo en su ubicación o campo del 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.
Hola71

Esto convierte el fondo de todos los elementos en negro y todos los elementos (no solo el texto) en blanco.
Hola71

1
Esto realmente funciona bien. Cambié el negro a gris claro y eliminé la parte que cambia el color del texto, por lo que el texto sigue siendo negro. Y el resultado es bastante bueno. El único problema es que cambia el fondo de absolutamente todo, no solo lo que es blanco, por lo que se ocultan muchas cosas (como los botones de voto aquí en SU). ¿Hay alguna manera de arreglar eso?
Malabarba

1
@ hello71, de alguna manera, cuando pegué esto en mi navegador, cambió todos los espacios a% 20. Estos han sido eliminados. Dije que cambió todos los fondos en negro, lo he editado para cambiar ahora solo los fondos de texto en negro, intente nuevamente.
Dour High Arch

4

En la barra de búsqueda del navegador, escriba about:config.

En el campo de búsqueda, escriba browser.display.background_color.

Haga doble clic en la cadena y cambie #FFFFFF(código hexadecimal para blanco) a #000000(código hexadecimal para negro) o cualquier otro color que desee y haga clic OK. Reinicie el navegador para que surta efecto.


3

En la barra de URL, escriba about: config y navegue a esta configuración: browser.display.background_color

Más información si la necesita aquí .


1
Cambiar esta variable solo funciona en páginas web que no especifican un color de fondo. Solo pude hacerlo funcionar en google.com/firefox y en pestañas en blanco.
Malabarba

1
Firebug te permitirá cambiar de página, pero deberías hacerlo cada vez que visites el sitio. Cambiar solo fondos blancos es un poco difícil.
jer.salamon


3

Recientemente reemplacé mi vieja computadora y necesitaba configurar Firefox nuevamente. Una de las cosas principales que deseaba restablecer era un script de Greasemonkey que cambiaba el color de fondo de cualquier sitio web.

Por lo tanto, estaba un poco molesto porque no pude encontrar el que había usado antes. Larga historia corta: aquí está la de mi vieja PC.

Este guión no es mi propio trabajo

Todo el crédito debe ir a Howard Smith. Esto se publicó originalmente en Userscripts.org que ahora parece no estar disponible.

Simplemente cree un nuevo script de usuario en Greasemonkey y pegue lo siguiente en:

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

He estado usando esto durante casi dos años y no puedo pensar en ningún sitio web que no haya podido cambiar el fondo blanco.


Gran guión! Ahora, si solo funcionara para las páginas internas en Firefox, como about: addons, about: config, about: newtab, view-source: * .. Puede agregar una sección de metadatos en la parte superior para facilitar la importación. Estoy usando este script en combinación con el complemento Color Toggle.
jk7


2

Colorífico

Lo uso.

Colorea las páginas web mediante controles avanzados de matiz, saturación, luminosidad y opacidad. Lista blanca de dominios web para la coloración automática (¡opcional!).

NUEVO: utilice la función de arrastrar y soltar para copiar temas como texto y agrupar libremente las propiedades de color.

PD: más el tema oscuro de Firefox


Lamentablemente, no está disponible para FF v57 y superior.
KERR

1

Haga clic en la barra con el botón izquierdo del mouse y personalice y verá un árbol verde, colóquelo en la barra y haga clic en él. Los colores cambiarán y aún puede crear sus propios colores en el elemento de menú Editar -> preferencia -> contenido -> colores.

Deshabilitar: use colores del sistema y permita páginas


0

Aunque no es exactamente lo que busca ... Utilizo un software junto con un pequeño script en OS X. El software se llama Nocturne. El script descubre a qué hora están el amanecer y el atardecer en mi ubicación geográfica. Luego activa Nocturne al anochecer y lo apaga al amanecer. No es específico de Firefox, lo sé, pero seguro que es bueno, ya que funciona en cualquier navegador y en la mayoría de los demás programas.


0

El complemento http://addons.mozilla.org/en-US/firefox/addon/black-background-white-text tiene un método diferente para los colores negros. Invierte solo los colores y las imágenes de fondo (invertir colores no destruirá el diseño de la página como en los métodos CSS o JavaScript). Te encantará, te sentirás como si estuvieras en el modo blanco y no tengas que instalar ningún tema.

Después de la instalación, cambie el método predeterminado de "CSS simple" a "invertir" en: menú HerramientasComplementosFondo negro y texto blancoMétodo predeterminado para cambiar los colores de la páginaInvertir .

Nota: si también ha cambiado el modo de Windows a negro, le resultará mejor deshabilitar la administración de color predeterminada de Firefox y dejar que el complemento haga todo el trabajo, haga lo siguiente: menú HerramientasOpcionesContenidoColores → desmarque "Usar colores del sistema" y seleccione "Nunca" en "Anular los colores especificados en la página con mis selecciones anteriores".

¡Entonces reinicia Firefox!

Consejo: El complemento coloca un botón en su barra para deshabilitar o cambiar los modos del método "invertir" al método "CSS" o al método "JavaScript".

Aquí está el resultado:

BlackFirefox


El enlace está roto ( Página no encontrada ).
Peter Mortensen

-1

Otra opción es usar Ring of Topaz para cambiar los colores de fondo o eliminar la parte posterior.

Una vez que vaya al sitio, ingrese la URL del sitio web y elija una combinación de color de fondo / fuente que sea más legible para usted.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.