Google-chrome – How to change the background color in Chrome

colorsgoogle-chrome

The background color on some web pages is light gray. This makes it difficult for me to read the page. I want to change the background color to white. I use the Chrome browser. How do I do this?

Best Answer

There doesn't seem to be an option for setting the background colour explicitly in the current theme. However, you could try a different theme which would override a whole bunch of settings.

However, it could be that the websites in question have set a background colour themselves which overrides the default of the browser.

Firefox (for example) has as option that lets you set the background colour and then not let individual websites override that value. So it might be you have to use a different browser for these sites.

Related Solutions

Firefox – Change the white background in webpages to another color

I just wrote a quick Greasemonkey script that checks the computed style of the body element and changes it to black (you probably want to choose a different colour):

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

The problem with these types of things is that unless websites are designed extremely well, there will be blotches of white on black.

Google-chrome – Hack Chrome to show its internal pages with black background

You could theme your Chrome internal pages by utilizing the user stylesheet found at:

On Windows

C:\Users\Username\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

On OSX

~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

On Ubuntu

~/.config/chromium/Default/User StyleSheets/Custom.css

If it doesn't exist yet, create it.

If you simply put the following CSS into it:

#card-slider-frame {
  background : black;
  color      : white !important;
}

Your New Tab page will look more like this:

enter image description here

I also found the suggestion to create an extension that controls the theme of the new tab page. This might be more reliable, as the Custom.css styles are applied to all internal and external pages.