Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,738,225 Members 53,600 Now Online
XDA Developers Android and Mobile Development Forum

Web Browser With Black Background (Invert Colors / Night Mode) Through Proxy Filter

Tip us?
 
claimui
Old
(Last edited by claimui; 10th April 2012 at 06:23 PM.)
#1  
Senior Member - OP
Thanks Meter 96
Posts: 173
Join Date: Sep 2011
Location: Taipei
Default Web Browser With Black Background (Invert Colors / Night Mode) Through Proxy Filter

This is a solution for people looking to invert colors or force specific colors (e.g. white text / black background) on their web browser. Great for easier reading (especially at night) and saving power on OLED screens. CyanogenMod's browser has an invert colors option built in, but as far as I can tell, nobody has been able to port the CM browser to other ROMs. This solution works with any browser or ROM.

The basic idea is to run a web filter proxy such as Privoxy. Proxy filters are usually used for ad blocking, but they also have the power to completely rewrite a webpage. Privoxy is run in the background, and using the browser or WiFi/APN proxy settings, all web traffic is run through Privoxy. Privoxy rewrites the web pages based on the filters before it is displayed on your browser.

In the attached set, I've put together some badly-written but effective filters to force light text on black backgrounds. The filters rewrite the webpage so that the background is always black, text is always light gray, and links are always green. The filters only tweak the HTML/styles, so as a (usually) helpful side effect, the pictures remain unchanged. With my current configuration, Privoxy loads automatically in the background at startup, and all web pages run through Privoxy and are displayed in my designated colors. See the screenshots below to see it in action.

I put together a simple set of files that so folks can test this out.

Requirements
- You must have a rooted phone.
- You must be able to access proxy settings. Depending on your firmware, you might be able to set a proxy in Wireless and Network Settings (Wi-Fi settings -> Advanced, or Mobile Networks -> Access Point Names). You can also try an app like Transproxy or AutoProxy, or a browser that supports proxy settings, such as Firefox Mobile with the Proxy Mobile add-on.

Instructions
- Download and install Autostart (Root) from the Market.
- In your root folder, create a folder called /data/opt
- Download the attached "force_colors.zip" and extract the files
- Place all the files in /data/opt. Set appropriate permissions. (Privoxy and autostart.sh need to be executable.)
- Reboot your phone. Autostart should run the autostart.sh script (it will ask for superuser permission) and Privoxy will run in the background.
- Set your proxy host to localhost and the proxy port to 8118.
- If everything went correctly, all webpages should load in black background, light gray text and green links.

Note: If you use DroidWall or similar firewall settings, make sure that you allow access for "Applications running as root" so that Privoxy can access the network.

---

Note that these filters are infinitely customizable, if you know how to use regular expressions. Just edit force_colors.filter with the filters of your choice. For example, the Privoxy filters available here are specifically designed to invert some colors and make other ones darker, so you can still preserve some website colors in a more readable format.

In the next post, I'll describe everything I researched in pursuit of this solution. I am hoping others will pick up this project and make it into an easy-to-use package, and also to create some alternative filters to make them cleaner and/or more effective.

I think this feature is sorely needed in Android. Please pass the word to any developers who can help make it a reality!
Attached Thumbnails
Click image for larger version

Name:	SC20111003-214139.jpg
Views:	2820
Size:	48.9 KB
ID:	738765   Click image for larger version

Name:	SC20111003-214242.jpg
Views:	1975
Size:	54.3 KB
ID:	738766   Click image for larger version

Name:	SC20111003-214330.jpg
Views:	1652
Size:	39.1 KB
ID:	738767  
Attached Files
File Type: zip force_colors.zip - [Click for QR Code] (128.5 KB, 734 views)
The Following 11 Users Say Thank You to claimui For This Useful Post: [ Click to Expand ]
 
