web-dev-qa-db-fra.com

Changer le fond blanc des pages Web en une autre couleur

J'utilise actuellement un thème sombre dans Firefox. Cela semble vraiment sympa, mais de nombreuses pages Web utilisent un fond blanc uni. Le contraste qui en résulte est un peu désagréable et fait parfois très mal aux yeux lorsque je passe d’un onglet foncé à un onglet blanc.

Existe-t-il un moyen de faire en sorte que firefox remplace partout les motifs blancs par une autre couleur (gris clair, par exemple)? Il peut s'agir d'un script stylé, d'un hack userChrome.css ou de tout ce qui fonctionne (de préférence aussi léger que possible).

Pour être clair: après avoir atteint mon objectif, la couleur de fond chaque fois que je visite le site Superuser doit être gris clair au lieu de blanc, et il en va de même pour tout autre site à fond blanc (sites Google, craquement technique, etc.). ).

Y-a-t-il un moyen de faire ça?

46
Malabarba

Je viens d'écrire un rapide script Greasemonkey qui vérifie le style calculé de l'élément body et le modifie en noir (vous voudrez probablement choisir une couleur différente):

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

Le problème avec ce genre de choses est que si les sites Web ne sont pas conçus extrêmement , il y aura des taches de blanc sur noir.

21
Hello71

Ce n'est pas une solution parfaite, mais vous pouvez le faire chaque fois que vous visitez les sites pour lesquels vous souhaitez modifier l'arrière-plan.

Dans Firefox ci-dessous 38, allez à Tools > Options > Content et cliquez sur le bouton Colours. Dans Firefox 38 et versions supérieures, accédez à Edit > Preferences > Content et cliquez sur Colors.

Sélectionnez gris pour le "Fond", et décochez les cases "Autoriser les pages à choisir leurs propres couleurs, au lieu de mes sélections ci-dessus" et "Utiliser les couleurs système".

alt text

14

J'ai mis à jour un script Greasemonkey (Firefox) pour supprimer les fonds blancs.

Les scripts fonctionneront dans Chrome si vous installez Tampermonkey.

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

Cela change tous les fonds blancs en gris (ish) avec un peu d'ombrage. Vous pouvez configurer et définir votre propre couleur de base à partir du code générique. Des nuances de blanc sont également rendues.

J'ai trois variantes: Gray , Pink et Vert - tous pouvant être personnalisés.

Rechercher dans les scripts utilisateur pour noWhiteBackgroundColor .

11
howardsmith

Dans la barre de recherche du navigateur, tapez about:config.

Dans le champ de recherche, tapez browser.display.background_color.

Double-cliquez sur la chaîne et remplacez #FFFFFF (code hexadécimal pour le blanc) par #000000 (code hexadécimal pour le noir) ou toute autre couleur de votre choix, puis cliquez sur OK. Redémarrez le navigateur pour qu'il prenne effet.

4
Canabliss

Je découvre dernièrement cet addon firefox élégant . Cela fera ce que vous voulez et bien plus encore!

4
Pierre Watelet

Le code JavaScript suivant remplace les éléments d'arrière-plan CSS et HTML par le blanc et les éléments de texte par le noir sur la page actuelle. Il vous suffit de le coller dans le champ Emplacement ou dans le navigateur:

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);
    }
})();
4
Dour High Arch

J'ai récemment remplacé mon ancien ordinateur et je devais configurer à nouveau Firefox. L'une des principales choses que je souhaitais rétablir était un script Greasemonkey qui modifiait la couleur d'arrière-plan de tout site Web.

J'étais donc un peu ennuyé de ne pouvoir trouver celui que j'avais utilisé auparavant. Longue histoire courte - voici celle de mon ancien PC.

Ce script n'est pas mon propre travail

Tout le mérite doit aller à Howard Smith. Cela a été initialement publié sur Userscripts.org qui semble maintenant être indisponible.

Créez simplement un nouveau script utilisateur dans Greasemonkey et collez le texte suivant dans:

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

Je l'utilise depuis près de deux ans et je ne peux penser à aucun site Web dont le fond blanc n'a pas été modifié.

3
The Bahamunt

Dans la barre d’URL, tapez about: config et accédez au paramètre suivant: browser.display.background_color

Plus d'infos si vous en avez besoin ici .

3
jer.salamon

Colorific

Je l'utilise.

Colorisez les pages Web à l'aide de contrôles avancés pour la teinte, la saturation, la luminosité et l'opacité. Liste des domaines Web pour la colorisation automatique (facultatif!).

NOUVEAU: utilisez le glisser-déposer pour copier des thèmes en tant que texte et pour regrouper librement les propriétés de couleur.

P.S .: plus thème Firefox sombre

2
FFuser

https://addons.mozilla.org/en-US/firefox/addon/blank-your-monitor-easy-readin/

J'ai trouvé celui-ci utile. Il vous permet de choisir votre propre couleur pour le texte et l'arrière-plan. Appuyez simplement sur la touche de raccourci prédéfinie.

2
erihanse

Cliquez sur la barre avec le bouton gauche de la souris et personnalisez. Vous verrez un arbre vert, placez-le dans la barre et cliquez dessus. Les couleurs changent et vous pouvez toujours créer vos propres couleurs dans l'élément de menu Edition -> Préférence -> Contenu -> Couleurs.

Désactiver: utiliser les couleurs du système et autoriser les pages

1
José

Bien que ce ne soit pas exactement ce que vous recherchez, j'utilise un logiciel associé à un petit script sous OS X. Le logiciel s'appelle Nocturne. Le script détermine l'heure à laquelle le lever et le coucher du soleil se trouvent dans mon emplacement géographique. Ensuite, il active Nocturne au coucher du soleil et l'éteint au lever du soleil. Je ne connais pas spécifiquement Firefox, mais c’est bien Nice, car il fonctionne sur n’importe quel navigateur et la plupart des autres logiciels.

0
Everett

L'add-on http://addons.mozilla.org/en-US/firefox/addon/black-background-white-text a une autre méthode pour les couleurs noires. Il inverse uniquement les couleurs et les images d'arrière-plan (l'inversion des couleurs ne détruira pas la conception de la page comme dans les méthodes CSS ou JavaScript). Vous allez l'adorer, vous vous sentez comme si vous êtes en mode blanc et vous n'avez pas besoin d'installer de thème.

Après l’installation, changez la méthode par défaut de "simple css" à "inverti" dans: menu Outils Add-ons Fond noir et texte blanc Méthode par défaut de modification des couleurs de la page Inverser .

NB: Si vous avez également changé le mode Windows en noir, il est préférable de désactiver la gestion des couleurs par défaut de Firefox et de laisser le module complémentaire faire tout le travail, procédez comme suit: menu Outils Options Contenu Couleurs → décocher "Utiliser les couleurs système" et sélectionnez "Jamais" dans "Remplacer les couleurs spécifiées par la page avec mes sélections ci-dessus".

Ensuite, redémarrez Firefox!

Conseil: Le module complémentaire a placé un bouton dans votre barre pour désactiver ou changer les modes de la méthode "invert" à la méthode "CSS" ou "JavaScript".

Voici le résultat:

BlackFirefox

0
Badr Elmers