Customize specific web page - reverse the black background and white font
I frequent at least one web page that makes my eyes hurt using it. I want to reverse the black background and white font but when I do that in the 'change the fonts and colors websites use' it, of course, changes all of the sites.
Is there a way to customize just one, or a few, specific web pages? Is there a way to do that without my having to change settings in my options for reading that specific site and then changing it back to default in order to not effect other sites?
Thank you so very much! Jad~
All Replies (3)
The cheesy instant ways are:
(1) Select the page content using Ctrl+a. Of course, if you need to interact with the page, you'll lose the selection as soon as you start clicking.
(2) Disable the site's style sheet using (menu bar) View > Page Style > No Style. (If you do not display the classic menu bar, you can show it temporarily by tapping the Alt key or the F10 key.) You lose the layout and background images this way, which can make some sites hard to use.
I found a couple extensions that say they can change page colors, but I haven't tried them myself:
Or if it works with the page, you could try https://www.readability.com/ which pulls in the page content and renders it into a clean reading view. However, registration is required.
For a truly custom approach, there are two general purpose ways to apply your own style rules to specific sites: the Stylish extension and a userContent.css files. In either case, you need to craft style rules that switch the page to the preferred style. The complexity of the project depends on the site. (Please post an address for specific suggestions.)
Hope one of these fits the bill!
If you visit such websites frequently then you can consider to create specific CSS rules to override those colors and place this code in userContent.css or use the Stylish extension.
You can use the built-in Inspector to check which elements need to be adjusted and disable CSS rules by removing their tick to see what works.
If you are lucky then only the body needs a rule. Add the !important flag to override an existing rule.
There are also bookmarklets possible to set the page colors to black (gray) text and white (light-gray) background. I usually use those in such cases.
javascript:(function(){var SS=document.createElement('style');SS.setAttribute('type','text/css');SS.id='style_bbw';SS.innerHTML='body,body *{color:#222!important;background-color:#f8f8f8} a[href],a[href] *{color:#25f!important}a[href^="javascript:"]{cursor:move;color:green!important}';document.getElementsByTagName('head')[0].appendChild(SS);})()
You can use this bookmarklet to toggle the style on/off:
javascript:(function(){E=document.querySelector('style[id="style_bbw"]');S=E.disabled;E.disabled=(S==true)?false:true;})()
NoSquint {web link} NoSquint allows you to adjust the text-only and full-page (both text and images) zoom levels as well as color settings both globally (for all sites) and per site.