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


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.