웹 페이지의 흰색 배경을 다른 색으로 변경


47

현재 Firefox에서 어두운 테마를 사용하고 있습니다. 정말 멋지지만 많은 웹 페이지는 평범한 흰색 배경을 사용합니다. 결과 대비는 약간 불쾌하며 때로는 어두운 탭에서 흰색 탭으로 전환하면 눈을 아프게합니다.

파이어 폭스가 흰색 backgroun를 다른 색으로 대체하는 방법이 있습니까 (예 : 밝은 회색)? Stylish 스크립트, userChrome.css 해킹 또는 작동하는 것 (가능하면 가능한 가벼운 것) 일 수 있습니다.

내 목표를 달성 한 후, 수퍼 유저 사이트를 방문 할 때마다 배경색이 흰색 대신 밝은 회색이어야하고 흰색 배경이있는 다른 사이트 (Google 사이트, 기술 위기 등)에서도 마찬가지입니다. ).

그렇게 할 수있는 방법이 있습니까?


5
이것을 반대하는 것이 좋습니다. 대부분의 웹 사이트는 텍스트 스타일링을 위해 많은 다른 클래스와 CSS를 사용합니다. 웹 페이지에서 스타일별로 검정색 배경과 검정색 텍스트를 사용하면 어떻게됩니까? 관심없는 OS를 사용하십니까?
danixd

Windows 7은 주로 플랫폼 독립적 인 솔루션이 더 좋지만 직장에서 ubuntnu를 사용하기 때문에 더 좋습니다. 일부 사이트에서는 다소 어색한 동작이 발생할 수 있으며 배경은 검은 색 대신 밝은 회색이어야 텍스트를 읽을 수 있습니다. 그러나이 일을 기꺼이 실험 할 때까지 귀찮게했습니다.
Malabarba

답변:


21

방금 계산 된 요소의 스타일을 확인하고 검은 색으로 변경 하는 빠른 Greasemonkey 스크립트를 작성했습니다 body(다른 색상을 선택하고 싶을 것입니다).

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

이러한 유형의 문제는 웹 사이트가 매우 잘 설계되지 않으면 검정색에 흰색 얼룩이 생길 수 있다는 것입니다.


4
내 무지를 용서하지만이 스크립트를 어디에 붙여 넣습니까? (문제에 대한 감사)
Malabarba

@Bruce : Greasemonkey를 설치하고 *에 대한 새 사용자 스크립트를 만든 다음이를 텍스트 편집기에 붙여 넣습니다. 페이지를 저장하고 새로 고칩니다.
Hello71

이 방법은 지금까지 가장 잘 작동합니다. 텍스트 상자의 배경과 몇 가지 다른 것을 변경하지는 않지만 그 외에는 좋습니다. 어쨌든 어떤 해결책으로도 몇 개의 흰색 상자가 놓여 있다고 생각합니다. 감사합니다
Malabarba

다운로드 준비가 된 스크립트가 있습니다. 아래로 스크롤하면됩니다.
발렌티

14

완벽한 솔루션은 아니지만 배경을 변경하려는 사이트를 방문 할 때마다이 작업을 수행 할 수 있습니다.

38 세 미만의 Firefox에서는으로 이동하여 버튼을 Tools > Options > Content클릭하십시오 Colours. Firefox 38 이상에서는으로 이동 Edit > Preferences > Content하십시오 Colors.

"배경"으로 회색을 선택하고 "위의 선택 대신 페이지에서 고유 한 색상을 선택하도록 허용"및 "시스템 색상 사용"근처의 확인란을 선택 취소하십시오.

대체 텍스트


이것은 가장 쉬운 투표에 대한 가치가 있습니다. 거의 모든 사이트에서 작동합니다. 텍스트 색상을 변경하도록 강요하므로 다른 방법보다 약간 열등합니다.
Malabarba

