Greasy Fork

I Need a Userscript to Change Color of Font

I need a userscript for a browser for my Android phone. I need one that can render webpages in dark grey background, white color font and aqua blue links. What code do I use for this??

You could always try using this:
https://play.google.com/store/apps/details?id=mobi.mgeek.TunnyBrowser.Theme.EnNightModeV10&hl=en

You could always try using this:
https://play.google.com/store/apps/details?id=mobi.mgeek.TunnyBrowser.Theme.EnNightModeV10&hl=en

I asked for a user script not a browser.

Seems simple enough. Let me try to dash together a script for this. Here you go. (I'm not sure how to mark this as code)

// ==UserScript==
// @name Userscript to Change Color of Font
// @author Tommy Smith
// @description Userscript for a browser for your Android phone.
// @version 0.1
// @include *
// ==/UserScript==

var css = document.createElement('style');
css.type = "text/css";
css.innerHTML = "html { color: white !important; } body { color: white !important; background-color: darkgray !important; } a { color: aqua !important; }";
document.getElementsByTagName('head')[0].appendChild(css);
document.getElementsByTagName("body")[0].setAttribute("bgcolor", "darkgray");
document.getElementsByTagName("body")[0].setAttribute("text", "white");
document.getElementsByTagName("body")[0].setAttribute("alink", "aqua");
document.getElementsByTagName("body")[0].setAttribute("link", "aqua");
document.getElementsByTagName("body")[0].setAttribute("vlink", "aqua");

Seems simple enough. Let me try to dash together a script for this. Here you go. (I'm not sure how to mark this as code)

// ==UserScript==
// @name Userscript to Change Color of Font
// @author Tommy Smith
// @description Userscript for a browser for your Android phone.
// @version 0.1
// @include *
// ==/UserScript==

var css = document.createElement('style');
css.type = "text/css";
css.innerHTML = "html { color: white !important; } body { color: white !important; background-color: darkgray !important; } a { color: aqua !important; }";
document.getElementsByTagName('head')[0].appendChild(css);
document.getElementsByTagName("body")[0].setAttribute("bgcolor", "darkgray");
document.getElementsByTagName("body")[0].setAttribute("text", "white");
document.getElementsByTagName("body")[0].setAttribute("alink", "aqua");
document.getElementsByTagName("body")[0].setAttribute("link", "aqua");
document.getElementsByTagName("body")[0].setAttribute("vlink", "aqua");

Hi, Tommy. Thanks for the code. I entered it in my browser but it didn't work 100%. Please look at the attached screenshots. For example, on google, the code didn't change all of the background color, its still white. On craigslist, the left side of the site remains white and its hard to see the aqua blue links on it. On yahoo, the code didn't change the background color.

I ask that you please edit the code to fix these issues, I'd appreciate it. And make it so all sites look the same way. Thank you Tommy!

https://forum.userstyles.org/profile/112783/koolxx

https://forum.userstyles.org/profile/112783/koolxx

Look srop harassing me. Stop bothering people here who are looking to learn and want help. Troll some place here.

Tommy, if you can please follow up, I'd appreciate it. To reiterate, your code works. But it affects pages differently. Below are pics of sites showing how the code affects them in a weird manner. I appreciate your help. Thanks, man.

That's because that's not the background colour of those pages. If you instead want to code to affect the background colour of all elements, you could do something like this (not tested), but it may look awfully strange in some cases.

// ==UserScript==
// @name Userscript to Change Color of Font
// @author Tommy Smith
// @description Userscript for a browser for your Android phone.
// @version 0.2
// @include *
// ==/UserScript==

var css = document.createElement('style');
css.type = "text/css";
css.innerHTML = "html { color: white !important; } body { color: white !important; } * { background-color: darkgray !important; } a { color: aqua !important; }";
document.getElementsByTagName('head')[0].appendChild(css);
document.getElementsByTagName("body")[0].setAttribute("bgcolor", "darkgray");
document.getElementsByTagName("body")[0].setAttribute("text", "white");
document.getElementsByTagName("body")[0].setAttribute("alink", "aqua");
document.getElementsByTagName("body")[0].setAttribute("link", "aqua");
document.getElementsByTagName("body")[0].setAttribute("vlink", "aqua");

That's because that's not the background colour of those pages. If you instead want to code to affect the background colour of all elements, you could do something like this (not tested), but it may look awfully strange in some cases.

// ==UserScript==
// @name Userscript to Change Color of Font
// @author Tommy Smith
// @description Userscript for a browser for your Android phone.
// @version 0.2
// @include *
// ==/UserScript==

var css = document.createElement('style');
css.type = "text/css";
css.innerHTML = "html { color: white !important; } body { color: white !important; } * { background-color: darkgray !important; } a { color: aqua !important; }";
document.getElementsByTagName('head')[0].appendChild(css);
document.getElementsByTagName("body")[0].setAttribute("bgcolor", "darkgray");
document.getElementsByTagName("body")[0].setAttribute("text", "white");
document.getElementsByTagName("body")[0].setAttribute("alink", "aqua");
document.getElementsByTagName("body")[0].setAttribute("link", "aqua");
document.getElementsByTagName("body")[0].setAttribute("vlink", "aqua");

Hi Tommy. I tried this updated code. Even though it makes the overall background dark grey, it makes the font in Yahoo disappear. I think because the font is the same color. In Google, it doesn't render the font white. Maybe this can be fixed?

Another possibility is to inverse the colors (a bit but not all the way) except for the images. Let me know if this is possible. As always, I apprecaite any help,. Tommy.

To invert colours you can use leosok's code.

// ==UserScript==
// @name Userscript to Invert Colours
// @author Tommy Smith
// @description Userscript for a browser for your Android phone.
// @version 0.3
// @include *
// ==/UserScript==

// the css we are going to inject
var css = 'html {-webkit-filter: invert(100%);' +
'-moz-filter: invert(100%);' +
'-o-filter: invert(100%);' +
'-ms-filter: invert(100%); }',

head = document.getElementsByTagName('head')[0],
style = document.createElement('style');

// a hack, so you can "invert back" clicking the bookmarklet again
if (!window.counter) { window.counter = 1;} else { window.counter ++;
if (window.counter % 2 == 0) { var css ='html {-webkit-filter: invert(0%); -moz-filter: invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); }'}
};

style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}

//injecting the css to the head
head.appendChild(style);

To invert colours you can use leosok's code.

// ==UserScript==
// @name Userscript to Invert Colours
// @author Tommy Smith
// @description Userscript for a browser for your Android phone.
// @version 0.3
// @include *
// ==/UserScript==

// the css we are going to inject
var css = 'html {-webkit-filter: invert(100%);' +
'-moz-filter: invert(100%);' +
'-o-filter: invert(100%);' +
'-ms-filter: invert(100%); }',

head = document.getElementsByTagName('head')[0],
style = document.createElement('style');

// a hack, so you can "invert back" clicking the bookmarklet again
if (!window.counter) { window.counter = 1;} else { window.counter ++;
if (window.counter % 2 == 0) { var css ='html {-webkit-filter: invert(0%); -moz-filter: invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); }'}
};

style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}

//injecting the css to the head
head.appendChild(style);

Hi, Tommy. I tried this code. But it doesn't work. You mentioned in the code a bookmarklet. But I dont know where to click to activate it.

If you dont mind, can we work on both codes? Now, getting back to the other code (Sept. 24), I think its best to edit the code to render whatever font is in black to white.

As always Tommy, I appreciate your help. Sorry if I'm asking too much. I just want to get this right. Hope you understand. Thank you.

Hi, Tommy. I havent heard from you. Can you please help me? The code that you provided on Sept 24 is the code I like, but the font isn't visible because it matches the dark background. Can you edit the code so that any font in black becomes white? I'd appreciate that a lot. Thanks, man!

All the text on every page should change to white using the code above. It's possible that the website in question is colouring the fonts using JS.
The line "body { color: white !important; }" is the one that changes the text colour to white - see?