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

colorsgoogle-chrome

I love using my computer with light-on-dark themes on as many programs that allow it. That is, I love it when the background is black and the text is grey-white. It's much easier on my eyes.

I'm very happy that Chrome has a wonderful extension called High Contrast which makes Chrome automatically transform webpages to be dark-on-light. It works great on most websites. (Including Stack Overflow 🙂

The problem is that Chrome has a few internal pages that are still white-background. These hurt my eyes 🙁

Now, when I'm saying internal pages, it means not only things like the settings page, but also the new tab page. Every time I press Ctrl-T my eyes get blasted with white. Every time I press a link Chrome blasts my eyes again with white. I'd like to avoid that.

I looked at the description for HighContrast, and it says the following:

Also note that the Chrome web store and other built-in pages like the New Tab page and Settings pages are unaffected - extensions like this one are not allowed to modify them, by design.

I'm understanding that Chrome doesn't allow extensions to modify these internal pages.

My question: Is there a way to hack Chrome to show internal pages as light-on-dark? I don't want to go as far as changing C code and recompiling because I'm not a C programmer and I barely know how to compile, but if there's any other way of hacking it (like modifying internal files in the Chrome program directory for example), then I'd love to know how to do that.

Best Answer

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.

Related Question