2
@Bruce Connor : 맞습니다. 반면에 bg 색상을 변경하면 합리적인 대비를 얻기 위해 fg 색상도 변경해야 할 수도 있습니다. 따라서 실제로 텍스트 색상을 변경해야하는 것은 큰 단점이 아닐 수 있습니다.
sleske

2
여기에 설명 된대로 Firefox 옵션을 사용하는 경우 "색상 없음"과 같은 애드온을 사용하여 빠르게 켜고 끄는 것이 좋습니다 (색상을 변경하면 많은 사이트에서 다양한 버그가 발생할 수 있으므로). 또는 Pentadactyl addon을 사용하여 모든 키 (Firefox 옵션 토글 포함)에 작업을 할당 할 수 있습니다.
corvinus

배경색을 지정할 때 배경색을 무시 하지 않습니다.
Vlad

11

흰색 배경을 억제하도록 Greasemonkey (Firefox) 스크립트를 업데이트했습니다.

Tampermonkey를 설치하면 스크립트가 Chrome에서 작동합니다.

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

음영이있는 흰색 배경을 모두 회색 (ish)으로 변경합니다. 일반 코드에서 기본 색상을 구성하고 설정할 수 있습니다. 흰색 음영도 렌더링됩니다.

회색 , 분홍색녹색의 세 가지 변형 이 있습니다.

noWhiteBackgroundColor에 대한 사용자 스크립트를 검색 하십시오 .


완벽하게 작동합니다 – 이것이 답이되어야합니다
Mr_and_Mrs_D


4

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

어. 고통스러운 % 20.
Hello71

그러면 모든 요소의 배경이 검은 색으로 바뀌고 모든 요소 (텍스트 만 아님)가 흰색으로 바뀝니다.
Hello71

1
이것은 실제로 잘 작동합니다. 나는 변경 블랙lightgrey , 텍스트는 여전히 검은 그래서, 텍스트 색상을 변경하는 부분을 제거했습니다. 그리고 결과는 실제로 꽤 좋습니다. 유일한 문제는 그것이 하얀 것뿐만 아니라 절대적으로 모든 것의 배경을 바꾸어서 많은 것들이 숨겨져 있다는 것입니다 (SU의 투표 버튼과 같이). 그것을 고칠 수있는 방법이 있습니까?
Malabarba

1
@ hello71, 어떻게 든 브라우저에서 붙여 넣을 때 모든 공백이 % 20으로 변경되었습니다. 이들은 제거되었습니다. 나는 모든 배경을 검은 색으로 변경했다고 말했지만 이제는 텍스트 배경 만 검은 색으로 변경하도록 편집했습니다. 다시 시도하십시오.
Dour High Arch

4

브라우저 검색 창에을 입력하십시오 about:config.

검색 필드에을 입력하십시오 browser.display.background_color.

문자열을 두 번 클릭하고 #FFFFFF(흰색의 경우 16 진 코드)를 #000000(검정의 경우 16 진 코드) 또는 원하는 다른 색상으로 변경하고을 클릭하십시오 OK. 브라우저를 다시 시작하여 적용하십시오.


3

URL 표시 줄에 about : config를 입력하고 browser.display.background_color 설정으로 이동하십시오.

여기에 필요한 경우 추가 정보 .


1
이 변수를 변경하면 배경색을 지정하지 않은 웹 페이지에서만 작동합니다. google.com/firefox 및 빈 탭 에서만 작동하도록 할 수있었습니다 .
Malabarba

1
Firebug를 사용하면 페이지를 변경할 수 있지만 사이트를 방문 할 때마다 변경해야합니다. 흰색 배경 만 바꾸는 것은 다소 힘든 일입니다.
jer.salamon


3

최근에 이전 컴퓨터를 교체했으며 Firefox를 다시 설정해야했습니다. 복원하고자하는 주요 사항 중 하나는 웹 사이트의 배경색을 변경 한 Greasemonkey 스크립트였습니다.

그러므로 나는 내가 전에 사용했던 것을 찾을 수 없다는 것에 약간 화가났다. 간단히 말해, 여기 내 오래된 PC의 것이 있습니다.

