web-dev-qa-db-ja.com

Webページの白い背景を別の色に変更する

私は現在Firefoxで暗いテーマを使っています。すごくいい感じですが、多くのWebページでは白地を使用しています。その結果、コントラストが少し不快になり、暗い色のタブから白い色のタブに切り替えたときに目を痛めることがあります。

どこでもFirefoxが白い背景色を他の色（例えば薄い灰色）に置き換える方法はありますか？これは、スタイリッシュなスクリプト、userChrome.cssハック、または機能するもの（可能な限り軽量）が考えられます。

明確にするために：目的を達成した後、スーパーユーザーサイトにアクセスしたときの背景色は白ではなく明るい灰色になり、他の白地のサイト（googleサイト、tech crunchなど）にも同じようになるはずです。 ）.

それをする方法はありますか？

firefoxcolors
46
Malabarba

body要素の計算されたスタイルをチェックしてそれを黒に変更する簡単な Greasemonkey スクリプトを書きました（おそらく別の色を選択したいと思います）。

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

この種のことの問題は、ウェブサイトが極端にうまく設計されていない限り、黒地に白のしみがあることです。

21
Hello71

これは完璧な解決策ではありませんが、背景を変更したいサイトにアクセスするたびにこれを実行できます。

38未満のFirefoxでは、Tools > Options > Contentに移動してColoursボタンをクリックしてください。 Firefox 38以降では、Edit > Preferences > Contentに移動し、そこでColorsをクリックしてください。

[背景]にグレーを選択し、[上記の選択ではなく、[ページに独自の色の選択を許可する]および[システムカラーを使用する]の近くのチェックボックスをオフにします。

alt text

14
Mehper C. Palavuzlar

白い背景を抑制するためにGreasemonkey（Firefox）スクリプトを更新しました。

Tampermonkeyをインストールすると、スクリプトはChromeで機能します。

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

これにより、すべての白い背景が多少の陰影を付けて灰色（ish）に変わります。あなたは一般的なコードからあなた自身のベースカラーを設定し設定することができます。白の色合いもレンダリングされます。

グレー 、 ピンク 、 グリーン の3種類があります。これらはすべてカスタマイズできます。

ユーザースクリプトでnoWhiteBackgroundColorを検索します。

11
howardsmith

ブラウザの検索バーにabout:configと入力します。

検索フィールドに「browser.display.background_color」と入力します。

文字列をダブルクリックして#FFFFFF（白の16進コード）を#000000（黒の16進コード）または他の好きな色に変更してクリック OK。ブラウザを再起動して有効にします。

4
Canabliss

私は最近このFirefoxアドオン スタイリッシュ を発見しました。これはあなたが欲しいものともっと多くをするでしょう！

4
Pierre Watelet

次のJavascriptは現在のページのCSSとHTMLの背景要素を白で、テキスト要素を黒で上書きします。あなたの居場所またはブラウザフィールドに貼り付けるだけです。

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

私は最近私の古いコンピュータを交換し、Firefoxを再度セットアップする必要がありました。私が復活させたいと思っている主なものの1つはあらゆるウェブサイトの背景色を変えたGreasemonkeyスクリプトでした。

したがって、以前使用していたものが見つからなかったことに少し悩みました。短い話 - これは私の古いPCからのものです。

このスクリプトは私自身の作品ではありません

すべてのクレジットはハワードスミスに行かなければなりません。これはもともとUserscripts.orgに投稿されたもので、現在は利用できないようです。

Greasemonkeyで新しいユーザースクリプトを作成して、次のファイルを貼り付けるだけです。

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

私はこれをほぼ2年間使っていて、白い背景を変えることができなかったどんなウェブサイトも考えることができません。

3
The Bahamunt

URLバーにabout：configと入力し、次の設定に移動します。browser.display.background_color

あなたがそれを必要とするならばより多くの情報 ここ 。

3
jer.salamon

Colorific

私はそれを使用します。

色相、彩度、明度、および不透明度の高度なコントロールを使用してWebページを色付けします。自動色付け用のホワイトリストWebドメイン（オプション！）.

新機能：テーマをテキストとしてコピーしたり、色のプロパティを自由にグループ化したりするには、ドラッグアンドドロップを使用します。

P.S .:濃いFirefoxのテーマ

2
FFuser

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

私はこれが役に立つと思いました。それはあなたがテキストと背景にあなた自身の色を選ぶことを可能にします。定義済みのホットキーを押すだけです。

2
erihanse

マウスの左ボタンでバーをクリックしてカスタマイズすると、緑色の木が表示されますので、それをバーに入れてクリックします。色が変わっても、編集 - >設定 - >コンテンツ - >色のメニュー項目であなた自身の色を作成することができます。

無効：システムカラーを使用し、ページを許可する

1
José

OS Xの小さなスクリプトと組み合わされたソフトウェアを使用しています。このソフトウェアはNocturneと呼ばれています。スクリプトは、日の出と日の入りが私の地理的な場所の何時にあるかを調べます。それから、日没時にノクターンを起動し、日の出時にそれをオフにします。私が知っているFirefoxに固有のものではありませんが、それはあらゆるブラウザ、そして他のほとんどのソフトウェアで動作するので確かにいいです。

0
Everett

アドオン http://addons.mozilla.org/en-US/firefox/addon/black-background-white-text は異なる黒い色のための方法。色と背景画像のみを反転します（色を反転しても、CSSやJavaScriptのメソッドのようにページデザインが崩れることはありません）。あなたはそれを気に入るはずです、あなたがホワイトモードにいるかのように、あなたは気分を感じます、そして、あなたはテーマをインストールする必要はありません。

インストールが完了したら、次のメニューでデフォルトの方法を "simple css"から "invert"に変更してください。メニューツール→アドオン→黒の背景と白のテキスト→ページの色を変更するデフォルトの方法→反転。

注：Windowsモードも黒に変更した場合は、デフォルトのFirefoxカラー管理を無効にしてアドオンにすべての機能を実行させる方がよいでしょう。menuTools→オプション→コンテンツ→色→チェック解除 "システムカラーを使用する"を選択し、[ページで指定された色を上の選択で上書きする]で[しない]を選択します。

Firefoxを再起動してください。

ヒント：アドオンは、モードを "invert"メソッドから "CSS"メソッドまたは "JavaScript"メソッドに無効化または変更するためのボタンをバーに配置します。

これが結果です。

BlackFirefox

0
Badr Elmers