Darken Javascript Bookmarklet Update
July 21, 2010
This is just a simple modification of the Javascript bookmarklet called “Darken” by Gina Trapani. No idea if it had already been updated or not, but here’s the list of what I changed for anybody interested:
- Running the bookmarklet multiple times toggles the darken effect on and off! Saves refreshing the page
- Changed the colour scheme to green text
- Added hover effect for links
- Changed link colour and added underline to differentiate links
- Changed link visited colour
- Only uses the appendChild method as that’s all the Browsers I use support (Opera, IE9, Firefox, Chrome)
1 | javascript: (function (){var newSS, styles = '* { background-color: black ! important; color: green !important; }a:link, a:link * { color: green !important; text-style: underline; }a:visited, a:visited * { color: #7f0000 !important; }a:hover, a:hover * { color: red !important; }';var elemHead = document.getElementsByTagName("head")[0];var elemCSS = document.getElementById("darkenCSS");if (elemCSS){elemHead.removeChild(elemCSS);}else{newSS = document.createElement('link');newSS.rel = 'stylesheet';newSS.href = 'data:text/css,' + escape(styles);newSS.id = "darkenCSS";elemHead.appendChild(newSS);}})(); |
Let me remix that.
javascript: (function (){var newSS, styles = ‘* { border:none !important; background: black ! important; color: #aaa !important; } input, button, textarea { border:1px solid blue !important; } a:link, a:link * { color: yellow !important; text-decoration: none !important; }a:visited, a:visited * { color: #a00 !important; }a:hover, a:hover * { color: red !important; }’;var elemHead = document.getElementsByTagName(“head”)[0];var elemCSS = document.getElementById(“darkenCSS”);if (elemCSS){elemHead.removeChild(elemCSS);}else{newSS = document.createElement(‘link’);newSS.rel = ‘stylesheet’;newSS.href = ‘data:text/css,’ + escape(styles);newSS.id = “darkenCSS”;elemHead.appendChild(newSS);}})();
With white headings if you prefer:
javascript: (function (){var newSS, styles = ‘* { border:none !important; background: black ! important; color: #aaa !important; } b,strong,h1,h2,h3 {color:white !important} input, button, textarea { border:1px solid blue !important; } a:link, a:link * { color: yellow !important; text-decoration: none !important; }a:visited, a:visited * { color: #a00 !important; }a:hover, a:hover * { color: red !important; } * pre { color:white !important; } ‘;var elemHead = document.getElementsByTagName(“head”)[0];var elemCSS = document.getElementById(“darkenCSS”);if (elemCSS){elemHead.removeChild(elemCSS);}else{newSS = document.createElement(‘link’);newSS.rel = ‘stylesheet’;newSS.href = ‘data:text/css,’ + escape(styles);newSS.id = “darkenCSS”;elemHead.appendChild(newSS);}})();
Very nice