이 스크립트는 내 작품이 아닙니다

모든 학점은 Howard Smith에게 가야합니다. 이것은 원래 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 년 동안 사용 해 왔으며 흰색 배경을 변경하지 못한 웹 사이트를 생각할 수 없습니다.


대본! about : addons, about : config, about : newtab, view-source : *.와 같이 Firefox의 내부 페이지에서만 작동하는 경우 메타 데이터 섹션을 추가하여 쉽게 가져올 수 있습니다. 이 스크립트를 Color Toggle 애드온과 함께 사용하고 있습니다.
jk7


2

화려한

내가 사용할 게.

색조, 채도, 명도 및 불투명도에 대한 고급 컨트롤을 사용하여 웹 페이지를 색칠하십시오. 자동 색상 지정을위한 화이트리스트 웹 도메인 (선택 사항).

새로운 기능 : 드래그 앤 드롭을 사용하여 테마를 텍스트로 복사하고 색상 속성을 자유롭게 그룹화하십시오.

추신 : 플러스 어두운 파이어 폭스 테마


불행히도 FF v57 이상에서는 사용할 수 없습니다.
KERR

1

마우스 왼쪽 버튼으로 막대를 클릭하고 사용자 정의하면 녹색 나무가 표시됩니다. 막대에 놓고 클릭하십시오. 색상이 변경 되어도 편집-> 환경 설정-> 내용-> 색상 메뉴 항목에서 원하는 색상을 만들 수 있습니다.

비활성화 : 시스템 색상 사용 및 페이지 허용


0

정확히 당신이 무엇을하고 있는지는 아니지만 ... 나는 OS X에서 작은 스크립트와 결합 된 소프트웨어를 사용합니다.이 소프트웨어는 녹턴이라고합니다. 이 스크립트는 내 지리적 위치에서 일출과 일몰 시간을 확인합니다. 그런 다음 일몰시 녹턴이 활성화되고 일출시 꺼집니다. 내가 아는 Firefox에만 해당되는 것은 아니지만 모든 브라우저 및 대부분의 다른 소프트웨어에서 작동하므로 확실히 좋습니다.


0

애드온 http://addons.mozilla.org/en-US/firefox/addon/black-background-white-text 에는 검은 색에 대한 다른 방법이 있습니다. 색상 및 배경 이미지 만 반전합니다 (색상을 반전해도 CSS 또는 JavaScript 메소드에서와 같이 페이지 디자인이 손상되지는 않습니다). 당신은 그것을 좋아할 것이고, 당신이 백인 모드에 있다면 느낌이 들며, 어떤 테마도 설치할 필요가 없습니다.

메뉴 : 설치 후에서 "반전"에 "간단한 CSS"에서 기본 방법을 변경 도구추가 기능검은 색 배경에 흰색 텍스트페이지의 색상을 변경의 기본 방법반전을 .

NB : Windows 모드를 검정색으로 변경 한 경우 기본 Firefox 색상 관리를 비활성화하고 애드온이 모든 작업을 수행하도록하는 것이 좋습니다. 메뉴 도구옵션내용색상 → 선택 해제 "시스템 색상 사용" 을 선택하고 "위에서 선택한 항목으로 페이지에서 지정한 색상 무시"에서 "사용 안 함" 을 선택하십시오.

그런 다음 Firefox를 다시 시작하십시오!

팁 : 애드온은 모드를 "반전"방법에서 "CSS"방법 또는 "JavaScript"방법으로 비활성화하거나 변경하는 단추를 막대에 넣습니다.

결과는 다음과 같습니다.

블랙 파이어 폭스


링크가 끊어졌습니다 ( 페이지를 찾을 수 없음 ).
Peter Mortensen

-1

또 다른 옵션은 Ring of Topaz 를 사용하여 배경색을 변경하거나 뒷면을 제거하는 것입니다.

사이트로 이동하면 웹 사이트의 URL을 입력하고 더 읽기 쉬운 배경 / 글꼴 색상 조합을 선택하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.