claimui
Old
(Last edited by claimui; 3rd October 2011 at 06:58 PM.)
#2  
Senior Member - OP
Thanks Meter 96
Posts: 173
Join Date: Sep 2011
Location: Taipei
[Note: This is my earlier post explaining what I did to make this solution work. Please note that I am a complete development noob! I hope this information is helpful and other people will improve on my solution.]


- There is an Android port of Privoxy on the Android Market called Privoxy (BETA 1). Install it and see if it works for you. On my phone, the app interface does not work. If I try to manually start Privoxy in a terminal window, it gives me a seg fault. Anyway, run the app once regardless, so that it copies the Privoxy files to the app data directory (/data/data/com.galoula.Privoxy/). We will use this directory as our base.

- A *working* Android port of Privoxy is included in Orbot: Tor on Android. (Tor uses Privoxy to pass the HTTP requests to a SOCKS proxy.) Download, install and run Orbot. You just need to run it once so that it copies the Privoxy binary to the app data folder.

- You'll find Orbot's Privoxy binary in /data/data/org.torproject.android/app_bin. Copy the "privoxy" binary and use it to replace the binary that came with Privoxy (BETA 1) (located in /data/data/com.galoula.Privoxy/bin). Set appropriate permissions. (We only installed Orbot for the binary, so you can uninstall Orbot now if you don't want it always loading in the background.)

- Now set up the filters. Download the attached force_colors.zip below. Extract the three files (force_colors.action, force_colors.filter, and privoxy_conf). Copy these files to /data/data/com.galoula.Privoxy/etc.

- Open a terminal window, navigate to /data/data/com.galoula.Privoxy/bin and start privoxy by running "./privoxy ../etc/privoxy_conf"

- By default, Privoxy will listen on port 8118. Go to your WiFi settings or APN settings. Set the Proxy name to "localhost" and the port to "8118". Now all web data will pass through Privoxy.

- Browse to a few websites and you'll see white text on black backgrounds! The default colors in the force_colors.filter are black for backgrounds, light gray for text, and green for links. Feel free to edit force_colors.filter to whatever color combination you prefer. I used HTML color names instead of hex codes to make it more readable.

- To run Privoxy every time at startup, I use an app from the Market called Autostart (Root). The directions are limited but basically, you just need to install the app and make a file called /data/opt/autostart.sh (set appropriate permissions). Then in autostart.sh, put this line: "/data/data/com.galoula.Privoxy/bin/privoxy /data/data/com.galoula.Privoxy/etc/privoxy_conf". The next time you reboot (might have to try it one or two times), Autostart will ask for superuser permission, and start Privoxy automatically.

Hope this is helpful for anybody else who wants to experiment.
The Following 4 Users Say Thank You to claimui For This Useful Post: [ Click to Expand ]
 
tmuka
Old
#3  
tmuka's Avatar
Senior Member
Thanks Meter 26
Posts: 316
Join Date: Oct 2008
Location: Grand Rapids, MI
hey claimui, this looks like a great approach! i'm looking forward to giving it a try this weekend and learning more about how the filtering works!
Sprint EVO 4G LTE, formerly Sprint Nexus S 4G, Sprint Epic 4G, Sprint HTC Hero.
 
claimui
Old
(Last edited by claimui; 3rd October 2011 at 06:58 PM.)
#4  
Senior Member - OP
Thanks Meter 96
Posts: 173
Join Date: Sep 2011
Location: Taipei
I spent a couple of days learning regular expressions (or at least some of them) and throwing together a simpler set of filters to force certain colors on a webpage. With this set, all backgrounds are black, all text is light grey, and links are green.

EDIT: My filters are now included in the force_colors.zip attached in the OP.
The Following 2 Users Say Thank You to claimui For This Useful Post: [ Click to Expand ]
 
pzumk
Old
#5  
Senior Member
Thanks Meter 33
Posts: 1,068
Join Date: Jun 2009
Location: Lüneburg

 
DONATE TO ME
added to [LIST] black energy saving android apps for AMOLED screens
currently
iPhone 5 (Sep '12 to now)
iOS 7, jailbroken

old
Nexus 4 (June '13 to July '13)
Android 4.2.2, root
iPhone 4S (Jan '12 to Sep '12)
iOS 7
Nexus One (Jan '10 to Jan '12)
CyanogenMod 7
Samsung Omnia SGH-i900 (Dec '09 to Jan '10)
Windows Mobile 6.1
LG KM900 Arena (Apr '09 to Nov '09)
S-Class
Sony Ericsson W880i (mid '09)
modded/patched firmware
Sony Ericsson W810i (Nov '07 to Apr '09)
modded/patched firmware
Siemens MC60 (? to Nov '07)
Nokia 3410 ('04 to ?)
 
claimui
Old
(Last edited by claimui; 3rd October 2011 at 06:58 PM.)
#6  
Senior Member - OP
Thanks Meter 96
Posts: 173
Join Date: Sep 2011
Location: Taipei
I made several updates to the original posts, including a suggestion on how to get Privoxy to start automatically on boot. After going through this whole process, this is a really effective solution. Privoxy starts automatically and invisibly whenever I start up my phone, and all of my webpages automatically pass through Privoxy and get displayed in my preferred colors.

For future tweaking, it would be nice to have a simple shortcut to enable/disable the filtering. (Although honestly I never want to disable it -- I always like my colors better!) Note that you can't simply kill Privoxy because your browser won't be able to find the proxy to connect to. So you either need a Privoxy command to toggle filtering on and off, or toggle the proxy settings to either use or bypass Privoxy.

In the meantime though, I think this still works really well. Hope others give it a try and can improve on the procedure.
The Following User Says Thank You to claimui For This Useful Post: [ Click to Expand ]
 
claimui
Old
(Last edited by claimui; 3rd October 2011 at 06:57 PM.)
#7  
Senior Member - OP
Thanks Meter 96
Posts: 173
Join Date: Sep 2011
Location: Taipei
Major update: I have finally consolidated all the steps into a small zip file and some simple instructions. You will need root access and a file manager or some basic knowledge of how to get around your phone. Just follow the instructions in the first post and you should be able to get it working very quickly.
The Following 2 Users Say Thank You to claimui For This Useful Post: [ Click to Expand ]
 
bgx
Old
#8  
bgx's Avatar
Senior Member
Thanks Meter 82
Posts: 417
Join Date: Dec 2010

 
DONATE TO ME
Would like to test this but couldn't things to work...

Privoxy now updates to beta2.

Everything I try I get 404 Page can't loaded...

Have changed to localhost and port 8118 but doesn't work...

LG G2 @ Mahdi-Rom [07/18] | kernel: RenderKernel R3
---------------
If I helped you, hit the thanx button!
Tasker BLN for every SMS App
Volume Boosting for SGS2 with the help of Tasker
 
claimui
Old
#9  
Senior Member - OP
Thanks Meter 96
Posts: 173
Join Date: Sep 2011
Location: Taipei
No need to install Privoxy from the Market. Just follow the instructions in my first post. After you install the Autostart app and put the files in the /data/opt folder, Privoxy will start at the next reboot.
The Following User Says Thank You to claimui For This Useful Post: [ Click to Expand ]
 
bgx
Old
#10  
bgx's Avatar
Senior Member
Thanks Meter 82
Posts: 417
Join Date: Dec 2010

 
DONATE TO ME
Thx! Think it was a problem with SiyahKernel! After flashing from 2.0b2 to 2.0b3 now privoxy work!

Thx a lot! Have long time searched for something similar!

LG G2 @ Mahdi-Rom [07/18] | kernel: RenderKernel R3
---------------
If I helped you, hit the thanx button!
Tasker BLN for every SMS App
Volume Boosting for SGS2 with the help of Tasker

Tags
black background, black browser, invert colors, inverted browser, night mode
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes